import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
import { Card, Button, Pagination, Tabs, Spin, message, Tag } from 'antd'
import request from '../../../utils/request'
import qs from 'qs'
import './index.css'
const { TabPane } = Tabs

export default class SearchList extends Component {
  state = {
    smilesList: [
    ],
    visible: false,
    pdbId: '6f6s',
    total_num: 0,
    smilesData: qs.parse(this.props.location.search.slice(1)),
    loading: true

  };
  getPdid (e) {
    let data = {
      dataid: e

    }

    this.props.history.push({ pathname: '/home/TargetDetails', search: qs.stringify(data) })

  }
  onShowSizeChange = (current, pageSize) => {
    if (this.state.smilesData.name === 'Drug') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData
      })
      this.getList()
      return
    }
    if (this.state.smilesData.name === 'Target') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData
      })
      this.getTargetList()
      return
    }
    if (this.state.smilesData.name === 'Ligand') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData
      })
      this.getLigandList()
      return
    }
    if (this.state.smilesData.name === 'Mutation') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData
      })
      this.getMutationList()
      return
    }
  }
  onChange = (current, pageSize) => {
    if (this.state.smilesData.name === 'Drug') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData
      })

      this.getList()
      return
    }
    if (this.state.smilesData.name === 'Target') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData
      })
      this.getTargetList()
      return
    }
    if (this.state.smilesData.name === 'Ligand') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData
      })
      this.getLigandList()
      return
    }
    if (this.state.smilesData.name === 'Mutation') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData
      })
      this.getMutationList()
      return
    }

  }
  componentDidMount () {
    console.log(this.state.smilesData)
    if (this.state.smilesData.name === 'Drug') {
      this.getList()
    }
    if (this.state.smilesData.name === 'Target') {
      this.getTargetList()
    }
    if (this.state.smilesData.name === 'Ligand') {

      this.getLigandList()
    }
    if (this.state.smilesData.name === 'Mutation') {

      this.getMutationList()
    }

  }
  getList () {
    console.log(qs.parse(this.props.location.search.slice(1)))
    this.setState({ loading: true })
    request.post('/gpcr/drugs_search', qs.stringify(this.state.smilesData))
      .then(res => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.setState({ smilesList: res.data.data })
          this.setState({ total_num: res.data.total_num })
          this.setState({ loading: false }
          )

        } else {
          message.error(res.data.msg)
        }
      })
      .catch(err => {
        console.error(err)
      })
  }

  getTargetList () {
    console.log(qs.parse(this.props.location.search.slice(1)))
    this.setState({ loading: true })
    request.post('/gpcr/targets_search', qs.stringify(this.state.smilesData))
      .then(res => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.setState({ smilesList: res.data.data })
          this.setState({ total_num: res.data.total_num })
          this.setState({ loading: false }
          )

        } else {
          message.error(res.data.msg)
        }
      })
      .catch(err => {
        console.error(err)
      })
  }

  getLigandList () {
    console.log(qs.parse(this.props.location.search.slice(1)))
    this.setState({ loading: true })
    request.post('/gpcr/ligand_search', qs.stringify(this.state.smilesData))
      .then(res => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.setState({ smilesList: res.data.data })
          this.setState({ total_num: res.data.total_num })
          this.setState({ loading: false }
          )

        } else {
          message.error(res.data.msg)
        }
      })
      .catch(err => {
        console.error(err)
      })
  }

  getMutationList () {
    console.log(qs.parse(this.props.location.search.slice(1)))
    this.setState({ loading: true })
    request.post('/gpcr/mutation_search', qs.stringify(this.state.smilesData))
      .then(res => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.setState({ smilesList: res.data.data })
          this.setState({ total_num: res.data.total_num })
          this.setState({ loading: false }
          )

        } else {
          message.error(res.data.msg)
        }
      })
      .catch(err => {
        console.error(err)
      })
  }

  onChangeGroup = (e) => {
    console.log(e)
  }
  getOne (e) {
    const { dataid, datatype } = e
    let data = {
      dataid,
      datatype
    }

    if (this.state.smilesData.name === 'Drug') {
      this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data) })
    }
    if (this.state.smilesData.name === 'Target') {
      this.props.history.push({ pathname: '/home/TargetDetails', search: qs.stringify(data) })
    }
    if (this.state.smilesData.name === 'Ligand') {
      this.props.history.push({ pathname: '/home/LigandDetails', search: qs.stringify(data) })
    }
    if (this.state.smilesData.name === 'Mutation') {
      this.props.history.push({ pathname: '/home/MutationDetails', search: qs.stringify(data) })
    }

  }

  render () {
    const { smilesList, loading, visible, pdbId, total_num, smilesData } = this.state

    const listItems = smilesList.map((item, index) => {
      return (
        <Card loading={loading} hoverable extra={<a onClick={() => this.getOne(item)}>{item.name}</a>} style={{ width: '100%', marginBottom: '20px' }} key={index} >
          <div className='list-div-one'>
            <div className={(smilesData.name === 'Drug' || smilesData.name === 'Ligand') ? 'list-div-left' : 'isShowDiv'}>
              <Jsme height="150px" width="" options="depict,useopenchemlib" smiles={item.smile} />
            </div>
            <div className='list-div-right' >
              {
                Object.keys(item.info).map((item2, key2, arr) => {
                  if (typeof item.info[item2] === 'object') {
                    return (<div className='left' key={key2} > <span>{item2}</span>:
                      {
                        item2 === 'Indication' && item.info[item2].slice(0, 5).map((item3, index3) => {
                          return (
                            <span type="primary" style={{
                              fontWeight: 300,
                              color: 'black'
                            }} key={index3} >   <Tag style={{ marginBottom: '5px' }}>{item3}</Tag></span>)
                        })}{
                        item2 === 'Target' && item.info[item2].slice(0, 5).map((item3, index3) => {
                          return (
                            <Button type="primary" style={{ marginBottom: '5px', marginLeft: '5px' }} key={index3} onClick={() => this.getPdid(item3.dataid)}>{item3.name}</Button>)
                        })

                      }

                      <div>


                      </div>


                    </div>



                    )

                  } else {
                    return (<div className='left' key={key2} > <span>{item2}</span>:

                      {
                        item.info[item2]
                      }

                    </div>



                    )


                  }

                })
              }

              {/* <p><font>DRUG_NAME：</font>{item.DRUG_NAME}</p>
                    <p><font>SMILES：</font>{item.smile}</p>
                    <p><font>Drug_Type：</font>{item.Drug_Type}</p>
                    <p><font>DrugBankID：</font>{item.DrugBankID}</p>
                    <p><font>ChemblID：</font>{item.ChemblID}</p> */}
            </div>
            <div className='btn-list'>
              {item.right_info && Object.entries(item.right_info).map((item2, index2) => {
                if (typeof item2[1] === 'string') {
                  return (
                    // <div>
                    //  <span>{item2[0]}:</span> 
                    //   {item2[1]}
                    // </div>
                    <div className='right-div' key={index2} > <span>{item2[0]}</span>:

                      {
                        item2[1]
                      }

                    </div>
                  )
                }

              })}

            </div>

            <div>
            </div>

          </div>
        </Card>
      )
    }


    )
    return (
      <div className='search-div' >
        <Spin tip="Loading..." size='large' spinning={this.state.loading}>
          <Tabs type="card">
            <TabPane tab={smilesData.name} key={smilesData.name}>
              <div className='search-content' >
                Search Content:{smilesData.drugs_data}
              </div>
              <div className='search-content' >
                Search Total:{total_num}条
              </div>
              {/* <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeGroup}>
            <div className='CheckboxList'>
            <Checkbox value="pdb">pdb</Checkbox>
            <Checkbox value="Drug">Drug</Checkbox>
            <Button type="primary">Search</Button>
            </div>
          </Checkbox.Group> */}
              {listItems}
              <Pagination
                showSizeChanger
                onShowSizeChange={this.onShowSizeChange}
                onChange={this.onChange}
                total={total_num}
              />
            </TabPane>
          </Tabs>

        </Spin>


      </div>
    )
  }
}
