import React, { Component } from 'react'

import {
  Table,
  Input,
  Button,
  Form,
  Select,
  Pagination,
  message,
  Tag,
  Spin,
  Popover,
  Checkbox,
  InputNumber,
  Icon,
  Modal,
  Tooltip,
  Divider,
  Radio
} from 'antd'
import { Jsme } from 'jsme-react'
import { request } from '../../utils/request'
import LogoTitlte from '../../components/LogoTitlte/index'
import WrappedIframe from '../../components/iframePdb'

import './index.css'
const { Option } = Select
const { TextArea } = Input
let id = 0
@Form.create()
export default class padSmallSearch extends Component {
  state = {
    draw: false,
    getAdvancedOption: false,
    total_num: 0,
    listData: {
      pdb_code: '',
      ligand: '',
      resolution: 0,
    },
    searchData: {
      protein_data: '',
      percent: '50%',
      sequence: '',
      ligand_data: '',
      pdb_id: '',
      page_size: 10,
      page: 1,
      resolution: '',
      mol_weight: '',
      atom_number: '',
      rot_bond_number: '',
      finger: 0,
      method: [],
    },
    mol_weight: [],
    atom_number: [],
    rot_bond_number: [],
    selectedRowKeys: [],
    dataList: [],
    pdbLink: '',
    pdbLink2: '',
    pdbLink3: '',
    textData: '',
    listData: {
      pdb_code: '',
      ligand: '',
      resolution: 0,
    },
    listData2: {
      pdb_code: '',
      ligand: '',
      resolution: 0,
    },
    listData3: {
      pdb_code: '',
      ligand: '',
      resolution: 0,
    },
    pdbLigandList: [],
    ligandList: [],
    ligandListData: [],
    pdbList: [
      { chainID: '', pdbID: '' },
      { chainID: '', pdbID: '', method: '', cutoff: '', cycles: '' },
      { chainID: '', pdbID: '', method: '', cutoff: '', cycles: '' },
    ],
    loading: false,
    loading2: false,
    pdbdivState: false,
    ListState: false,
    DetailsData: {
      smiles: null,
      Structure: [],
      Bioassay: [],
      Target: [],
      Indication: [],
      synonyms: [],
    },
    sum: 0,
    addList: ['super', 'align'],
    superpositionData: [
      {
        chainID: '',
        pdbID: '',
      },
      {
        chainID: '',
        pdbID: '',
        method: '',
        cutoff: 0,
        cycles: 0,
      },
      {
        chainID: '',
        pdbID: '',
        method: '',
        cutoff: 0,
        cycles: 0,
      },
    ],
    visible: false,
    pdbLinkWindow: '',
    ligandListSelect: [],
    SourceList: [

    ],
    AlignLigandsList: [
      {
        pdb_name: '',
        ligand: '',
      },
      {
        pdb_name: '',
        ligand: '',
      },
      {
        pdb_name: '',
        ligand: '',
      }
    ],
    SelectligandLink: '',
    listKey: [],
    selectedRows: [],
    sequenceStste: false
  }
  SelectValue = (e) => {
    console.log(e)
    let superpositionData = this.state.superpositionData
    superpositionData[0].pdbID = e
    this.setState(() => ({ superpositionData: superpositionData }))
  }
  SelectValueCompound = (e) => {
    console.log(e)
    let AlignLigandsList = this.state.AlignLigandsList
    AlignLigandsList[0].ligand = e
    this.setState(() => ({ AlignLigandsList: AlignLigandsList }))
  }
  SelectValueSource = (e) => {
    console.log(e)
    let AlignLigandsList = this.state.AlignLigandsList
    AlignLigandsList[0].pdb_name = e
    this.setState(() => ({ AlignLigandsList: AlignLigandsList }))
  }
  SelectValueCompound2 = (e) => {
    console.log(e)
    let AlignLigandsList = this.state.AlignLigandsList
    AlignLigandsList[1].ligand = e
    this.setState(() => ({ AlignLigandsList: AlignLigandsList }))
  }
  SelectValueSource2 = (e) => {
    console.log(e)
    let AlignLigandsList = this.state.AlignLigandsList
    AlignLigandsList[1].pdb_name = e
    this.setState(() => ({ AlignLigandsList: AlignLigandsList }))
  }
  SelectValueCompound3 = (e) => {
    console.log(e)
    let AlignLigandsList = this.state.AlignLigandsList
    AlignLigandsList[2].ligand = e
    this.setState(() => ({ AlignLigandsList: AlignLigandsList }))
  }
  SelectValueSource3 = (e) => {
    console.log(e)
    let AlignLigandsList = this.state.AlignLigandsList
    AlignLigandsList[2].pdb_name = e
    this.setState(() => ({ AlignLigandsList: AlignLigandsList }))
  }
  handleSubmit2 = () => {
    let AlignLigandsList = this.state.AlignLigandsList
    let listData = {
      pdb_code: '',
      ligand: '',
      resolution: 0,
      ligandList: AlignLigandsList
    }
    let SelectligandLink =
      'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
    this.setState({
      SelectligandLink,
    })
    console.log(SelectligandLink)

  }
  handleSubmit3 = () => {
    let AlignLigandsList = this.state.AlignLigandsList
    let arr = []
    AlignLigandsList.forEach(element => {
      arr.push({
        compID: element.ligand,
        pdbID: element.pdb_name
      })

    })
    console.log(arr)
    let listData = {
      pdb_code: '',
      ligand: '',
      resolution: 0,
      SelectligandList: arr
    }
    let SelectligandListLink =
      'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
    this.setState({
      SelectligandLink: SelectligandListLink
    })
    console.log(SelectligandListLink)

  }
  popupWindow = (e) => {
    const { pdb_name, ligand } = e
    console.log(111)
    this.setState({
      visible: true,
    })

    let listData = {
      pdb_code: '',
      ligand: '',
      resolution: 0,
      ligandList: [
        {
          pdb_name: 'Normal',
          ligand: ligand,
        },
      ],
    }
    let pdbLinkWindow =
      'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
    this.setState({
      pdbLinkWindow,
    })
  }
  getValueChain = (e) => {
    const { value } = e.target
    let superpositionData = this.state.superpositionData
    superpositionData[0].chainID = value
    this.setState(() => ({ superpositionData: superpositionData }))
  }
  addSlection = () => {
    let pdbLigandList = this.state.pdbLigandList

    let SourceList = JSON.parse(JSON.stringify(pdbLigandList))

    SourceList.push('Normal')
    this.setState({ SourceList })
    this.setState({
      pdbdivState: true,
    })
    let listData = this.state.listData
    listData.pdbLigandList = this.state.pdbLigandList
    if (listData.pdbList) {
      delete listData.pdbList
    }

    let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
    this.setState({
      pdbLink,
    })
    console.log(pdbLink)
    console.log(this.state.pdbLink)
    let listData2 = this.state.listData2
    listData2.ligandList = this.state.ligandList
    let pdbLink2 = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData2)
    this.setState({
      pdbLink2,
    })
    console.log(pdbLink2)
  }
  alignStructre = () => {
    let listData = this.state.listData
    listData.pdbList = this.state.pdbList
    delete listData.pdbLigandList
    let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
    this.setState({
      pdbLink,
    })
  }
  alignLigand = () => {
    let ligandListData = this.state.ligandListData
    console.log(ligandListData)
    if (ligandListData.length > 1) {
      return message.warning('选择的数据Ligand必须相同')
    }

    let listData3 = this.state.listData3
    listData3.AlignLigand = {
      pdb_id: this.state.pdbLigandList,
      ligand_code: ligandListData[0],
    }

    let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData3)
    this.setState({
      pdbLink,
    })
  }
  // onSelectChange = (selectedRowKeys, selectedRows) => {

  //   if (this.state.selectedRowKeys.length > 3 || selectedRowKeys.length > 3) {
  //     message.warning('只能选择3条数据')
  //     return
  //   }
  //   if (this.state.selectedRows.length > 3 || selectedRows.length > 4) {
  //     message.warning('只能选择3条数据')
  //     return
  //   }
  //   console.log('selectedRowKeys changed: ', selectedRowKeys)

  //   console.log(selectedRows)
  //   this.setState({ selectedRowKeys })
  //   this.setState({ selectedRows })

  //   if (selectedRows) {
  //     // let newSelectedRows = [...selectedRows, ...this.state.selectedRows]
  //     // this.setState({ selectedRows: newSelectedRows })
  //     let newData = ''
  //     let pdbList = []
  //     let ligandList = []
  //     let ligandList2 = []
  //     let pdbList2 = this.state.pdbList
  //     selectedRows.forEach((element, index) => {
  //       console.log(element)
  //       newData =
  //         newData + ' <' + element.pdb_name + ',' + element.ligand + ' >'
  //       pdbList.push(element.pdb_name)
  //       ligandList.push({ ligand: element.ligand, pdb_name: element.pdb_name })
  //       ligandList2.push(element.ligand)
  //       pdbList2[index].pdbID = element.pdb_name
  //     })
  //     let pdbLigandList = Array.from(new Set(pdbList))

  //     let ligandListData = Array.from(new Set(ligandList2))
  //     console.log(pdbLigandList)
  //     console.log(ligandListData)
  //     console.log(ligandList)

  //     this.setState({ pdbLigandList })
  //     this.setState({ ligandList })
  //     this.setState({ ligandListData })

  //     this.setState({ pdbList2: pdbList })
  //     this.setState({ textData: newData })
  //   }
  // }
  onChangeRadio3 = (e) => {

    let value = e.target.value
    console.log(value)
    let searchData = this.state.searchData
    searchData.finger = value
    this.setState({
      searchData: searchData,
    })
  }

  getList = (e) => {
    this.setState({ ligandList: [] })
    let searchData = this.state.searchData
    searchData.mol_weight = this.state.mol_weight.toString()
    searchData.atom_number = this.state.atom_number.toString()
    searchData.rot_bond_number = this.state.rot_bond_number.toString()
    if (searchData.pdb_id == '' && searchData.protein_data == '' && searchData.sequence == '' && searchData.ligand_data == '') {
      return message.warning('请输入查询条件！')
    }
    if (searchData.sequence != '') {

      this.setState({ sequenceStste: true })
    }
    this.setState({ loading: true })
    request
      .post('pdb/search_ligand', this.state.searchData)
      .then((res) => {
        this.setState({ loading: false })
        if (res.data.code === 200) {

          let dataList = res.data.data
          let selectedRows = this.state.selectedRows
          this.setState({ dataList })
          this.setState({ total_num: res.data.total_num })
          this.setState({ ListState: true })
          // let selectedRowKeys = this.state.selectedRowKeys
          // dataList.forEach((element, index) => {
          //   selectedRows.forEach(element2 => {

          //     let value = this.isObjectValueEqual(element, element2)
          //     if (value) {
          //       selectedRowKeys.push(index)
          //       selectedRows.push(element)
          //     }
          //   })
          // })
          // this.setState({ selectedRowKeys })
          // console.log(this.state.selectedRowKeys)

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

  }
  isObjectValueEqual = (a, b) => {
    // // 判断两个对象是否指向同一内存，指向同一内存返回 true
    if (a === b) return true // 获取两个对象键值数组
    let aProps = Object.getOwnPropertyNames(a)
    let bProps = Object.getOwnPropertyNames(b)
    // 判断两个对象键值数组长度是否一致，不一致返回 false
    if (aProps.length !== bProps.length) return false // 遍历对象的键值
    for (let prop in a) {
      // 判断 a 的键值，在 b 中是否存在，不存在，返回 false
      if (b.hasOwnProperty(prop)) {
        // 判断 a 的键值是否为对象，是则递归，不是对象直接判断键值是否相等，不相等返回 false
        if (typeof a[prop] === 'object') {
          if (!this.isObjectValueEqual(a[prop], b[prop])) return false
        } else if (a[prop] !== b[prop]) {
          return false
        }
      } else {
        return false
      }
    }
    return true
  }
  getpercent = (e) => {
    console.log(e)
    let searchData = this.state.searchData
    searchData.percent = e

    this.setState({ searchData: searchData })
  }
  getLigand = (e) => {
    const { value } = e.target
    let searchData = this.state.searchData
    searchData.ligand_data = value
    this.setState(() => ({ searchData: searchData }))
  }
  getValue = (e) => {
    const { value } = e.target
    let searchData = this.state.searchData
    searchData.pdb_id = value
    this.setState(() => ({ searchData: searchData }))
  }
  getProtein = (e) => {
    const { value } = e.target
    let searchData = this.state.searchData
    searchData.protein_data = value
    this.setState(() => ({ searchData: searchData }))
  }
  getsequence = (e) => {
    const { value } = e.target
    let searchData = this.state.searchData
    searchData.sequence = value
    this.setState(() => ({ searchData: searchData }))
  }
  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize)
    let searchData = this.state.searchData
    searchData.page = current
    searchData.page_size = pageSize
    this.setState({
      searchData,
    })
    this.setState({
      selectedRowKeys: []
    })
    this.getList()
  }
  onChange = (current, pageSize) => {
    console.log(current, pageSize)
    console.log(this.state.selectedRows)
    let searchData = this.state.searchData
    searchData.page = current
    searchData.page_size = pageSize
    this.setState({
      searchData,
    })
    this.setState({
      selectedRowKeys: []
    })
    this.getList()
  }
  logSmiles = (e) => {
    let searchData = this.state.searchData
    searchData.ligand_data = e
    this.setState(() => ({ searchData: searchData }))
  }
  getDraw = () => {
    this.setState(() => ({ draw: !this.state.draw }))
  }
  getAdvancedOption = () => {
    this.setState(() => ({ getAdvancedOption: !this.state.getAdvancedOption }))
  }
  handleNumberChange = (e) => {
    const number = parseInt(e.target.value || 0, 10)
    if (isNaN(number)) {
      return
    }
    this.triggerChange({ number })
  }

  handleCurrencyChange = (currency) => {
    this.triggerChange({ currency })
  }

  triggerChange = (changedValue) => {
    const { onChange, value } = this.props
    if (onChange) {
      onChange({
        ...value,
        ...changedValue,
      })
    }
  }
  MethodChange = (e) => {
    let searchData = this.state.searchData
    searchData.method = e
    this.setState(() => ({ searchData: searchData }))
  }
  getResolution = (e) => {
    console.log(e)
    let searchData = this.state.searchData
    searchData.resolution = e
    this.setState(() => ({ searchData: searchData }))
  }
  get_mol_weight = (e) => {
    console.log(e)
    let mol_weight = this.state.mol_weight
    mol_weight[0] = e
    this.setState(() => ({ mol_weight: mol_weight }))
  }
  get_mol_weight2 = (e) => {
    console.log(e)
    let mol_weight = this.state.mol_weight
    mol_weight[1] = e
    this.setState(() => ({ mol_weight: mol_weight }))
  }
  get_atom_number = (e) => {
    console.log(e)
    let atom_number = this.state.atom_number
    atom_number[0] = e
    this.setState(() => ({ atom_number: atom_number }))
  }
  get_atom_number2 = (e) => {
    console.log(e)
    let atom_number = this.state.atom_number
    atom_number[1] = e
    this.setState(() => ({ atom_number: atom_number }))
  }
  get_rot_bond_number = (e) => {
    console.log(e)
    let rot_bond_number = this.state.rot_bond_number
    rot_bond_number[0] = e
    this.setState(() => ({ rot_bond_number: rot_bond_number }))
  }
  get_rot_bond_number2 = (e) => {
    console.log(e)
    let rot_bond_number = this.state.rot_bond_number
    rot_bond_number[1] = e
    this.setState(() => ({ rot_bond_number: rot_bond_number }))
  }
  onChangeResolution = () => { }
  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
    }

    this.setState({
      sum: keys.length - 1,
    })

    // 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')
    console.log(keys)
    const nextKeys = keys.concat(id++)
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys,
    })
    this.setState({
      sum: keys.length + 1,
    })
  }
  handleSubmit = (e) => {
    console.log(e)
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      console.log(values)
      const { keys, pdbList, chainList, methodList } =
        values
      console.log('Received values of form: ', values)
      for (let index = 0; index < pdbList.length; index++) {
        var element = pdbList[index]
        if (element == undefined) {
          pdbList[index] = ''
        }
      }
      let newArr = pdbList.filter((i) => i && i.trim())
      for (let index = 0; index < chainList.length; index++) {
        var element = chainList[index]
        if (element == undefined) {
          chainList[index] = ''
        }
      }
      let newArr2 = chainList.filter((i) => i && i.trim())
      for (let index = 0; index < methodList.length; index++) {
        var element = methodList[index]
        if (element == undefined) {
          methodList[index] = ''
        }
      }
      let cutoffList = []
      let cyclesList = []
      let newArr3 = methodList.filter((i) => i && i.trim())
      for (let index = 0; index < cutoffList.length; index++) {
        var element = cutoffList[index]
        if (element == undefined) {
          cutoffList[index] = ''
        }
      }
      let newArr4 = cutoffList.filter((i) => i && i.trim())
      for (let index = 0; index < cyclesList.length; index++) {
        var element = cyclesList[index]
        if (element == undefined) {
          cyclesList[index] = ''
        }
      }
      let newArr5 = cyclesList.filter((i) => i && i.trim())
      console.log(newArr2)
      let superpositionData = this.state.superpositionData
      superpositionData[1].pdbID = newArr[0] === undefined ? '' : newArr[0]
      superpositionData[1].chainID = newArr2[0] === undefined ? '' : newArr2[0]
      superpositionData[1].method = newArr3[0] === undefined ? '' : newArr3[0]
      superpositionData[1].cutoff =
        newArr4[0] === undefined ? '' : parseInt(newArr4[0])
      superpositionData[1].cycles =
        newArr5[0] === undefined ? '' : parseInt(newArr5[0])
      superpositionData[2].pdbID = newArr[1] === undefined ? '' : newArr[1]
      superpositionData[2].chainID = newArr2[1] === undefined ? '' : newArr2[1]
      superpositionData[2].method = newArr3[1] === undefined ? '' : newArr3[1]
        ; (superpositionData[2].cutoff =
          newArr4[1] === undefined ? '' : parseInt(newArr4[1])),
          (superpositionData[2].cycles =
            newArr5[1] === undefined ? '' : parseInt(newArr5[1]))
      this.setState(() => ({ superpositionData: superpositionData }))
      console.log(this.state.superpositionData)
      let listData = this.state.listData
      listData.pdbList = this.state.superpositionData
      let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
      this.setState({ listData })
      this.setState({ pdbLink })
      console.log(this.state.pdbLink)
    })
  }
  remove2 = (e) => {
    console.log(e)

    let AlignLigandsList = this.state.AlignLigandsList
    let ligandListSelect = this.state.ligandListSelect
    ligandListSelect.splice(0, 1)
    AlignLigandsList.forEach((element, index) => {
      if (e == index) {
        element.pdb_name = ''
        element.ligand = ''
      }

    })

    this.setState({ ligandListSelect })
  }

  add2 = () => {
    let ligandListSelect = this.state.ligandListSelect
    ligandListSelect.push({})

    this.setState({ ligandListSelect })
    console.log(this.state.ligandListSelect)

  }
  addOne = (e) => {
    let selectedRows = this.state.selectedRows
    if (this.state.selectedRows.length < 4 && this.state.selectedRows.length > 0) {
      for (let index = 0; index < selectedRows.length; index++) {
        const element = selectedRows[index]
        let value = this.isObjectValueEqual(element, e)
        if (value) {
          message.warning('不能重复添加！')
          return false
        }

      }
    }

    selectedRows.push(e)
    this.setState({ selectedRows })
    if (this.state.selectedRows.length > 3) {
      message.warning('只能选择3条数据！')
      return
    }




    console.log(this.state.selectedRows)
    let newData = ''
    let pdbList = []
    let ligandList = []
    let ligandList2 = []
    let pdbList2 = this.state.pdbList
    selectedRows.forEach((element, index) => {
      newData =
        newData + ' <' + element.pdb_name + ',' + element.ligand + ' >'
      pdbList.push(element.pdb_name)
      ligandList.push({ ligand: element.ligand, pdb_name: element.pdb_name })
      ligandList2.push(element.ligand)
      pdbList2[index].pdbID = element.pdb_name
    })
    let pdbLigandList = Array.from(new Set(pdbList))

    let ligandListData = Array.from(new Set(ligandList2))
    // console.log(pdbLigandList)
    // console.log(ligandListData)
    // console.log(ligandList)

    this.setState({ pdbLigandList })
    this.setState({ ligandList })
    this.setState({ ligandListData })

    this.setState({ pdbList2: pdbList })
    this.setState({ textData: newData })



  }
  preventDefault = (e) => {
    console.log(e)
    // e.preventDefault()
    console.log('Clicked! But prevent default.')
  }
  handleClose = removedTag => {
    console.log(removedTag)
    const ligandList = this.state.ligandList
    ligandList.splice(removedTag, 1)
    console.log(ligandList)
    this.setState({ ligandList })
    const selectedRows = this.state.selectedRows
    selectedRows.splice(removedTag, 1)
    console.log(selectedRows)
    this.setState({ selectedRows })


  }

  render () {
    const columns = [
      {
        title: '',
        dataIndex: '',
        render: (pdb_name, record) => <div className='span-div' onClick={() => this.addOne(record)}>{<Button type="primary" shape="circle" icon="plus" color="blue"></Button>}</div>,
      },
      {
        title: 'PDBID',
        dataIndex: 'pdb_name',
        render: (pdb_name) => <span>{<Tag color="blue">{pdb_name}</Tag>}</span>,
      },
      {
        title: 'Protein',
        dataIndex: 'protein_name',
        width: 400,
        render: (protein_name, record) => (
          <div>
            <div>
              {' '}
              <span style={{ fontWeight: 800 }}>Protein name:</span>{' '}
              {record.protein_name}
            </div>
            <div>
              <span style={{ fontWeight: 800 }}>Uniport id:</span>{' '}
              {record.uniport_id}
            </div>
            <div>
              <span style={{ fontWeight: 800 }}>Uniport name:</span>{' '}
              {record.uniport_name}
            </div>
          </div>
        ),
      },

      {
        title: 'Ligand',
        dataIndex: 'ligand',
        render: (ligand, record) => (
          <span>
            {
              <Tag color="blue" onClick={() => this.popupWindow(record)}>
                {ligand}
              </Tag>
            }
            {
              <Jsme
                height="100px"
                width="100px"
                options="depict,useopenchemlib"
                smiles={record.smile}
              />
            }
          </span>
        ),
      },
      {
        title: 'Affinity (nM)',
        dataIndex: 'Affinity',
        width: 200,
        render: (Affinity, record) => (
          <div>
            <div className={record.bdb_kd == null ? 'isShowDiv' : ''}>
              {' '}
              <span style={{ fontWeight: 800 }}>Kd:</span>{' '}
              {record.bdb_kd}
            </div>
            <div className={record.bdb_ki == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>Ki:</span>{' '}
              {record.bdb_ki}
            </div>
            <div className={record.bdb_es == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>EC50:</span>{' '}
              {record.bdb_es}
            </div>
            <div className={record.bdb_ic == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>IC50:</span>{' '}
              {record.bdb_ic}
            </div>
            <div className={record.bdb_kon == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>Kon:</span>{' '}
              {record.bdb_kon}
            </div>
            <div className={record.bdb_koff == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>Koff:</span>{' '}
              {record.bdb_koff}
            </div>
          </div>
        ),
      },
    ]
    const columns2 = [
      {
        title: '',
        dataIndex: '',
        render: (pdb_name, record) => <div className='span-div' onClick={() => this.addOne(record)}>{<Button type="primary" shape="circle" icon="plus" color="blue"></Button>}</div>,
      },
      {
        title: 'PDBID',
        dataIndex: 'pdb_name',
        width: 100,
        render: (pdb_name) => <span>{<Tag color="blue">{pdb_name}</Tag>}</span>,
      },
      {
        title: 'Protein',
        dataIndex: 'protein_name',
        width: 400,
        render: (protein_name, record) => (
          <div>
            <div>
              {' '}
              <span style={{ fontWeight: 800 }}>Protein name:</span>{' '}
              {record.protein_name}
            </div>
            <div>
              <span style={{ fontWeight: 800 }}>Uniport id:</span>{' '}
              {record.uniport_id}
            </div>
            <div>
              <span style={{ fontWeight: 800 }}>Uniport name:</span>{' '}
              {record.uniport_name}
            </div>
          </div>
        ),
      },
      {
        title: 'Sequence',
        dataIndex: 'similar',
        render: (similar, record) => (
          <div className='Sequence-div'>
            <div>
              similar: {similar}
              {similar != '--' && '%'}
            </div>
            <div>
              identity: {record.identity}
              {similar != '--' && '%'}
            </div>
            <div>
              aligned_pattern:
              <div className='Card-title'> <pre>{record.aligned_pattern}</pre></div>
            </div>
          </div>
        ),
      },
      {
        title: 'Ligand',
        dataIndex: 'ligand',
        width: 100,
        render: (ligand, record) => (
          <span>
            {
              <Tag color="blue" onClick={() => this.popupWindow(record)}>
                {ligand}
              </Tag>
            }
            {
              <Jsme
                height="100px"
                width="100px"
                options="depict,useopenchemlib"
                smiles={record.smile}
              />
            }
          </span>
        ),
      },
      {
        title: 'Affinity (nM)',
        dataIndex: 'Affinity',
        width: 200,
        render: (Affinity, record) => (
          <div>
            <div className={record.bdb_kd == null ? 'isShowDiv' : ''}>
              {' '}
              <span style={{ fontWeight: 800 }}>Kd:</span>{' '}
              {record.bdb_kd}
            </div>
            <div className={record.bdb_ki == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>Ki:</span>{' '}
              {record.bdb_ki}
            </div>
            <div className={record.bdb_es == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>EC50:</span>{' '}
              {record.bdb_es}
            </div>
            <div className={record.bdb_ic == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>IC50:</span>{' '}
              {record.bdb_ic}
            </div>
            <div className={record.bdb_kon == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>Kon:</span>{' '}
              {record.bdb_kon}
            </div>
            <div className={record.bdb_koff == null ? 'isShowDiv' : ''}>
              <span style={{ fontWeight: 800 }}>Koff:</span>{' '}
              {record.bdb_koff}
            </div>
          </div>
        ),
      },
    ]
    const { selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: false,
    }
    const {
      total_num,
      pdbLink,
      pdbLink2,
      draw,
      searchData,
      dataList,
      pdbLigandList,
      DetailsData,
      addList,
      sum,
      visible,
      pdbLinkWindow,
      ligandListSelect,
      SourceList,
      ligandListData,
      AlignLigandsList,
      SelectligandLink,
      getAdvancedOption,
      ligandList,
      selectedRows
    } = this.state

    const plainOptions = [
      { label: 'X-Ray', value: 'X-RAY DIFFRACTION' },
      { label: 'EM', value: 'ELECTRON MICROSCOPY' },
      { label: 'Solution NMR', value: 'SOLUTION NMR' },
    ]
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
    }
    const formItemLayout2 = {
      labelCol: { span: 6 },
    }
    const formItemLayout3 = {
      labelCol: { span: 7 },
      wrapperCol: { span: 11 },
    }

    const buttonItemLayout = {
      wrapperCol: { span: 12, offset: 6 },
    }
    const { getFieldDecorator, getFieldValue } = this.props.form
    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 20, offset: 4 },
      },
    }
    const formItemLayoutWithOutLabel2 = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 20, offset: 4 },
      },
    }
    const formItemLayout4 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    }

    const { size, value } = this.props
    getFieldDecorator('keys', { initialValue: [] })
    const keys = getFieldValue('keys')
    const formItems = keys.map((k, index) => (
      <Form.Item
        {...(index === 0 ? formItemLayout4 : formItemLayoutWithOutLabel2)}
        label={index === 0 ? 'SelectPDB: ' : ''}
        required={false}
        key={k}>
        <div style={{ display: 'flex ', alignItems: 'center ' }}>
          {getFieldDecorator(`pdbList[${k}]`)(
            <Select style={{ width: '100px' }}>
              {pdbLigandList.map((item, index) => {
                return (
                  <Option key={index} value={item.toLowerCase()}>
                    {item.toLowerCase()}
                  </Option>
                )
              })}
            </Select>
          )}
          <div>
            <Form.Item style={{ margin: '0px' }}>
              {getFieldDecorator(`chainList[${k}]`)(
                <Input
                  placeholder="请输入Chain"
                  style={{ width: '100px', marginRight: 8 }}
                />
              )}
            </Form.Item>
          </div>
          <div>
            <Form.Item style={{ margin: '0px' }}>
              {getFieldDecorator(`methodList[${k}]`)(
                <Select style={{ width: '100px' }}>
                  {addList.map((item, index) => {
                    return (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    )
                  })}
                </Select>
              )}

              <Tooltip
                placement="topLeft"
                title="Align是基于氨基酸序列的对齐；Super是基于蛋白结构的对齐"
                arrowPointAtCenter>
                <Icon
                  className="dynamic-delete-button"
                  type="info-circle"
                  style={{ marginLeft: '1px' }}
                />
              </Tooltip>
            </Form.Item>
          </div>
          <div></div>
          <div>
            <Form.Item style={{ margin: '0px' }}>
              {keys.length > 1 ? (
                <Icon
                  className="dynamic-delete-button"
                  type="minus-circle-o"
                  onClick={() => this.remove(k)}
                  style={{ marginLeft: '10px' }}
                />
              ) : null}
            </Form.Item>
          </div>
        </div>
      </Form.Item>
    ))

    return (
      <div className="padSmallSearch-div">
        <Modal
          footer={null}
          closable={false}
          width={550}
          visible={visible}
          wrapClassName="vertical-center-modal"
          onCancel={() => this.setState({ visible: false })}>
          <div className="Molstar-div">
            <iframe
              src={pdbLinkWindow}
              height={'600px'}
              width={'100%'}
              name="iframe-video"
            />
          </div>
        </Modal>
        <LogoTitlte></LogoTitlte>

        <div className="top-div">
          <div className="title-top">Protein-Ligand Data Mining</div>
          <div className="tips-div">
            Protein-Ligand Data Mining (PLDM) is a platform for mining all the
            proteins-ligand complexes structures. In this platform, you can
            search using either small molecule sub/structure or protein
            information such as name and uniport ID to exploit detailed
            protein-ligand interaction quickly for any crystal structures you
            are interested in. The easy access to the bioactive conformations of
            the small molecules will greatly facilitate scaffold hopping
            activities.
            <br></br>
            <br></br>
            Tips: After one or more target PDBs are selected, you can click "Add
            selection" button to put the structures into the PDB presentation
            window for viewing and aligning. The "Align by structure" button
            allows you to align the PDBs in the window with the entire
            structures. And the other button, "Align by ligand", allows you to
            align the PDBs with only the ligands you choose. After the
            alignment, you can download the pdb files for local working as well.
          </div>
        </div>
        <Spin tip="Loading..." size="large" spinning={this.state.loading}>
          <div className="form-div">
            <div className="form-div2">
              <Form layout="horizontal">
                <Form.Item label="PDBID" {...formItemLayout}>
                  <Input
                    placeholder=""
                    onChange={this.getValue}
                    value={this.state.searchData.pdb_id}
                  />
                </Form.Item>
                <Form.Item label="Protein" {...formItemLayout}>
                  <Input
                    placeholder=""
                    onChange={this.getProtein}
                    value={this.state.searchData.protein_data}
                  />
                </Form.Item>
                <Form.Item label="Sequence" {...formItemLayout}>
                  <Input
                    type="text"
                    size={size}
                    onChange={this.getsequence}
                    value={this.state.searchData.sequence}
                    style={{ width: '65%', marginRight: '3%' }}
                  />
                  <Select
                    size={size}
                    style={{ width: '32%' }}
                    value={this.state.searchData.percent}
                    onChange={this.getpercent}>
                    <Option value="90%">90%</Option>
                    <Option value="80%">80%</Option>
                    <Option value="70%">70%</Option>
                    <Option value="60%">60%</Option>
                    <Option value="50%">50%</Option>
                  </Select>
                </Form.Item>
                <Form.Item label="Ligand" {...formItemLayout}>
                  <Input
                    placeholder=""
                    onChange={this.getLigand}
                    value={this.state.searchData.ligand_data}
                  />
                  <div style={{ display: 'flex' }}>
                    <Button
                      type="primary"
                      style={{
                        marginRight: '10px',
                        color: '#1890ff',
                        background: '#e6f7ff',
                        borderColor: '#91d5ff',
                      }}
                      onClick={this.getDraw}>
                      画结构
                    </Button>
                    <Button
                      type="link"
                      onClick={this.getAdvancedOption}>
                      Advanced Option
                    </Button>

                  </div>
                  <div
                    className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
                  >
                    <Radio.Group
                      onChange={this.onChangeRadio3}
                      value={this.state.searchData.finger}>
                      <Radio value={0}>Substructure</Radio>
                      <Radio value={1}>Similar Structure</Radio>
                    </Radio.Group>
                  </div>
                  <div
                    className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
                    onClick={this.getJsme}>
                    <Jsme
                      height="300px"
                      width="500px"
                      options="oldlook,star"
                      onChange={this.logSmiles}
                    />
                  </div>
                </Form.Item>
                <Divider className={getAdvancedOption ? '' : 'isShowDiv'} />
                <Form.Item className={getAdvancedOption ? '' : 'isShowDiv'} label="PDB option" {...formItemLayout2}>
                  <div className="Ligand-option" style={{ width: '800px' }}>
                    <div className="Method-div">
                      <span className="teshu-title">Method：</span>{' '}
                      <Checkbox.Group
                        options={plainOptions}
                        defaultValue={this.state.searchData.method}
                        onChange={this.MethodChange}
                      />
                    </div>
                    <div className="Resolution-div">
                      <div style={{ width: '30%' }}>
                        <span className="teshu-title">
                          Resolution no more than：
                        </span>{' '}
                      </div>
                      <div style={{ width: '50%' }}>
                        <InputNumber
                          min={0}
                          max={10}
                          step={0.5}
                          onChange={this.getResolution}
                        />
                      </div>
                    </div>
                  </div>
                </Form.Item>

                <Form.Item
                  className={getAdvancedOption ? '' : 'isShowDiv'}
                  label="Ligand option"
                  style={{ marginBottom: '0px' }}
                  {...formItemLayout3}>
                  <div className="Ligand-option" style={{ width: '800px' }}>
                    <div className="Resolution-div">
                      <div>
                        <span className="teshu-title">Molecule Weight：</span>{' '}
                      </div>
                      <div>
                        <InputNumber
                          min={0}
                          max={10000}
                          step={0.5}
                          onChange={this.get_mol_weight}
                        />{' '}
                        <span
                          style={{
                            display: 'inline-block',
                            width: '10px',
                            textAlign: 'center',
                          }}>
                          -
                        </span>
                        <InputNumber
                          min={0}
                          max={10000}
                          step={0.5}
                          onChange={this.get_mol_weight2}
                        />
                      </div>
                    </div>
                    <div className="Resolution-div">
                      <div>
                        <span className="teshu-title">Heavy Atom Number：</span>{' '}
                      </div>
                      <div>
                        <InputNumber
                          min={0}
                          max={100}
                          step={0.5}
                          onChange={this.get_atom_number}
                        />{' '}
                        <span
                          style={{
                            display: 'inline-block',
                            width: '10px',
                            textAlign: 'center',
                          }}>
                          -
                        </span>
                        <InputNumber
                          min={0}
                          max={100}
                          step={0.5}
                          onChange={this.get_atom_number2}
                        />
                      </div>
                    </div>
                    <div className="Resolution-div">
                      <div>
                        <span className="teshu-title">
                          Rotatable Bond Number：
                        </span>{' '}
                      </div>
                      <div>
                        <InputNumber
                          min={0}
                          max={100}
                          step={0.5}
                          onChange={this.get_rot_bond_number}
                        />{' '}
                        <span
                          style={{
                            display: 'inline-block',
                            width: '10px',
                            textAlign: 'center',
                          }}>
                          -
                        </span>
                        <InputNumber
                          min={0}
                          max={100}
                          step={0.5}
                          onChange={this.get_rot_bond_number2}
                        />
                      </div>
                    </div>
                  </div>
                </Form.Item>

                <Form.Item {...buttonItemLayout}>
                  {/* <Button type="primary" onClick={this.getList} className={draw ? '' : ' isShowDiv'}>
                    Search
                  </Button> */}
                  <Button type="primary" onClick={this.getList}>
                    Search
                  </Button>

                </Form.Item>
              </Form>
            </div>
          </div>
          {this.state.ListState && (
            <div className="List-center-div">
              <div className="list-div">
                <Table

                  pagination={false}
                  bordered
                  rowKey="item"
                  columns={this.state.sequenceStste ? columns2 : columns}
                  dataSource={dataList}
                />
                <div className="PaginationListDiv">
                  <Pagination
                    showSizeChanger
                    onShowSizeChange={this.onShowSizeChange}
                    onChange={this.onChange}
                    total={total_num}
                  />
                </div>
              </div>
              <div className="add-div">
                <div className="text-div">
                  {ligandList.map((item, index) => {
                    return (
                      <Tag
                        key={index}
                        closable onClose={e => {
                          e.preventDefault()
                          this.handleClose(index)
                        }}
                      >
                        {item.pdb_name}
                        ｜
                        {item.ligand}
                      </Tag>
                    )
                  })}
                </div>

                <Button
                  type="primary"
                  style={{ marginLeft: '10px' }}
                  onClick={this.addSlection}
                  disabled={!selectedRows.length > 0}>
                  Add selection{' '}
                </Button>
              </div>
            </div>
          )}
        </Spin>

        {this.state.pdbdivState && (<div className="pdb-div">
          <div className="left-pdb-div">
            <iframe
              src={pdbLink}
              height={'600px'}
              width={'100%'}
              name="iframe-video"
            />
            <div className="add-form">
              <div className="form-div2">
                <Form onSubmit={this.handleSubmit} className="login-form">
                  <Form.Item label="Ref.PDB" {...formItemLayout4}>
                    <div>
                      <Select
                        style={{ width: '100px' }}
                        value={this.state.superpositionData[0].pdbID}
                        onChange={this.SelectValue}>
                        {pdbLigandList.map((item, index) => {
                          return (
                            <Option key={item} value={item.toLowerCase()}>
                              {item.toLowerCase()}
                            </Option>
                          )
                        })}
                      </Select>
                      <Input
                        placeholder="请输入Chain"
                        onChange={this.getValueChain}
                        value={this.state.superpositionData[0].chainID}
                        style={{
                          width: '100px',
                        }}
                      />
                    </div>
                  </Form.Item>
                  {formItems}
                  <Form.Item {...formItemLayoutWithOutLabel}>
                    {sum < 2 && (
                      <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 Structures
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </div>
          {/* <div className="center-pdb-div">
            <Button
              type="primary"
              style={{ marginBottom: '10px' }}
              onClick={this.alignStructre}>
              Align by structre{' '}
            </Button>
            <Button type="primary" onClick={this.alignLigand}>
              Align by ligand{' '}
            </Button>
          </div> */}
          <div className="right-pdb-div">
            <iframe
              src={SelectligandLink}
              height={'600px'}
              width={'100%'}
              name="iframe-video"
            />
            <div className="add-form">
              <div className="form-div2">
                <Form onSubmit={this.handleSubmit2} className="login-form">
                  {/* <Form.Item label="Select ligand" {...formItemLayout4}>
                    <div>
                      <Select
                        style={{ width: '100px' }}
                        placeholder="Source"
                        value={this.state.AlignLigandsList[0].pdb_name}
                        onChange={this.SelectValueSource}>
                        {SourceList.map((item, index) => {
                          return (
                            <Option
                              key={index.pdb}
                              value={item.toLowerCase()}>
                              {item.toLowerCase()}
                            </Option>
                          )
                        })}
                      </Select>
                      <Select
                        placeholder="Compound ID"
                        style={{ width: '100px' }}
                        value={this.state.AlignLigandsList[0].ligand}
                        onChange={this.SelectValueCompound}>
                        {ligandListData.map((item, index) => {
                          return (
                            <Option
                              key={index.pdb}
                              value={item.toLowerCase()}>
                              {item.toLowerCase()}
                            </Option>
                          )
                        })}
                      </Select>
                    </div>
                  </Form.Item> */}
                  {/* {
                    AlignLigandsList.map((item, index) => {
                      return (
                        <Form.Item label="Select ligand" {...formItemLayout4}>
                          <div>
                            <Select
                              style={{ width: '100px' }}
                              placeholder="Source"
                              // value={this.state.AlignLigandsList[index + 1].pdb_name}
                              onChange={(e, a, index) => this.SelectValueSource2(e, a, index)}
                            >
                              {SourceList.map((item, index) => {
                                return (
                                  <Option
                                    key={index.pdb}
                                    value={item.toLowerCase()}>
                                    {item.toLowerCase()}
                                  </Option>
                                )
                              })}
                            </Select>
                            <Select
                              placeholder="Compound ID"
                              style={{ width: '100px' }}
                              // value={this.state.AlignLigandsList[index + 1].ligand}
                              onChange={() => this.SelectValueCompound2(index)}
                            >
                              {ligandListData.map((item, index) => {
                                return (
                                  <Option
                                    key={index.pdb}
                                    value={item.toLowerCase()}>
                                    {item.toLowerCase()}
                                  </Option>
                                )
                              })}
                            </Select>
                            {
                              index != 0 && (<Icon
                                className="dynamic-delete-button"
                                type="minus-circle-o"
                                onClick={() => this.remove2(index)}
                              />)
                            }

                          </div>
                        </Form.Item>
                      )
                    })
                  } */}

                  <Form.Item label="Select ligand" {...formItemLayout4}>
                    <div>
                      <Select
                        style={{ width: '100px' }}
                        placeholder="Source"
                        value={this.state.AlignLigandsList[0].pdb_name}
                        onChange={(e) => this.SelectValueSource(e)}
                      >
                        {SourceList.map((item, index) => {
                          return (
                            <Option
                              key={index.pdb}
                              value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                      <Select
                        placeholder="Compound ID"
                        style={{ width: '100px' }}
                        value={this.state.AlignLigandsList[0].ligand}
                        onChange={(e) => this.SelectValueCompound(e)}
                      >
                        {ligandListData.map((item, index) => {
                          return (
                            <Option
                              key={index.pdb}
                              value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                      {/* {
                        index != 0 && (<Icon
                          className="dynamic-delete-button"
                          type="minus-circle-o"
                          onClick={() => this.remove2(index)}
                        />)
                      } */}

                    </div>
                  </Form.Item>
                  {ligandListSelect.length > 1 && (<Form.Item label="Select ligand" {...formItemLayout4}>
                    <div>
                      <Select
                        style={{ width: '100px' }}
                        placeholder="Source"
                        value={this.state.AlignLigandsList[1].pdb_name}
                        onChange={(e) => this.SelectValueSource2(e)}
                      >
                        {SourceList.map((item, index) => {
                          return (
                            <Option
                              key={index.pdb}
                              value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                      <Select
                        placeholder="Compound ID"
                        style={{ width: '100px' }}
                        value={this.state.AlignLigandsList[1].ligand}
                        onChange={(e) => this.SelectValueCompound2(e)}
                      >
                        {ligandListData.map((item, index) => {
                          return (
                            <Option
                              key={index.pdb}
                              value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                      <Icon
                        className="dynamic-delete-button"
                        type="minus-circle-o"
                        onClick={() => this.remove2(1)}
                      />

                    </div>
                  </Form.Item>)}

                  {ligandListSelect.length > 2 && (
                    <Form.Item label="Select ligand" {...formItemLayout4}>
                      <div>
                        <Select
                          style={{ width: '100px' }}
                          placeholder="Source"
                          value={this.state.AlignLigandsList[2].pdb_name}
                          onChange={(e) => this.SelectValueSource3(e)}
                        >
                          {SourceList.map((item, index) => {
                            return (
                              <Option
                                key={index.pdb}
                                value={item}>
                                {item}
                              </Option>
                            )
                          })}
                        </Select>
                        <Select
                          placeholder="Compound ID"
                          style={{ width: '100px' }}
                          value={this.state.AlignLigandsList[2].ligand}
                          onChange={(e) => this.SelectValueCompound3(e)}
                        >
                          {ligandListData.map((item, index) => {
                            return (
                              <Option
                                key={index.pdb}
                                value={item}>
                                {item}
                              </Option>
                            )
                          })}
                        </Select>

                        <Icon
                          className="dynamic-delete-button"
                          type="minus-circle-o"
                          onClick={() => this.remove2(2)}
                        />


                      </div>
                    </Form.Item>
                  )}


                  <Form.Item {...formItemLayoutWithOutLabel}>
                    {ligandListSelect.length < 3 && (
                      <Button
                        type="dashed"
                        onClick={this.add2}
                        style={{ width: '60%' }}>
                        <Icon type="plus" /> Add field
                      </Button>
                    )}
                  </Form.Item>
                  <Form.Item {...formItemLayoutWithOutLabel}>
                    <Button type="primary" onClick={() => this.handleSubmit2()}>
                      Show selected ligand
                    </Button>
                    <br></br>
                    <Button type="primary" onClick={() => this.handleSubmit3()}>
                      Align Ligands
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </div>
        </div>

        )}


      </div>
    )
  }
}
