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>
    );
  }
}
