import React, { Component } from 'react'
import {
  Card,
  Tooltip,
  Popover,
  message,
  Radio,
  Button,
  Tabs,
  Spin,
  Table,
  Tag,
  Input,
  Collapse,
  Modal,
  Form,
  Select,
  InputNumber,
  Typography,
  Icon,
  Anchor,
  Pagination
} from 'antd'
import { request } from '../../../utils/request'
import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import './index.css'
const { Panel } = Collapse
const { TabPane } = Tabs
const { Option } = Select
const { Title } = Typography
const { Link } = Anchor
let id = 0
@Form.create()
export default class TargetDetails extends Component {
  state = {
    name: '',
    Structure: [],
    dataOne: qs.parse(this.props.location.search.slice(1)),
    visible: false,
    visible2: false,
    pdbId: '6f6s',
    DetailsData: {
      PubChemCID: 5462310,
      MolecularWeight: 12.011,
      smiles: 'cccc',
    },
    panelList: {
      Bioassay: [],
    },
    statusMutation: 0,
    OLDMutationList: [],

    targetsDetail: {
      Structure: [],
      Sequence: [],
      MutationList: [],
      Bioassay: [],
      DrugsInformation: []

    },
    loading: true,
    getStructureList: {
      ligand_up_list: [],
      ligand_list: [],
      chain: [],
      References: [],
    },
    listData: {
      pdb_code: '',
      ligand: '',
      resolution: 0,
    },
    fileData: {
      filestring: '',
      type: 'pdb',
    },
    SequenceAlignment: {
      reference: '',
      aligns: '',
    },
    SequenceAlignmentList: [],
    MutationSearch: {
      page: 1,
      page_size: 10,
      dataid: qs.parse(this.props.location.search.slice(1)).dataid,
      status: 0,
      desc: 1

    },
    BioassaySearch: {
      page: 1,
      page_size: 10,
      dataid: qs.parse(this.props.location.search.slice(1)).dataid

    },
    DrugClinicalImformationSearch: {
      page: 1,
      page_size: 10,
      dataid: qs.parse(this.props.location.search.slice(1)).dataid
    },
    total_num: 0,
    total_num2: 0,
    total_num3: 0,
    total_num4: 0,
    ligandListSelect: []
  }
  componentDidMount () {
    this.getDetails()
    // this.DrugClinicalImformationList()
    // this.getMutationList()
    // this.getBioassayList()
  }
  getDetails () {
    // this.setState({loading:true})
    this.setState({ loading: true })
    request
      .post('/gpcr/target_detail', this.props.location.search.slice(1))
      .then((res) => {
        this.setState({ loading: false })
        if (res.data.code === 200) {
          console.log(res)

          let data = res.data.data
          this.setState({ targetsDetail: data })
          this.setState({ OLDMutationList: data.Mutation })

          this.setState({ loading: false })
          let StructureList = res.data.data.Structure
          if (StructureList.length > 0) {
            this.getStructure(StructureList[0].pdb)
          }
          this.DrugClinicalImformationList()
          this.getMutationList()
          this.getBioassayList()
        } else {
          message.error(res.data.msg)
        }

      })
      .catch((err) => {
        console.error(err)
      })
  }
  getMutationList = () => {

    console.log(this.state.dataOne)
    const { dataid } = this.state.dataOne
    this.setState({ loading: true })
    request.post('gpcr/target_detail/mutation', qs.stringify(this.state.MutationSearch))
      .then(res => {
        this.setState({ loading: false })
        if (res) {
          let targetsDetail = this.state.targetsDetail
          targetsDetail.MutationList = res.data.data
          this.setState({ total_num: res.data.total_num })
          this.setState({
            targetsDetail
          })
        }
      })
      .catch(err => {
        console.error(err)
      })

  }
  onChangeTable = (pagination, filters, sorter, extra) => {
    // console.log('params', pagination, filters, sorter, extra)
    console.log(sorter)
    if (sorter.order === "ascend") {
      let MutationSearch = this.state.MutationSearch
      MutationSearch.desc = 1
      this.setState(() => ({ MutationSearch: MutationSearch }))
      this.getMutationList()

    }
    if (sorter.order === "descend") {
      let MutationSearch = this.state.MutationSearch
      MutationSearch.desc = 2
      this.setState(() => ({ MutationSearch: MutationSearch }))
      this.getMutationList()

    }

  }
  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize)
    let MutationSearch = this.state.MutationSearch
    MutationSearch.page = current
    MutationSearch.page_size = pageSize
    this.setState({
      MutationSearch
    })
    this.getMutationList()
  }
  onChange = (current, pageSize) => {
    console.log(current, pageSize)
    let MutationSearch = this.state.MutationSearch
    MutationSearch.page = current
    MutationSearch.page_size = pageSize
    this.setState({
      MutationSearch
    })
    this.getMutationList()
  }
  getBioassayList = () => {
    console.log(this.state.dataOne)
    const { dataid } = this.state.dataOne
    this.setState({ loading: true })
    request.post('gpcr/target_detail/bioassay', qs.stringify(this.state.BioassaySearch))
      .then(res => {
        this.setState({ loading: false })
        if (res) {
          console.log(res)
          let targetsDetail = this.state.targetsDetail
          targetsDetail.Bioassay = res.data.data
          this.setState({ total_num2: res.data.total_num })
          this.setState({
            targetsDetail: targetsDetail
          })
        }



      })
      .catch(err => {
        console.error(err)
      })

  }
  onShowSizeChange2 = (current, pageSize) => {
    let BioassaySearch = this.state.BioassaySearch
    BioassaySearch.page = current
    BioassaySearch.page_size = pageSize
    this.setState({
      BioassaySearch
    })
    this.getBioassayList()


  }
  onChange2 = (current, pageSize) => {

    let BioassaySearch = this.state.BioassaySearch
    BioassaySearch.page = current
    BioassaySearch.page_size = pageSize
    this.setState({
      BioassaySearch
    })

    this.getBioassayList()




  }
  DrugClinicalImformationList = () => {
    console.log(this.state.dataOne)
    const { dataid } = this.state.dataOne
    this.setState({ loading: true })
    request.post('gpcr/target_detail/drug_information', qs.stringify(this.state.DrugClinicalImformationSearch))
      .then(res => {
        this.setState({ loading: false })
        if (res) {
          console.log(res)
          let targetsDetail = this.state.targetsDetail
          targetsDetail.DrugsInformation = res.data.data
          this.setState({ total_num3: res.data.total_num })
          this.setState({
            targetsDetail: targetsDetail
          })
        }



      })
      .catch(err => {
        console.error(err)
      })
  }
  onShowSizeChange3 = (current, pageSize) => {
    let DrugClinicalImformationSearch = this.state.DrugClinicalImformationSearch
    DrugClinicalImformationSearch.page = current
    DrugClinicalImformationSearch.page_size = pageSize
    this.setState({
      DrugClinicalImformationSearch
    })
    this.DrugClinicalImformationList()


  }
  onChange3 = (current, pageSize) => {

    let DrugClinicalImformationSearch = this.state.DrugClinicalImformationSearch
    DrugClinicalImformationSearch.page = current
    DrugClinicalImformationSearch.page_size = pageSize
    this.setState({
      DrugClinicalImformationSearch
    })

    this.DrugClinicalImformationList()




  }
  getPdid (e) {
    console.log(e)
    this.setState({ visible: true })
    this.setState({ pdbId: e })
  }
  getTag = (e) => {
    console.log(e)
    this.setState({ visible: true })
    this.setState({ pdbId: e })
  }
  getReferences = (e) => {
    window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`)
  }
  onChangeRadio = (e) => {
    let value = e.target.value
    let MutationSearch = this.state.MutationSearch
    MutationSearch.status = value
    this.setState(() => ({ MutationSearch: MutationSearch }))
    this.getMutationList()
  }
  getDrug = (e) => {
    console.log(e)
    let data = {
      dataid: e,
    }
    this.props.history.push({
      pathname: '/home/SearchDetails',
      search: qs.stringify(data),
    })
  }

  callback () { }
  childTargetClassChange = () => { }
  getStructure = (e) => {
    request
      .post(
        '/search_pdb_data',
        qs.stringify({
          pdb: e,
        })
      )
      .then((res) => {
        this.setState({ loading: false })
        if (res.data.code === 200) {
          this.setState({ getStructureList: res.data.data })
          let listData = this.state.listData
          listData.pdb_code = res.data.data.name
          this.setState({ listData })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  ChangeTabs = (e) => {
    let listData = this.state.listData
    listData.ligand = ''
    this.setState({
      listData: listData,
    })
    this.getStructure(e)
  }
  getList = () => {
    let fileData = this.state.fileData
    fileData.filestring = ''
    this.setState({
      fileData: fileData,
    })
    request
      .post('/search_pdb_ligand_resolution', qs.stringify(this.state.listData))
      .then((res) => {
        let fileData = JSON.parse(JSON.stringify(this.state.fileData))
        fileData.filestring = res.data
        this.setState({
          fileData: fileData,
        })

        this.setState({
          visible: true,
        })

        this.setState({ loading: false })
        console.log(this.state.fileData)
      })
      .catch((err) => {
        console.error(err)
      })
  }
  getResolutionData = (e) => {
    console.log(e)
    let listData = this.state.listData
    listData.resolution = e
    this.setState({
      listData,
    })
  }
  LigandChange = (e) => {
    let listData = this.state.listData
    listData.ligand = e
    this.setState({
      listData,
    })
  }
  sequenceAlign = () => {
    request
      .post('/gpcr/sequence_align', qs.stringify(this.state.SequenceAlignment))
      .then((res) => {
        console.log(res)
        this.setState({ loading: false })
        if (res.data.code === 200) {
          this.setState({ SequenceAlignmentList: res.data.data })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  remove = (k) => {
    const { form } = this.props
    // can use data-binding to get
    const keys = form.getFieldValue('keys')
    // We need at least one passenger
    if (keys.length === 1) {
      return
    }

    // can use data-binding to set
    form.setFieldsValue({
      keys: keys.filter((key) => key !== k),
    })
  }

  add = () => {
    const { form } = this.props
    // can use data-binding to get
    const keys = form.getFieldValue('keys')
    const nextKeys = keys.concat(id++)
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys,
    })
  }

  handleSubmit = (e) => {
    console.log(e)
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      const { keys, names } = values
      // console.log('Received values of form: ', values);
      // console.log('Merged values:', keys.map(key => names[key]));
      // let names=keys.map(key => names[key])
      console.log(names)

      for (let index = 0; index < names.length; index++) {
        var element = names[index]
        if (element == undefined) {
          names[index] = ''
        }
      }
      let newArr = names.filter((i) => i && i.trim())
      console.log(newArr)

      let SequenceAlignment = this.state.SequenceAlignment
      SequenceAlignment.aligns = newArr.toString()
      SequenceAlignment.reference = this.state.targetsDetail.name
      this.setState(() => ({ SequenceAlignment: SequenceAlignment }))

      this.sequenceAlign()
    })
  }
  getSequence = (e) => {
    const { value } = e.target
    let SequenceAlignment = this.state.SequenceAlignment
    SequenceAlignment.reference = value
    this.setState(() => ({ SequenceAlignment: SequenceAlignment }))
  }
  handleAnchorClick = (e) => {
    e.preventDefault()
  }
  render () {
    const {
      visible,
      visible2,
      SequenceAlignmentList,
      OLDMutationList,
      targetsDetail,
      getStructureList,
      total_num,
      total_num2,
      total_num3,
      ligandListSelect
    } = this.state
    const { getFieldDecorator, getFieldValue } = this.props.form

    const columns2 = [
      {
        title: 'name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'identity',
        dataIndex: 'identity',
        key: 'identity',
        render: (item, record) => (
          <div>
            {item && item + '%'}

          </div>
        ),
      },
      {
        title: 'similarity',
        dataIndex: 'similarity',
        key: 'similarity',
        render: (item, record) => (
          <div>
            {item && item + '%'}
          </div>
        ),

      },
      {
        title: 'sequence',
        dataIndex: 'sequence',
        key: 'sequence',
        render: (item, record) => (
          <div className="table-sequence-div">
            {item.split('').map(item2 => {
              return (
                <div>
                  {item2}
                </div>
              )
            })
            }

          </div>
        ),
      },
    ]
    const formItemLayout2 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    }
    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 20, offset: 4 },
      },
    }
    const columnsDrug = [
      {
        title: 'Drug Structure',
        dataIndex: 'Drug_Structure',
        key: 'Drug_Structure',
        render: (DrugStructure) => (
          <Jsme
            height="100px"
            width="100px"
            options="depict,useopenchemlib"
            smiles={DrugStructure}
          />
        ),
      },

      {
        title: 'Drug name',
        dataIndex: 'Drug_name',
        key: 'Drug_name',
        render: (item, record) => (
          <Button
            type="primary"
            onClick={() => this.getDrug(record.dataid)}>
            {item}
          </Button>
        ),
      },
      {
        title: 'Drug Type',
        dataIndex: 'datatype',
        key: 'datatype',
      },
      {
        title: 'Indication',
        dataIndex: 'Indication',
        key: 'Indication',
      },
      {
        title: 'Mechanism of Action',
        dataIndex: 'Mechanism_of_Action',
        key: 'Mechanism_of_Action',
      },
      {
        title: 'Status',
        dataIndex: 'Status',
        key: 'Status',
      },
      {
        title: 'Clinical Phase',
        dataIndex: 'Clinical_Phase',
        key: 'Clinical_Phase',
      },
      {
        title: 'Clinical Status',
        dataIndex: 'Clinical_Status',
        key: 'Clinical_Status',
      },
      {
        title: 'Year of Approval',
        dataIndex: 'Year_of_Approval',
        key: 'Year_of_Approval',
      },
      {
        title: 'References',
        dataIndex: 'References',
        key: 'References',
        render: (References) => (
          <span>
            {References.map((item) => {
              return (
                <Tag
                  color="blue"
                  key={item}
                  onClick={() => {
                    this.getReferences(item)
                  }}>
                  {item.toUpperCase()}
                </Tag>
              )
            })}
          </span>
        ),
      },
    ]
    const columnsBioassay = [
      {
        title: 'Structure',
        dataIndex: 'smiles',
        key: 'smiles',
        render: (smiles) => (
          <Jsme
            height="100px"
            width="100px"
            options="depict,useopenchemlib"
            smiles={smiles}
          />
        ),
      },
      {
        title: 'Compound name',
        dataIndex: 'compound_name',
        key: 'compound_name',
      },
      {
        title: 'Type',
        dataIndex: 'Type',
        key: 'Type',
      },
      {
        title: 'Action',
        dataIndex: 'Action',
        key: 'Action',
      },
      {
        title: 'Parameter',
        dataIndex: 'Parameter',
        key: 'Parameter',
      },
      {
        title: 'Value',
        dataIndex: 'Value',
        key: 'Value',
      },
      {
        title: 'References',
        dataIndex: 'References',
        key: 'References',
        render: (References) => (
          <span>
            {References.map((item) => {
              return (
                <Tag
                  color="blue"
                  key={item}
                  onClick={() => {
                    this.getReferences(item)
                  }}>
                  {item.toUpperCase()}
                </Tag>
              )
            })}
          </span>
        ),
      },
    ]
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    }

    const columnsMutation = [
      {
        title: 'Generic number',
        dataIndex: 'Generic',
        key: 'Generic',
      },
      {
        title: 'Position',
        dataIndex: 'Position',
        key: 'Position',
      },
      {
        title: 'Segment',
        dataIndex: 'Segment',
        key: 'Segment',
      },
      {
        title: 'Mutation',
        dataIndex: 'Mutation',
        key: 'Mutation',
      },
      {
        title: 'Ligand',
        dataIndex: 'Ligand',
        key: 'Ligand',
        render: (Ligand, record) => (
          <Popover
            content={
              <div>
                <Jsme
                  height="100px"
                  width="100px"
                  options="depict,useopenchemlib"
                  smiles={record.smiles}
                />
              </div>
            }>
            {record.Ligand_name != '' && <Button type="primary">{record.Ligand_name}</Button>}
          </Popover>
        ),
      },
      {
        title: 'Activity type',
        dataIndex: 'Activity_type',
        key: 'Activity_type',
      },
      {
        title: 'Activity value',
        dataIndex: 'Activity_value',
        key: 'Activity_value',
      },
      {
        title: 'PercentChange(%)',
        dataIndex: 'Foldchange',
        key: 'Foldchange',
        defaultSortOrder: 'ascend',
        sorter: (a, b) => { },
      },

      // {
      //   title: 'Year of approval',
      //   dataIndex: 'Year of approval',
      //   key: 'Year of approval',
      // },
      {
        title: 'Reference',
        dataIndex: 'Reference',
        render: (Reference) => (
          <span>
            {Reference.map((item) => {
              return (
                <Tag
                  color="blue"
                  key={item}
                  onClick={() => {
                    this.getReferences(item)
                  }}>
                  {item.toUpperCase()}
                </Tag>
              )
            })}
          </span>
        ),
      },
    ]
    const columnsChain = [
      {
        title: 'Chain_name',
        dataIndex: 'Chain_name',
        key: 'Chain_name',
      },
      {
        title: 'Chain_ID',
        dataIndex: 'Chain_ID',
        key: 'Chain_ID',
      },

      {
        title: 'code',
        dataIndex: 'code',
        key: 'code',
      },
      {
        title: 'code_type',
        dataIndex: 'code_type',
        key: 'code_type',
      },
      {
        title: 'res_start',
        dataIndex: 'res_start',
        key: 'res_start',
      },
      {
        title: 'res_end',
        dataIndex: 'res_end',
        key: 'res_end',
      },
    ]
    getFieldDecorator('keys', { initialValue: [] })
    const keys = getFieldValue('keys')
    const formItems = keys.map((k, index) => (
      <Form.Item
        {...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)}
        label={index === 0 ? 'AlignSequence: ' : ''}
        required={false}
        key={k}>
        {getFieldDecorator(`names[${k}]`)(
          <Input
            placeholder="Please input uniprot name"
            style={{ width: '60%', marginRight: 8 }}
          />
        )}
        {keys.length > 1 ? (
          <Icon
            className="dynamic-delete-button"
            type="minus-circle-o"
            onClick={() => this.remove(k)}
          />
        ) : null}
      </Form.Item>
    ))
    return (
      <div className="search-details-div">
        <div className="Anchor-div">
          <Anchor onClick={this.handleAnchorClick}>
            <Link href="#card" title="card" />
            <Link href="#Sequence" title="Sequence" />
            <Link href="#Structure" title="Structure" />
            <Link href="#Mutation" title="Mutation" />
            <Link href="#Drug" title="Drug & Clinical imformation" />
            <Link href="#Bioassay" title="Bioassay" />
          </Anchor>
        </div>
        <Modal
          footer={null}
          closable={false}
          width={550}
          visible={visible}
          wrapClassName="vertical-center-modal"
          onCancel={() => this.setState({ visible: false })}>
          <div className="Molstar-div">
            <Molstar file={this.state.fileData} />
          </div>
        </Modal>
        <Modal
          footer={null}
          closable={false}
          width={1000}
          visible={visible2}
          wrapClassName="vertical-center-modal"
          onCancel={() => this.setState({ visible2: false })}>
          <div className="form-div">
            <Form onSubmit={this.handleSubmit}>
              <Form.Item
                label="Ref. Sequence:"
                {...{
                  labelCol: {
                    xs: { span: 24 },
                    sm: { span: 4 },
                  },
                  wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 20 },
                  },
                }}>
                <Input
                  placeholder=""
                  style={{ width: '60%', marginRight: 8 }}
                  disabled
                  value={targetsDetail.name}
                />
              </Form.Item>

              {formItems}
              <Form.Item {...formItemLayoutWithOutLabel}>
                <Button
                  type="dashed"
                  onClick={this.add}
                  style={{ width: '60%' }}>
                  <Icon type="plus" /> Add field
                </Button>
              </Form.Item>
              <Form.Item {...formItemLayoutWithOutLabel}>
                <Button type="primary" htmlType="submit">
                  Align
                </Button>
              </Form.Item>
            </Form>
          </div>
          <div className="SequenceAlignmentList-div">
            {SequenceAlignmentList.length > 0 && (
              <Table
                bordered
                rowKey="item"
                dataSource={SequenceAlignmentList}
                pagination={false}
                columns={columns2}
                scroll={{ x: 1800 }}
              />
            )}
          </div>
        </Modal>
        <Spin tip="Loading..." size="large" spinning={this.state.loading}>
          <Card hoverable id="card">
            <div>
              <div className="title-div">{targetsDetail.name}</div>
              <div className="title-div-top">
                <div className="DataList-left">
                  <div>
                    <div className="div-list">
                      <div className="list-one">
                        <div>Gene name</div>
                        <div />
                        {targetsDetail.Gene_name}
                      </div>
                      <div className="list-one">
                        <div>Species</div>
                        <div />
                        {targetsDetail.Species}
                      </div>
                      <div className="list-one">
                        <div>Uniprot id</div>
                        <div />
                        {targetsDetail.Uniport_id}
                      </div>
                      <div className="list-one">
                        <div>Class</div>
                        <div />
                        {targetsDetail.Class}
                      </div>
                      <div className="list-one">
                        <div>Family</div>
                        <div />
                        {targetsDetail.Family}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Card>
          {/* {PanelList} */}
          <Collapse
            defaultActiveKey={['1', '2', '3', '4', '5']}
            onChange={this.callback}>
            <Panel header="Sequence" key="1" id="Sequence">
              <Button
                type="primary"
                onClick={() => this.setState({ visible2: true })}>
                alignment
              </Button>
              <div className="Sequence-div">
                {targetsDetail.Sequence.map((item, index) => {
                  // console.log(item);
                  //   console.log(Object.entries(item));
                  return (
                    <div className="Sequenceone-div" key={index}>
                      {Object.entries(item)[0][0]}
                      <div className="zimu-div">
                        {Object.entries(item)[0][1].map((item2, index2) => {

                          return (
                            <Tooltip
                              placement="top"
                              key={index2}
                              title={item2.title}>
                              <div className={'res-color-' + item2.thum}>
                                {item2.thum}
                              </div>
                            </Tooltip>
                          )
                        })}
                      </div>
                    </div>
                  )
                })}
              </div>
            </Panel>
            <Panel header="Structure" key="2" id="Structure">
              <Tabs
                defaultActiveKey="0"
                tabPosition="left"
                style={{ height: 1000 }}
                onChange={this.ChangeTabs}>
                {targetsDetail.Structure.map((item, index) => {
                  return (
                    <TabPane tab={item.pdb} key={item.pdb}>
                      <div className="TabPane-center">
                        <div className="Molstar-div2">
                          <Molstar pdbId={item.pdb} />
                        </div>
                        <div className="Structure-right">
                          <Form layout="horizontal">
                            <Form.Item label="详情" {...formItemLayout}>
                              <div>method: {getStructureList.method}</div>
                              <div>name: {getStructureList.name}</div>
                              <div>
                                pdb_datatime: {getStructureList.pdb_datatime}
                              </div>
                              <div>
                                resolution: {getStructureList.resolution}
                              </div>
                            </Form.Item>
                            <Form.Item label="配体列表" {...formItemLayout}>
                              {getStructureList.ligand_up_list &&
                                getStructureList.ligand_up_list.map(
                                  (item, index) => {
                                    return (
                                      <Popover
                                        content={
                                          <div>
                                            <div
                                              style={{
                                                width: '100px',
                                                wordWrap: 'break-word',
                                                wordBreak: 'normal',
                                              }}>
                                              {item.comp_name}
                                            </div>

                                            <Jsme
                                              height="100px"
                                              width="100px"
                                              options="depict,useopenchemlib"
                                              smiles={item.smiles}
                                            />
                                          </div>
                                        }>
                                        {
                                          <Button
                                            type="primary"
                                            style={{ marginRight: '5px' }}>
                                            {item.name}
                                          </Button>
                                        }
                                      </Popover>
                                    )
                                  }
                                )}
                            </Form.Item>
                            <Form.Item label="配体选择" {...formItemLayout}>
                              <Select
                                style={{ width: 250 }}
                                value={this.state.listData.ligand}
                                size="large"
                                onChange={this.LigandChange}>
                                {getStructureList.ligand_list &&
                                  getStructureList.ligand_list.map(
                                    (item, index) => {
                                      return (
                                        <Option key={index} value={item}>
                                          {item}
                                        </Option>
                                      )
                                    }
                                  )}
                              </Select>
                            </Form.Item>
                            <Form.Item label="搜索半径" {...formItemLayout}>
                              <InputNumber
                                style={{ width: 250 }}
                                min={getStructureList.resolution}
                                max={10}
                                placeholder={'请输入大于resolutiond数字'}
                                step={0.1}
                                size="large"
                                onChange={this.getResolutionData}
                              />
                            </Form.Item>
                            <Form.Item label="References " {...formItemLayout}>
                              {getStructureList.References &&
                                getStructureList.References.map(
                                  (item, index) => {
                                    return (
                                      <Button
                                        type="primary"
                                        onClick={() => {
                                          this.getReferences(item)
                                        }}
                                        key={index}
                                        style={{ marginRight: '5px' }}>
                                        {item}
                                      </Button>
                                    )
                                  }
                                )}
                            </Form.Item>
                            <Form.Item label="Search" {...formItemLayout}>
                              <Button
                                type="primary"
                                style={{ marginLeft: 50, width: 150 }}
                                size="large"
                                loading={this.state.loading}
                                disabled={
                                  getStructureList.ligand_list.length === 0
                                }
                                onClick={this.getList}>
                                Search
                              </Button>
                            </Form.Item>
                          </Form>
                        </div>
                      </div>
                      <Table
                        bordered
                        rowKey="item"
                        dataSource={getStructureList.chain}
                        pagination={false}
                        columns={columnsChain}
                      />
                    </TabPane>
                  )
                })}
              </Tabs>
            </Panel>
            <Panel header="Mutation" key="3" id="Mutation">
              <div className="Radio-div">
                <Radio.Group
                  onChange={this.onChangeRadio}
                  value={this.state.MutationSearch.status}>
                  <Radio value={0}>Full data</Radio>
                  <Radio value={1}>Increase only</Radio>
                  <Radio value={2}>Decrease only</Radio>
                </Radio.Group>
              </div>

              <Table
                bordered
                rowKey="item"
                dataSource={targetsDetail.MutationList}
                pagination={false}
                columns={columnsMutation}
                onChange={this.onChangeTable}
              />
              <Pagination
                showSizeChanger
                onShowSizeChange={this.onShowSizeChange}
                onChange={this.onChange}
                total={total_num}
              />
            </Panel>
            <Panel header="Drug & Clinical imformation" key="4" id="Drug">
              <Table
                bordered
                rowKey="item"
                dataSource={targetsDetail.DrugsInformation}
                pagination={false}
                columns={columnsDrug}
              />
              <Pagination
                showSizeChanger
                onShowSizeChange={this.onShowSizeChange3}
                onChange={this.onChange3}
                total={total_num3}
              />
            </Panel>
            <Panel header="Bioassay" key="5" id="Bioassay">
              <Table
                bordered
                rowKey="item"
                dataSource={targetsDetail.Bioassay}
                pagination={false}
                columns={columnsBioassay}
              />
              <Pagination
                showSizeChanger
                onShowSizeChange={this.onShowSizeChange2}
                onChange={this.onChange2}
                total={total_num2}
              />
            </Panel>
          </Collapse>
        </Spin>
      </div>
    )
  }
}
