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

    targetsDetail: {
      Structure: [],
      Sequence: [],
      MutationList: [],
      Bioassay: [],
      DrugsInformation: [],
      Gene_name: [],
    },
    loading: true,
    getStructureList: {
      ligand_up_list: [],
      ligand_list: [],
      chain: [],
      References: [],
    },
    listData: {
      pdb_code: '',
      ligand: '',
      resolution: 0,
    },
    fileData: {
      filestring: '',
      type: 'pdb',
    },
    SequenceAlignment: {
      reference: '',
      aligns: '',
    },
    SequenceAlignmentList: [],
    MutationSearch: {
      page: 1,
      page_size: 10,
      dataid: qs.parse(this.props.location.search.slice(1)).dataid,
      status: 0,
      desc: 1,
    },
    BioassaySearch: {
      page: 1,
      page_size: 10,
      dataid: qs.parse(this.props.location.search.slice(1)).dataid,
      drugs_data: '',
      finger: 0,
    },
    DrugClinicalImformationSearch: {
      page: 1,
      page_size: 10,
      dataid: qs.parse(this.props.location.search.slice(1)).dataid,
    },
    VirantsDiseaseListSearch: {
      page: 1,
      page_size: 10,
      dataid: qs.parse(this.props.location.search.slice(1)).dataid,
    },
    VirantsDiseaseList: [],
    total_num: 0,
    total_num2: 0,
    total_num3: 0,
    total_num4: 0,
    total_num5: 0,
    pdbLink: '',
    pdbLink2: '',
    addList: ['super', 'align'],
    sum: 0,
    superpositionData: [
      {
        chainID: '',
        pdbID: '',
      },
      {
        chainID: '',
        pdbID: '',
        method: '',
        cutoff: 0,
        cycles: 0,
      },
      {
        chainID: '',
        pdbID: '',
        method: '',
        cutoff: 0,
        cycles: 0,
      },
    ],
    aciveKey: '',
    directoryState: false,
    visible3: false,
  };
  componentDidMount() {
    this.getDetails();
  }
  getDetails() {
    // this.setState({loading:true})
    this.setState({ loading: true });
    request
      .post('kinase/target_detail', qs.parse(this.props.location.search.slice(1)))
      .then((res) => {
        this.setState({ loading: false });
        if (res.data.code === 200) {
          console.log(res);

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

          this.setState({ loading: false });
          let StructureList = res.data.data.Structure;
          if (StructureList.length > 0) {
            this.getStructure(StructureList[0].pdb);
            this.setState({
              aciveKey: StructureList[0].pdb,
            });
          }
          this.DrugClinicalImformationList();
          // this.getMutationList()
          this.getBioassayList();
          this.getVirantsDiseaseList();
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  }
  getMutationList = () => {
    console.log(this.state.dataOne);
    const { dataid } = this.state.dataOne;
    this.setState({ loading: true });
    request
      .post('kinase/target_detail/mutation', this.state.MutationSearch)
      .then((res) => {
        this.setState({ loading: false });
        if (res) {
          let targetsDetail = this.state.targetsDetail;
          targetsDetail.MutationList = res.data.data;
          this.setState({ total_num: res.data.total_num });
          this.setState({
            targetsDetail,
          });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  onChangeTable = (pagination, filters, sorter, extra) => {
    // console.log('params', pagination, filters, sorter, extra)
    console.log(sorter);
    if (sorter.order === 'ascend') {
      let MutationSearch = this.state.MutationSearch;
      MutationSearch.desc = 1;
      this.setState(() => ({ MutationSearch: MutationSearch }));
      this.getMutationList();
    }
    if (sorter.order === 'descend') {
      let MutationSearch = this.state.MutationSearch;
      MutationSearch.desc = 2;
      this.setState(() => ({ MutationSearch: MutationSearch }));
      this.getMutationList();
    }
  };
  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
    let MutationSearch = this.state.MutationSearch;
    MutationSearch.page = current;
    MutationSearch.page_size = pageSize;
    this.setState({
      MutationSearch,
    });
    this.getMutationList();
  };
  onChange = (current, pageSize) => {
    console.log(current, pageSize);
    let MutationSearch = this.state.MutationSearch;
    MutationSearch.page = current;
    MutationSearch.page_size = pageSize;
    this.setState({
      MutationSearch,
    });
    this.getMutationList();
  };
  getBioassayList = () => {
    console.log(this.state.dataOne);
    const { dataid } = this.state.dataOne;
    this.setState({ loading: true });
    request
      .post('kinase/target_detail/bioassay', this.state.BioassaySearch)
      .then((res) => {
        this.setState({ loading: false });
        if (res) {
          console.log(res);
          let targetsDetail = this.state.targetsDetail;
          targetsDetail.Bioassay = res.data.data;
          this.setState({ total_num2: res.data.total_num });
          this.setState({
            targetsDetail: targetsDetail,
          });
          this.setState({ visible3: false });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  getVirantsDiseaseList = () => {
    console.log(this.state.dataOne);
    this.setState({ loading: true });
    console.log(this.state.VirantsDiseaseListSearch);
    request
      .post('kinase/target_detail/virants_disease', this.state.VirantsDiseaseListSearch)
      .then((res) => {
        this.setState({ loading: false });
        if (res) {
          console.log(res);
          // let DetailsData = this.state.DetailsData
          // DetailsData.Target = res.data.data
          this.setState({ total_num5: res.data.total_num });
          this.setState({
            VirantsDiseaseList: res.data.data,
          });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  onShowSizeChange5 = (current, pageSize) => {
    console.log(current, pageSize);
    let VirantsDiseaseListSearch = this.state.VirantsDiseaseListSearch;
    VirantsDiseaseListSearch.page = current;
    VirantsDiseaseListSearch.page_size = pageSize;
    this.setState({
      VirantsDiseaseListSearch,
    });
    this.getVirantsDiseaseList();
  };
  onChange5 = (current, pageSize) => {
    console.log(current, pageSize);
    let VirantsDiseaseListSearch = this.state.VirantsDiseaseListSearch;
    VirantsDiseaseListSearch.page = current;
    VirantsDiseaseListSearch.page_size = pageSize;
    this.setState({
      VirantsDiseaseListSearch,
    });
    this.getVirantsDiseaseList();
  };
  onShowSizeChange2 = (current, pageSize) => {
    let BioassaySearch = this.state.BioassaySearch;
    BioassaySearch.page = current;
    BioassaySearch.page_size = pageSize;
    this.setState({
      BioassaySearch,
    });
    this.getBioassayList();
  };
  onChange2 = (current, pageSize) => {
    let BioassaySearch = this.state.BioassaySearch;
    BioassaySearch.page = current;
    BioassaySearch.page_size = pageSize;
    this.setState({
      BioassaySearch,
    });

    this.getBioassayList();
  };
  DrugClinicalImformationList = () => {
    console.log(this.state.dataOne);
    const { dataid } = this.state.dataOne;
    this.setState({ loading: true });
    request
      .post('kinase/target_detail/drug_information', this.state.DrugClinicalImformationSearch)
      .then((res) => {
        this.setState({ loading: false });
        if (res) {
          console.log(res);
          let targetsDetail = this.state.targetsDetail;
          targetsDetail.DrugsInformation = res.data.data;
          this.setState({ total_num3: res.data.total_num });
          this.setState({
            targetsDetail: targetsDetail,
          });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  onShowSizeChange3 = (current, pageSize) => {
    let DrugClinicalImformationSearch = this.state.DrugClinicalImformationSearch;
    DrugClinicalImformationSearch.page = current;
    DrugClinicalImformationSearch.page_size = pageSize;
    this.setState({
      DrugClinicalImformationSearch,
    });
    this.DrugClinicalImformationList();
  };
  onChange3 = (current, pageSize) => {
    let DrugClinicalImformationSearch = this.state.DrugClinicalImformationSearch;
    DrugClinicalImformationSearch.page = current;
    DrugClinicalImformationSearch.page_size = pageSize;
    this.setState({
      DrugClinicalImformationSearch,
    });

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

  callback() {}
  childTargetClassChange = () => {};
  getStructure = (e) => {
    request
      .post(
        '/search_pdb_data',
        qs.stringify({
          pdb: e,
        })
      )
      .then((res) => {
        this.setState({ loading: false });
        if (res.data.code === 200) {
          this.setState({ getStructureList: res.data.data });
          let listData = this.state.listData;
          listData.pdb_code = res.data.data.name;
          listData.ligand = '';
          listData.resolution = 0;
          this.setState({ listData });

          let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
          this.setState({
            pdbLink,
          });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  ChangeTabs = (e) => {
    this.setState({
      aciveKey: e,
    });
    this.setState({
      pdbLink: '',
    });
    let listData = this.state.listData;
    listData.ligand = '';
    listData.resolution = 0;
    if (listData.pdbList) {
      delete listData.pdbList;
    }
    this.setState({
      listData: listData,
      pdbLink: '',
    });
    this.getStructure(e);
  };
  getList = () => {
    console.log('getList');
    if (this.state.listData.ligand === '') {
      message.warning('输入查询条件');
      return;
    }
    JSON.stringify(this.state.listData);
    let listData = this.state.listData;
    listData.pdbList = this.state.pdbList;
    let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
    this.setState({
      pdbLink,
    });
  };

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

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

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

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

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

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

      this.sequenceAlign();
    });
  };
  getSequence = (e) => {
    const { value } = e.target;
    let SequenceAlignment = this.state.SequenceAlignment;
    SequenceAlignment.reference = value;
    this.setState(() => ({ SequenceAlignment: SequenceAlignment }));
  };
  handleAnchorClick = (e) => {
    e.preventDefault();
  };
  getValue = (e) => {
    const { value } = e.target;
    let superpositionData = this.state.superpositionData;
    superpositionData[0].chainID = value;
    this.setState(() => ({ superpositionData: superpositionData }));
  };
  SelectValue = (e) => {
    console.log(e);
    let superpositionData = this.state.superpositionData;
    superpositionData[0].pdbID = e;
    this.setState(() => ({ superpositionData: superpositionData }));
  };
  onChangeGroup = (e) => {
    console.log(e);
    this.setState({
      pdbList: e,
    });
  };
  remove2 = (k) => {
    const { form } = this.props;
    // can use data-binding to get
    const keys2 = form.getFieldValue('keys');
    // We need at least one passenger
    if (keys2.length === 1) {
      return;
    }

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

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

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

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

      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 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);
    });
  };
  alignmentEve = () => {
    this.setState({ visible2: true });
    this.props.form.resetFields();
  };
  onCancelForm = () => {
    this.setState({ visible2: false });
    this.props.form.resetFields();
  };
  logSmiles2 = (e) => {
    let BioassaySearch = this.state.BioassaySearch;
    BioassaySearch.drugs_data = e;
    this.setState(() => ({ BioassaySearch: BioassaySearch }));
    // this.setState(()=>({data:e }))
  };
  getLigendValue = (e) => {
    const { value } = e.target;
    let BioassaySearch = this.state.BioassaySearch;
    BioassaySearch.drugs_data = value;
    this.setState(() => ({ BioassaySearch: BioassaySearch }));
  };
  onChangeRadio4 = (e) => {
    let value = e.target.value;
    let BioassaySearch = this.state.BioassaySearch;
    BioassaySearch.finger = value;
    this.setState({
      BioassaySearch: BioassaySearch,
    });
  };

  render() {
    const {
      visible,
      visible2,
      SequenceAlignmentList,
      OLDMutationList,
      targetsDetail,
      getStructureList,
      total_num,
      total_num2,
      total_num3,
      total_num5,
      VirantsDiseaseList,
      sum,
      addList,
      directoryState,
      visible3,
    } = this.state;
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const columnsVirantsDisease = [
      {
        title: 'Consequence Type',
        dataIndex: 'Consequence Type',
        key: 'Consequence Type',
      },
      {
        title: 'Gene Position',
        dataIndex: 'Gene Position',
        key: 'Gene Position',
      },
      {
        title: 'Protein Position',
        dataIndex: 'Protein Position',
        key: 'Protein Position',
      },
    ];
    const expandedRowRender = (e) => {
      console.log(e);
      const { Conditions } = e;
      const columns = [
        {
          title: 'indication',
          dataIndex: 'indication',
          key: 'indication',
        },
        {
          title: 'phase',
          dataIndex: 'phase',
          key: 'phase',
        },
        {
          title: 'purpose',
          dataIndex: 'purpose',
          key: 'purpose',
        },
        {
          title: 'status',
          dataIndex: 'status',
          key: 'status',
        },
        {
          title: 'reference',
          dataIndex: 'reference',
          key: 'reference',
          render: (reference) => (
            <span>
              {
                <Tag
                  color='blue'
                  onClick={() => {
                    this.getReferences2(reference);
                  }}
                >
                  <a href={reference} />
                  {reference}
                </Tag>
              }
            </span>
          ),
        },
      ];
      return <Table columns={columns} rowKey='item' dataSource={Conditions} pagination={false} />;
    };
    const expandedRowRender2 = (e) => {
      console.log(e);
      const { Association } = e;
      const columnsAssociation = [
        {
          title: 'Disease',
          dataIndex: 'Disease',
          key: 'Disease',
        },

        {
          title: 'Reference',
          dataIndex: 'Reference',
          render: (Reference) => (
            <span>
              {Reference != 'Null' &&
                Reference.map((item, index) => {
                  return (
                    <Tag
                      color='blue'
                      key={index}
                      onClick={() => {
                        this.getReferences2(item.url);
                      }}
                    >
                      {item.name.toUpperCase()}
                    </Tag>
                  );
                })}
            </span>
          ),
        },
      ];
      return <Table columns={columnsAssociation} rowKey='item' dataSource={Association} pagination={false} />;
    };

    const getFieldDecorator2 = this.props.form.getFieldDecorator;
    const getFieldValue2 = this.props.form.getFieldValue;
    const columns2 = [
      {
        title: 'name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'identity',
        dataIndex: 'identity',
        key: 'identity',
        render: (item, record) => <div>{item && item + '%'}</div>,
      },
      {
        title: 'similarity',
        dataIndex: 'similarity',
        key: 'similarity',
        render: (item, record) => <div>{item && item + '%'}</div>,
      },
      {
        title: 'sequence',
        dataIndex: 'sequence',
        key: 'sequence',
        render: (item, record) => (
          <div className='table-sequence-div'>
            {item.split('').map((item2, index) => {
              return <div key={index}>{item2}</div>;
            })}
          </div>
        ),
      },
    ];
    const formItemLayout2 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 20, offset: 4 },
      },
    };
    const columnsDrug = [
      {
        title: 'Drug Structure',
        dataIndex: 'Drug structure',
        key: 'Drug structure',
        render: (DrugStructure) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={DrugStructure} />,
      },

      {
        title: 'Drug name',
        dataIndex: 'Drug name',
        key: 'Drug name',
        render: (item, record) => (
          <Button type='primary' onClick={() => this.getDrug(record.dataid)}>
            {item}
          </Button>
        ),
      },
      {
        title: 'DrugbankId',
        dataIndex: 'DrugbankId',
        key: 'DrugbankId',
      },
      {
        title: 'Drug Type',
        dataIndex: 'Drug Type',
        key: 'Drug Type',
      },

      {
        title: 'Mechanism of Action',
        dataIndex: 'Mechanism of Action',
        key: 'Mechanism of Action',
        render: (Mechanism) => (
          <span>
            {Mechanism.map((item, index) => {
              return (
                <span key={index}>
                  {' '}
                  {item}
                  {index > 0 && <span> ,</span>}
                </span>
              );
            })}
          </span>
        ),
      },
    ];
    const columnsBioassay = [
      {
        title: 'Structure',
        dataIndex: 'structure',
        key: 'structure',
        render: (structure) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={structure} />,
      },
      {
        title: 'Standard Type',
        dataIndex: 'Standard Type',
        key: 'Standard Type',
      },
      {
        title: 'Standard Relation',
        dataIndex: 'Standard Relation',
        key: 'Standard Relation',
      },
      {
        title: 'Standard Value',
        dataIndex: 'Standard Value',
        key: 'Standard Value',
      },
      {
        title: 'Standard Units',
        dataIndex: 'Standard Units',
        key: 'Standard Units',
      },
      {
        title: ' Compound Name',
        dataIndex: 'compound_name',
        key: 'compound_name',
      },

      {
        title: 'reference',
        dataIndex: 'reference',
        key: 'reference',
        render: (reference) => (
          <span>
            {
              <Tag
                color='blue'
                onClick={() => {
                  this.getReferences2(reference);
                }}
              >
                {reference}
              </Tag>
            }
          </span>
        ),
      },
    ];
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    };

    const columnsMutation = [
      {
        title: 'Generic number',
        dataIndex: 'Generic',
        key: 'Generic',
      },
      {
        title: 'Position',
        dataIndex: 'Position',
        key: 'Position',
      },
      {
        title: 'Segment',
        dataIndex: 'Segment',
        key: 'Segment',
      },
      {
        title: 'Mutation',
        dataIndex: 'Mutation',
        key: 'Mutation',
      },
      {
        title: 'Ligand',
        dataIndex: 'Ligand',
        key: 'Ligand',
        render: (Ligand, record) => (
          <Popover
            content={
              <div>
                <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={Ligand.smile} />
              </div>
            }
          >
            {Ligand.name != '' && <Button type='primary'>{Ligand.name}</Button>}
          </Popover>
        ),
      },
      {
        title: 'Activity type',
        dataIndex: 'Activity type',
        key: 'Activity type',
      },
      {
        title: 'Activity value',
        dataIndex: 'Activity value',
        key: 'Activity value',
      },
      {
        title: 'units',
        dataIndex: 'units',
        key: 'units',
      },

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

      {
        title: 'code',
        dataIndex: 'code',
        key: 'code',
      },
      {
        title: 'code_type',
        dataIndex: 'code_type',
        key: 'code_type',
      },
      {
        title: 'res_start',
        dataIndex: 'res_start',
        key: 'res_start',
      },
      {
        title: 'res_end',
        dataIndex: 'res_end',
        key: 'res_end',
      },
    ];
    const formTailLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12, offset: 8 },
    };
    getFieldDecorator('keys', { initialValue: [] });
    getFieldDecorator2('keys2', { initialValue2: [] });
    const keys = getFieldValue('keys');
    const keys2 = getFieldValue2('keys');
    const formItems = keys.map((k, index) => (
      <Form.Item {...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)} label={index === 0 ? 'AlignSequence: ' : ''} required={false} key={k}>
        {getFieldDecorator(`names[${k}]`)(<Input placeholder='Please input uniprot name' style={{ width: '60%', marginRight: 8 }} />)}
        {keys.length > 1 ? <Icon className='dynamic-delete-button' type='minus-circle-o' onClick={() => this.remove(k)} /> : null}
      </Form.Item>
    ));
    const formItems2 = keys2.map((k, index) => (
      <Form.Item {...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)} label={index === 0 ? 'SelectPDB: ' : ''} required={false} key={k}>
        <div style={{ display: 'flex ', alignItems: 'center ' }}>
          {getFieldDecorator2(`pdbList[${k}]`)(
            <Select style={{ width: '70px' }}>
              {targetsDetail.Structure.map((item, index) => {
                return (
                  <Option key={index.pdb} value={item.pdb.toLowerCase()}>
                    {item.pdb && item.pdb.toLowerCase()}
                  </Option>
                );
              })}
            </Select>
          )}
          <div>
            <Form.Item style={{ margin: '0px' }}>{getFieldDecorator2(`chainList[${k}]`)(<Input placeholder='请输入Chain' style={{ width: '100px' }} />)}</Form.Item>
          </div>
          <div>
            <Form.Item style={{ margin: '0px' }}>
              {getFieldDecorator2(`methodList[${k}]`)(
                <Select style={{ width: '70px' }}>
                  {addList.map((item, index) => {
                    return (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </Form.Item>
          </div>
          <div>
            <Form.Item style={{ margin: '0px' }}>{getFieldDecorator2(`cutoffList[${k}]`)(<Input placeholder='Cutoff' style={{ width: '70px' }} />)}</Form.Item>
          </div>
          <div>
            <Form.Item style={{ margin: '0px' }}>
              {getFieldDecorator2(`cyclesList[${k}]`)(<Input placeholder='Cycles' style={{ width: '70px', marginRight: 8 }} />)}
              {keys2.length > 1 ? <Icon className='dynamic-delete-button' type='minus-circle-o' onClick={() => this.remove2(k)} /> : null}
            </Form.Item>
          </div>
        </div>
      </Form.Item>
    ));

    return (
      <div className='search-TargetDetails-div'>
        <div className='Anchor-div'>
          {directoryState && (
            <Button type='primary' style={{ width: '100%' }} onClick={() => this.setState({ directoryState: false })}>
              收起目录
            </Button>
          )}
          {!directoryState && (
            <Button type='primary' style={{ width: '100%' }} onClick={() => this.setState({ directoryState: true })}>
              展开目录
            </Button>
          )}
          {directoryState && (
            <div>
              {' '}
              <Anchor onClick={this.handleAnchorClick}>
                <Link href='#card' title='card' />
                <Link href='#Sequence' title='Sequence' />
                <Link href='#Structure' title='Structure' />
                <Link href='#Mutation' title='Mutation' />
                <Link href='#Drug' title='Drug & Clinical information' />
                <Link href='#Bioassay' title='Bioassay' />
              </Anchor>
            </div>
          )}
        </div>
        <Modal footer={null} closable={false} width={550} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
          <div className='Molstar-div'>
            <Molstar file={this.state.fileData} />
          </div>
        </Modal>
        <Modal footer={null} closable={false} width={1000} visible={visible2} wrapClassName='vertical-center-modal' onCancel={this.onCancelForm}>
          <div className='form-div'>
            <Form onSubmit={this.handleSubmit}>
              <Form.Item
                label='Ref. Sequence:'
                {...{
                  labelCol: {
                    xs: { span: 24 },
                    sm: { span: 4 },
                  },
                  wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 20 },
                  },
                }}
              >
                <Input placeholder='' style={{ width: '60%', marginRight: 8 }} disabled value={targetsDetail.name} />
              </Form.Item>

              {formItems}
              <Form.Item {...formItemLayoutWithOutLabel}>
                <Button type='dashed' onClick={this.add} style={{ width: '60%' }}>
                  <Icon type='plus' /> Add field
                </Button>
              </Form.Item>
              <Form.Item {...formItemLayoutWithOutLabel}>
                <Button type='primary' htmlType='submit'>
                  Align
                </Button>
              </Form.Item>
            </Form>
          </div>
          <div className='SequenceAlignmentList-div'>
            {SequenceAlignmentList.length > 0 && <Table bordered rowKey='item' dataSource={SequenceAlignmentList} pagination={false} columns={columns2} scroll={{ x: 1800 }} />}
          </div>
        </Modal>
        <Modal footer={null} closable={false} width={700} visible={visible3} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible3: false })}>
          <div className='Molstar-div'>
            <Form layout='horizontal'>
              <Form.Item label='输入Smiles' {...formItemLayout}>
                <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getLigendValue} value={this.state.BioassaySearch.drugs_data} />
              </Form.Item>
              <Form.Item label='' {...formTailLayout}>
                {/* <Button
                  type="primary"
                  style={{ marginRight: '50px' }}
                  onClick={this.getDraw}>
                  画结构
                </Button> */}
                <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getBioassayList}>
                  Search
                </Button>
                <div className={true ? 'bottom-div' : 'bottom-div isShowDiv'}>
                  <Radio.Group onChange={this.onChangeRadio4} value={this.state.BioassaySearch.finger}>
                    <Radio value={0}>Substructure</Radio>
                    {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                    <Radio value={1}>Similar Structure</Radio>
                  </Radio.Group>
                </div>
                <div className={true ? 'bottom-div' : 'bottom-div isShowDiv'}>
                  <Jsme height='300px' width='400px' options='oldlook,star' onChange={this.logSmiles2} />
                </div>
              </Form.Item>
            </Form>
          </div>
        </Modal>

        <Spin tip='Loading...' size='large' spinning={this.state.loading}>
          <Card hoverable id='card'>
            <div>
              <div className='title-div'>{targetsDetail.name}</div>
              <div className='title-div-top'>
                <div className='DataList-left'>
                  <div>
                    <div className='div-list'>
                      <div className='list-one'>
                        <div>Gene name</div>
                        <div />
                        {targetsDetail.Gene_name.map((item) => {
                          return <Tag>{item}</Tag>;
                        })}
                      </div>
                      <div className='list-one'>
                        <div>Species</div>
                        <div />
                        {targetsDetail.Species}
                      </div>
                      <div className='list-one'>
                        <div>Uniprot id</div>
                        <div />
                        {targetsDetail.Uniport_id}
                      </div>
                      {/* <div className="list-one">
                        <div>Class</div>
                        <div />
                        {targetsDetail.Class}
                      </div> */}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Card>
          {/* {PanelList} */}
          <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']} onChange={this.callback}>
            <Panel header='Sequence' key='1' id='Sequence'>
              <div>
                <Button type='primary' onClick={this.alignmentEve}>
                  alignment
                </Button>
                <div style={{ width: '90%', overflow: 'scroll' }}>{targetsDetail.SequenceStr}</div>
              </div>

              <div className='Sequence-div'>
                {targetsDetail.Sequence &&
                  targetsDetail.Sequence.map((item, index) => {
                    // console.log(item);
                    //   console.log(Object.entries(item));
                    return (
                      <div className='Sequenceone-div' key={index}>
                        {Object.entries(item)[0][0]}
                        <div className='zimu-div'>
                          {Object.entries(item)[0][1].map((item2, index2) => {
                            return (
                              <Tooltip placement='top' key={index2} title={item2.title}>
                                <div className={'res-color-' + item2.thum}>{item2.thum}</div>
                              </Tooltip>
                            );
                          })}
                        </div>
                      </div>
                    );
                  })}
              </div>
            </Panel>
            <Panel header='Structure' key='2' id='Structure'>
              <Tabs defaultActiveKey='0' tabPosition='left' style={{ height: 1000 }} onChange={this.ChangeTabs}>
                {targetsDetail.Structure.map((item, index) => {
                  return (
                    <TabPane tab={item.pdb} key={item.pdb} id={item.pdb}>
                      <div className='TabPane-center'>
                        <div className='Molstar-div2'>{this.state.aciveKey == item.pdb && <WrappedIframe pdbLink={this.state.pdbLink} />}</div>
                        <div className='Structure-right'>
                          <Form layout='horizontal'>
                            <Form.Item label='详情' {...formItemLayout}>
                              <div>method: {getStructureList.method}</div>
                              <div>name: {getStructureList.name}</div>
                              <div>pdb_datatime: {getStructureList.pdb_datatime}</div>
                              <div>resolution: {getStructureList.resolution}</div>
                            </Form.Item>
                            <Form.Item label='References ' {...formItemLayout}>
                              {getStructureList.References &&
                                getStructureList.References.map((item, index) => {
                                  return (
                                    <Button
                                      type='primary'
                                      onClick={() => {
                                        this.getReferences2(item);
                                      }}
                                      key={index}
                                      style={{ marginRight: '5px' }}
                                    >
                                      {item}
                                    </Button>
                                  );
                                })}
                            </Form.Item>
                          </Form>
                          <Collapse accordion>
                            <Panel header='对齐' key='1'>
                              <div className='form-div'>
                                <Form onSubmit={this.handleSubmit2} className='login-form'>
                                  <Form.Item label='Ref.PDB' {...formItemLayout2}>
                                    <div>
                                      <Select style={{ width: '100px' }} value={this.state.superpositionData[0].pdbID} onChange={this.SelectValue}>
                                        {targetsDetail.Structure.map((item, index) => {
                                          return (
                                            <Option key={index} value={item.pdb.toLowerCase()}>
                                              {item.pdb && item.pdb.toLowerCase()}
                                            </Option>
                                          );
                                        })}
                                      </Select>
                                      <Input
                                        placeholder='请输入Chain'
                                        onChange={this.getValue}
                                        value={this.state.superpositionData[0].chainID}
                                        style={{
                                          width: '100px',
                                        }}
                                      />
                                    </div>
                                  </Form.Item>
                                  {formItems2}
                                  <Form.Item {...formItemLayoutWithOutLabel}>
                                    {sum < 2 && (
                                      <Button type='dashed' onClick={this.add2} style={{ width: '60%' }}>
                                        <Icon type='plus' /> Add field
                                      </Button>
                                    )}
                                  </Form.Item>
                                  <Form.Item {...formItemLayoutWithOutLabel}>
                                    <Button type='primary' htmlType='submit'>
                                      对齐
                                    </Button>
                                  </Form.Item>
                                </Form>
                              </div>
                            </Panel>
                            <Panel header='抽取配体' key='2'>
                              <Form layout='horizontal'>
                                <Form.Item label='配体列表' {...formItemLayout}>
                                  {getStructureList.ligand_up_list &&
                                    getStructureList.ligand_up_list.map((item, index) => {
                                      return (
                                        <Popover
                                          content={
                                            <div>
                                              <div
                                                key={index}
                                                style={{
                                                  width: '100px',
                                                  wordWrap: 'break-word',
                                                  wordBreak: 'normal',
                                                }}
                                              >
                                                {item.comp_name}
                                              </div>

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

              <Table bordered rowKey='item' dataSource={targetsDetail.MutationList} pagination={false} columns={columnsMutation} onChange={this.onChangeTable} />
              <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num} />
            </Panel>
            <Panel header='Drug & Clinical information' key='4' id='Drug'>
              <Table bordered rowKey='item' dataSource={targetsDetail.DrugsInformation} pagination={false} expandedRowRender={expandedRowRender} columns={columnsDrug} />
              <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange3} onChange={this.onChange3} total={total_num3} />
            </Panel>
            <Panel header='Bioassay' key='5' id='Bioassay'>
              <Button type='primary' onClick={() => this.setState({ visible3: true })}>
                Structure Filter
              </Button>
              <Table bordered rowKey='item' dataSource={targetsDetail.Bioassay} pagination={false} columns={columnsBioassay} />
              <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange2} onChange={this.onChange2} total={total_num2} />
            </Panel>
            <Panel header='Virants & Disease' key='6' id='VirantsDisease'>
              <Table bordered rowKey='item' dataSource={VirantsDiseaseList} pagination={false} columns={columnsVirantsDisease} expandedRowRender={expandedRowRender2} />
              <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange5} onChange={this.onChange5} total={total_num5} />
            </Panel>
          </Collapse>
        </Spin>
      </div>
    );
  }
}
