import React, { Component } from 'react';

import { Tabs, Button, Radio, Upload, Input, Select, Form, Icon, Card, Menu, Table, Tag, message, Pagination, Divider, Modal, Col, InputNumber } from 'antd';
import qs from 'qs';
import request from '../../../utils/request';
import { Jsme } from 'jsme-react';
import './index.css';
const { Option } = Select;
const { TextArea } = Input;
export default class StructureSearch extends Component {
  state = {
    list: [
      {
        name: 'Welcome',
        state: true,
      },
      {
        name: 'Docking',
        state: false,
      },
      {
        name: 'Pharmacophore',
        state: false,
      },
      {
        name: 'Automated Molecule Design',
        state: false,
      },
      {
        name: 'Retrosynthesis',
        state: false,
      },
      {
        name: 'Task Manager',
        state: false,
      },
    ],
    stateName: 'Welcome',
    targetsDetail: {
      name: '',
    },
    docking: {
      pro: '',
      lig: '',
      ligand_file: '',
      receptor_file: '',
      ligand_smi: '',
      receptor_pdb: '',
      grid_center: 'notinputcenter',
      gridx: '',
      gridy: '',
      gridz: '',
      handlespeed: '',
    },
    pharmacophoreData: {
      lig: '',
      ligand_file: '',
      ligand_smi: '',
      select_nums: null,
      database_select: 'PDB',
    },
    ListData: [],
    taskManagerData: {
      user_id: '1',
      task_source: '',
      task_status: '',
      page: 1,
      page_size: 10,
    },
    retrosynthesisData: {
      lig: '',
      ligand_file: '',
      ligand_smi: '',
    },
    amd: {
      pro: '',
      lig: '',
      ligand_file: '',
      receptor_file: '',
      ligand_smi: '',
      receptor_pdb: '',
      num_gen: null,
      num_per_gen: null,
      seed_per_gen: null,
      growType: '',
      docking_center: 'notinputcenter',
      x: null,
      y: null,
      z: null,
      mode: null,
      dl_per_gen: null,
      dl_score_cutoff: '',
      MW: null,
      logP_lower: null,
      logP_upper: '',
      handlespeed: '',
    },
    fileList: [],
    fileListReceptor: [],
    fileListLigand: [],
    uploading: false,
    visible: false,
    total_num: 0,
    ListData2: [],
    Smiles: '',
  };
  getRetrosynthesis = () => {
    request
      .post('/yszhaizynth/finder', qs.stringify(this.state.retrosynthesisData))
      .then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          message.success(res.data.message);
        } else {
          message.error(res.data.message);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  getTaskManager = () => {
    request
      .post('/task/page', this.state.taskManagerData)
      .then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          console.log(res.data.data);
          this.setState({
            ListData: res.data.data,
          });
          this.setState({
            total_num: res.data.total_num,
          });
        } else {
          message.error(res.data.message);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  getPharmacophore = () => {
    let formData = new FormData();
    let pharmacophoreData = this.state.pharmacophoreData;
    // formData.append("ligand_file",  pharmacophoreData.ligand_file);

    for (const key in pharmacophoreData) {
      formData.append(key, pharmacophoreData[key]);
    }
    console.log(formData);
    request
      .post('/pharmacophore/pharmacophore_run', formData)
      .then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          message.success(res.data.message);
        } else {
          message.error(res.data.message);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  getDocking = () => {
    let formData = new FormData();
    // const { fileList } = this.state;
    // console.log('fileList', fileList);
    let docking = this.state.docking;
    for (const key in docking) {
      formData.append(key, docking[key]);
    }
    console.log(formData);
    request
      .post('/docking/docking_run', formData)
      .then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          message.success(res.data.message);
        } else {
          message.error(res.data.message);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  getamd = () => {
    let formData = new FormData();
    let amd = this.state.amd;
    for (const key in amd) {
      formData.append(key, amd[key]);
    }
    console.log(formData);
    request
      .post('/amd/amd_run', formData)
      .then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          message.success(res.data.message);
        } else {
          message.error(res.data.message);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  onChangeSpeed = (e) => {
    let { value } = e.target;

    let docking = this.state.docking;
    docking.handlespeed = value;
    this.setState({
      docking,
    });
  };
  grid_x = (e) => {
    // const { value } = e.target;
    let docking = this.state.docking;
    docking.gridx = e;
    this.setState({
      docking,
    });
  };
  grid_y = (e) => {
    // const { value } = e.target;
    let docking = this.state.docking;
    docking.gridy = e;
    this.setState({
      docking,
    });
  };
  grid_z = (e) => {
    // const { value } = e.target;
    let docking = this.state.docking;
    docking.gridz = e;
    this.setState({
      docking,
    });
  };

  amdSpeed = (e) => {
    const { value } = e.target;
    let amd = this.state.amd;
    amd.handlespeed = value;
    this.setState({
      amd,
    });
  };
  amd_x = (e) => {
    // const { value } = e.target;
    let amd = this.state.amd;
    amd.x = e;
    this.setState({
      amd,
    });
  };
  amd_y = (e) => {
    // const { value } = e.target;
    let amd = this.state.amd;
    amd.y = e;
    this.setState({
      amd,
    });
  };
  amd_z = (e) => {
    // const { value } = e.target;
    let amd = this.state.amd;
    amd.z = e;
    this.setState({
      amd,
    });
  };
  num_gen = (e) => {
    console.log(e);

    let amd = this.state.amd;
    amd.num_gen = e;
    this.setState({
      amd,
    });
  };
  num_per_gen = (e) => {
    let amd = this.state.amd;
    amd.num_per_gen = e;
    this.setState({
      amd,
    });
  };
  seed_per_gen = (e) => {
    let amd = this.state.amd;
    amd.seed_per_gen = e;
    this.setState({
      amd,
    });
  };
  growType = (e) => {
    let amd = this.state.amd;
    amd.growType = e;
    this.setState({
      amd,
    });
  };
  amdmode = (e) => {
    let amd = this.state.amd;
    amd.mode = e;
    this.setState({
      amd,
    });
  };
  onChangeAmd = (e) => {
    const { value } = e.target;
    let amd = this.state.amd;
    amd.pro = value;
    this.setState({
      amd,
    });
  };
  amd_dl_per_gen = (e) => {
    let amd = this.state.amd;
    amd.dl_per_gen = e;
    this.setState({
      amd,
    });
  };
  amdMW = (e) => {
    let amd = this.state.amd;
    amd.MW = e;
    this.setState({
      amd,
    });
  };
  amd_logP_lower = (e) => {
    let amd = this.state.amd;
    amd.logP_lower = e;
    this.setState({
      amd,
    });
  };
  onChangeAmdCenter = (e) => {
    let { value } = e.target;
    console.log(value);

    let amd = this.state.amd;
    amd.docking_center = value;
    if (amd.docking_center == 'notinputcenter') {
      amd.x = '';
      amd.y = '';
      amd.z = '';
    }
    this.setState({
      amd,
    });
  };
  onChangeDockingCenter = (e) => {
    let { value } = e.target;
    console.log(value);
    let docking = this.state.docking;
    docking.grid_center = value;
    if (docking.grid_center == 'notinputcenter') {
      docking.gridx = '';
      docking.gridy = '';
      docking.gridz = '';
    }
    this.setState({
      docking,
    });
  };

  SpecifyPDB = (e) => {
    let { value } = e.target;
    console.log(value);

    let docking = this.state.docking;
    docking.receptor_pdb = value;
    this.setState({
      docking,
    });
  };
  SpecifyPDB2 = (e) => {
    let { value } = e.target;
    console.log(value);

    let amd = this.state.amd;
    amd.receptor_pdb = value;
    this.setState({
      amd,
    });
  };
  // pharmacophore
  select_nums = (e) => {
    // const { value } = e.target;
    let pharmacophoreData = this.state.pharmacophoreData;
    pharmacophoreData.select_nums = e;
    this.setState({
      pharmacophoreData,
    });
  };

  Receptorpreparation = (e) => {
    let { value } = e.target;
    console.log(value);

    let docking = this.state.docking;
    docking.pro = value;
    this.setState({
      docking,
    });
  };

  goList = () => {
    if (this.state.stateName == 'Docking') {
      this.selectionDocking();
      return;
    }
    if (this.state.stateName == 'Pharmacophore') {
      this.selectionPharmacophore();
      return;
    }
    if (this.state.stateName == 'Retrosynthesis') {
      this.selectionRetrosynthesis();
      return;
    }
    if (this.state.stateName == 'Automated Molecule Design') {
      this.selectionAmd();
      return;
    }
  };
  callback = (e) => {
    console.log(e);
  };
  getListOne = (e, name) => {
    let newList = this.state.list;
    this.setState({
      stateName: name,
    });
    newList.forEach((item, index) => {
      item.state = false;
      if (e === index) {
        item.state = true;
      }
    });

    this.setState({
      list: newList,
    });
    if (name == 'Task Manager') {
      this.getTaskManager();
      return;
    }
  };

  onChangeDatabase = (e) => {
    let { value } = e.target;
    let pharmacophoreData = this.state.pharmacophoreData;
    pharmacophoreData.database_select = value;
    this.setState({
      pharmacophoreData,
    });
  };
  onChange = (e) => {
    let { value } = e.target;
    console.log(value);

    // let docking = this.state.docking;
    // docking.lig = value;
    // this.setState({
    //   docking,
    // });

    let docking = this.state.docking;
    docking.lig = value;

    this.setState({
      docking: docking,
    });

    let pharmacophoreData = this.state.pharmacophoreData;
    pharmacophoreData.lig = value;

    this.setState({
      pharmacophoreData: pharmacophoreData,
    });

    let retrosynthesisData = this.state.retrosynthesisData;
    retrosynthesisData.lig = value;
    this.setState({
      retrosynthesisData: retrosynthesisData,
    });

    let amd = this.state.amd;
    amd.lig = value;
    this.setState({
      amd: amd,
    });

    console.log(this.state);
  };
  logSmiles = (e) => {
    let Smiles = e;
    this.setState({
      Smiles,
    });

    let docking = this.state.docking;
    docking.ligand_smi = Smiles;

    this.setState({
      docking: docking,
    });

    let pharmacophoreData = this.state.pharmacophoreData;
    pharmacophoreData.ligand_smi = Smiles;

    this.setState({
      pharmacophoreData: pharmacophoreData,
    });

    let retrosynthesisData = this.state.retrosynthesisData;
    retrosynthesisData.ligand_smi = Smiles;

    this.setState({
      retrosynthesisData: retrosynthesisData,
    });

    let amd = this.state.amd;
    amd.ligand_smi = Smiles;

    this.setState({
      amd: amd,
    });
  };
  handleChange = (value) => {
    let taskManagerData = this.state.taskManagerData;
    taskManagerData.task_source = value;

    this.setState({
      taskManagerData,
    });
  };
  handleChange2 = (value) => {
    let taskManagerData = this.state.taskManagerData;
    taskManagerData.task_status = value;

    this.setState({
      taskManagerData,
    });
  };
  onShowSizeChange = (current, pageSize) => {
    let taskManagerData = this.state.taskManagerData;
    taskManagerData.page = current;
    taskManagerData.page_size = pageSize;
    this.setState({
      taskManagerData,
    });

    this.getTaskManager();
  };
  onChange2 = (current, pageSize) => {
    let taskManagerData = this.state.taskManagerData;
    taskManagerData.page = current;
    taskManagerData.page_size = pageSize;
    this.setState({
      taskManagerData,
    });

    this.getTaskManager();
  };
  getResult = (e) => {
    this.setState({ visible: true });
    console.log(e);
    let resultJson = eval('(' + e.resultJson + ')');
    console.log(resultJson);
    var jobId = resultJson.jobId;
    let list = resultJson.list;
    this.setState({
      ListData2: list,
    });

    for (var key in list) {
      console.log(jobId);
      var imageHtml =
        '<img style="width:700px;float: left;" src="http://52.83.230.236:8010/static/showreaction/' +
        jobId +
        '/' +
        list[key]['imageFile'] +
        '" id="' +
        list[key]['imageFile'].replace('.png', '') +
        '">';
      // console.log(imageHtml);
    }
  };
  ligandSmiles = (e) => {
    const { value } = e.target;

    this.setState({
      Smiles: value,
    });

    let docking = this.state.docking;
    docking.ligand_smi = value;
    this.setState({
      docking: docking,
    });

    let pharmacophoreData = this.state.pharmacophoreData;
    pharmacophoreData.ligand_smi = value;

    this.setState({
      pharmacophoreData: pharmacophoreData,
    });

    let retrosynthesisData = this.state.retrosynthesisData;
    retrosynthesisData.ligand_smi = value;
    this.setState({
      retrosynthesisData: retrosynthesisData,
    });

    let amd = this.state.amd;
    amd.ligand_smi = value;
    this.setState({
      amd: amd,
    });
  };
  selectionDocking = () => {
    if (this.state.docking.pro == '') {
      message.warning('please specify how to upload receptor');
      return;
    }
    if (this.state.docking.pro == 'file' && this.state.docking.receptor_file == '') {
      message.warning('please choose receptor file');
      return;
    }
    if (this.state.docking.pro == 'pdbid' && this.state.docking.receptor_pdb == '') {
      message.warning('please enter PDB ID of the receptor');
      return;
    }

    if (this.state.docking.lig == '') {
      message.warning('please specify how to upload receptor');
      return;
    }
    if (this.state.docking.lig == 'file' && this.state.docking.ligand_file == '') {
      message.warning('please choose ligand file');
      return;
    }
    if (this.state.docking.lig == 'smi' && this.state.docking.ligand_smi == '') {
      message.warning('please enter SMILES of the ligand');
      return;
    }
    if (this.state.docking.handlespeed == '') {
      message.warning('please choose docking speed');
      return;
    }
    if (this.state.docking.grid_center == 'inputcenter' && (this.state.docking.gridx == null || this.state.docking.gridy == null || this.state.docking.gridz == null)) {
      console.log('inputcenter');
      console.log(this.state.docking);
      return message.warning('please input grid center');
      // if (
      //   this.state.docking.gridx == "" ||
      //   this.state.docking.gridy == "" ||
      //   this.state.docking.gridz == ""
      // ) {

      // }
    } else {
      this.getDocking();
    }
  };
  selectionAmd = () => {
    if (this.state.amd.pro == '') {
      message.warning('please specify how to upload receptor');
      return;
    }
    if (this.state.amd.pro == 'file' && this.state.amd.receptor_file == '') {
      message.warning('please choose receptor file');
      return;
    }
    if (this.state.amd.pro == 'pdbid' && this.state.amd.receptor_pdb == '') {
      message.warning('please enter PDB ID of the receptor');
      return;
    }

    if (this.state.amd.lig == '') {
      message.warning('please specify how to upload receptor');
      return;
    }
    if (this.state.amd.lig == 'file' && this.state.amd.ligand_file == '') {
      message.warning('please choose ligand file');
      return;
    }
    if (this.state.amd.lig == 'smi' && this.state.amd.ligand_smi == '') {
      message.warning('please enter SMILES of the ligand');
      return;
    }

    if (this.state.amd.num_gen == null || !(this.state.amd.num_gen % 1 === 0)) {
      message.warning('num_gen value cannot be a null character and must be an integer greater than 0');
      return;
    }
    if (this.state.amd.num_per_gen == null || !(this.state.amd.num_per_gen % 1 === 0)) {
      message.warning('num_per_gen value cannot be a null character and must be an integer greater than 0');
      return;
    }
    if (this.state.amd.seed_per_gen == null || !(this.state.amd.seed_per_gen % 1 === 0)) {
      message.warning('seed_per_gen value cannot be a null character and must be an integer greater than 0');
      return;
    }
    if (this.state.amd.growType == '') {
      message.warning('please choose growType');
      return;
    }
    if (this.state.amd.handlespeed == '') {
      message.warning('please choose docking speed');
      return;
    }
    if (this.state.amd.docking_center == 'inputcenter' && (this.state.amd.x == null || this.state.amd.y == null || this.state.amd.z == null)) {
      message.warning('please input docking center');
      return;
      // if (
      //   this.state.amd.gridx == "" ||
      //   this.state.amd.gridy == "" ||
      //   this.state.amd.gridz == ""
      // ) {
      //   message.warning("please input grid center");
      //   return;
      // }
      // document.getElementById("gridxyz").style.visibility="visible";
      // document.getElementById("gridxyz").style.visibility="hidden";
    }
    if (this.state.amd.mode == null || !(this.state.amd.mode % 1 === 0)) {
      message.warning('mode cannot be null and is an integer');
      return;
    }
    if (this.state.amd.dl_per_gen == null || !(this.state.amd.dl_per_gen % 1 === 0)) {
      message.warning('dl_per_gen cannot be null and is an integer');
      return;
    }

    if (this.state.amd.MW == null || !(this.state.amd.MW % 1 === 0)) {
      message.warning('MW cannot be null and is an integer');
      return;
    }

    if (this.state.amd.logP_lower == null) {
      message.warning('please input logP_lower');
      return;
    } else {
      /*      if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") {
        if (this.state.docking.gridx== "" || this.state.docking.gridy== "" || this.state.docking.gridz== ""){
            message.warning("please input grid center");
            return;
        }
      }*/
      this.getamd();
    }
  };
  selectionPharmacophore = () => {
    if (this.state.pharmacophoreData.lig == '') {
      message.warning('please specify how to upload receptor');
      return;
    }
    if (this.state.pharmacophoreData.lig == 'file' && this.state.pharmacophoreData.ligand_file == '') {
      message.warning('please choose ligand file');
      return;
    }
    if (this.state.pharmacophoreData.lig == 'smi' && this.state.pharmacophoreData.ligand_smi == '') {
      message.warning('please enter SMILES of the ligand');
      return;
    }
    if (this.state.pharmacophoreData.select_nums == null || !(this.state.pharmacophoreData.select_nums % 1 === 0)) {
      console.log(333333);
      message.warning('The value cannot be a null character and must be an integer greater than 0');
      return;
    } else {
      /*      if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") {
        if (this.state.docking.gridx== "" || this.state.docking.gridy== "" || this.state.docking.gridz== ""){
            message.warning("please input grid center");
            return;
        }
      }*/
      this.getPharmacophore();
    }
  };
  selectionRetrosynthesis = () => {
    if (this.state.retrosynthesisData.lig == '') {
      message.warning('please specify how to upload receptor');
      return;
    }
    // if (
    //   this.state.retrosynthesisData.lig == "file" &&
    //   this.state.retrosynthesisData.ligand_file == ""
    // ) {
    //   message.warning("please choose ligand file");
    //   return;
    // }
    if (this.state.retrosynthesisData.lig == 'smi' && this.state.retrosynthesisData.ligand_smi == '') {
      message.warning('please enter SMILES of the ligand');
      return;
    } else {
      /*      if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") {
        if (this.state.docking.gridx== "" || this.state.docking.gridy== "" || this.state.docking.gridz== ""){
            message.warning("please input grid center");
            return;
        }
      }*/
      this.getRetrosynthesis();
    }
  };
  getDownload = (e) => {};

  render() {
    const { list, total_num, ListData, uploading, fileList, fileListReceptor, fileListLigand, visible, ListData2 } = this.state;
    const props = {
      name: 'file',
      beforeUpload: (file) => {
        var fileName = file.name;
        var suffixName = fileName.substring(fileName.lastIndexOf('.'));
        if (suffixName != '.smi') {
          return message.error('You can only upload smi file!');
        }
        let docking = this.state.docking;
        docking.ligand_file = file;
        console.log(docking);
        this.setState({
          docking: docking,
        });

        let pharmacophoreData = this.state.pharmacophoreData;
        pharmacophoreData.ligand_file = file;
        console.log(pharmacophoreData);
        this.setState({
          pharmacophoreData: pharmacophoreData,
        });

        let retrosynthesisData = this.state.retrosynthesisData;
        retrosynthesisData.ligand_file = file;
        console.log(retrosynthesisData);
        this.setState({
          retrosynthesisData: retrosynthesisData,
        });

        let amd = this.state.amd;
        amd.ligand_file = file;
        console.log(amd);
        this.setState({
          amd: amd,
        });

        this.setState(
          (state) => ({
            fileListLigand: [...state.fileListLigand, file],
          }),
          () => {
            console.log('file111===', file);
            console.log('fileListLigand===', this.state.fileListLigand);
          }
        );

        return false;
      },
      fileListLigand,
    };
    const props2 = {
      name: 'file',
      beforeUpload: (file) => {
        var fileName = file.name;
        var suffixName = fileName.substring(fileName.lastIndexOf('.'));
        if (suffixName != '.pdb') {
          return message.error('You can only upload pdb file!');
        }
        let docking = this.state.docking;
        docking.receptor_file = file;
        console.log(docking);
        this.setState({
          docking: docking,
        });

        this.setState(
          (state) => ({
            fileListReceptor: [...state.fileListReceptor, file],
          }),
          () => {
            console.log('file===', file);
            console.log('fileListReceptor===', this.state.fileListReceptor);
          }
        );

        return false;
      },
      fileListReceptor,
    };
    const props3 = {
      beforeUpload: (file) => {
        var fileName = file.name;
        var suffixName = fileName.substring(fileName.lastIndexOf('.'));
        if (suffixName != '.pdb') {
          return message.error('You can only upload pdb file!');
        }
        let amd = this.state.amd;
        amd.receptor_file = file;
        console.log(amd);
        this.setState({
          amd: amd,
        });

        return false;
      },
      fileList,
    };

    const formItemLayout2 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };
    const formItemLayout3 = {
      labelCol: { span: 8 },
      wrapperCol: { span: 10 },
    };
    const radioStyle = {
      display: 'block',
      height: 'auto',
      // lineHeight: '30px',
      // marginBottom: '20px',
      width: '700px',
    };
    const columns = [
      {
        title: 'Type',
        dataIndex: 'taskSource',
        key: 'taskSource',
      },
      {
        title: 'Status',
        dataIndex: 'taskStatus',
        key: 'taskStatus',
      },
      {
        title: 'Start Time',
        key: 'startTime',
        dataIndex: 'startTime',
      },
      {
        title: 'End Time',
        key: 'endTime',
        dataIndex: 'endTime',
      },
      {
        title: 'Result',
        key: 'action',
        render: (text, record) => (
          <span>
            {record.resultFilePath != null && (
              <a rel='noopener noreferrer' target='_blank' href={record.resultFilePath}>
                download
              </a>
            )}
            {record.resultFilePath != null && record.resultJson != null && <Divider type='vertical' />}
            {record.resultJson != null && <a onClick={() => this.getResult(record)}>result </a>}
          </span>
        ),
      },
    ];
    const columns2 = [
      {
        title: 'Predited Routes',
        dataIndex: 'imageFile',
        key: 'imageFile',
        render: (imageFile) => <img alt='example' style={{ height: '100px', padding: '0px' }} src={imageFile} />,
      },
      {
        title: 'Score',
        dataIndex: 'score',
        key: 'score',
      },
      // {
      //   title: "smiles",
      //   dataIndex: "smiles",
      //   key: "smiles",
      // },
    ];

    const expandedRowRender = (e) => {
      console.log(e);
      const { pre_smiles } = e;
      const columns = [
        {
          title: 'Smiles',
          dataIndex: 'smiles',
          key: 'smiles',
          render: (smiles) => (
            <div>
              <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={smiles} />
            </div>
          ),
        },
        {
          title: 'Brand Name',
          dataIndex: 'brand',
          key: 'brand',
        },
        {
          title: 'Price',
          dataIndex: 'origPrice',
          key: 'origPrice',
        },
        {
          title: 'Package',
          dataIndex: 'package',
          key: 'package',
        },
      ];
      return <Table columns={columns} dataSource={pre_smiles} pagination={false} />;
    };

    return (
      <div className='Docking-div'>
        <Modal footer={null} title='The results show' visible={visible} wrapClassName='vertical-center-modal' width={'100%'} height={'500px'} onCancel={() => this.setState({ visible: false })}>
          {/* <Table
            columns={columns2}
            pagination={false}
            dataSource={ListData2}
            rowKey="id"
          /> */}
          <Table bordered style={{ top: 100 }} rowKey='item' dataSource={ListData2} pagination={false} columns={columns2} expandedRowRender={expandedRowRender} />
        </Modal>
        <div className='Docking-center'>
          <div className='logo-topdiv'>
            <img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../../assets/img/logo.png')} />
          </div>
          <div className='top-div'>
            <Card
              hoverable
              style={{
                width: '100%',
                // backgroundColor: "#00FF00",
                textAlign: 'center',
                fontSize: '30px',
                fontWeight: 600,
                height: '150px',
                lineHeight: '100px',
              }}
            >
              <div className='Computational-div'>
                <div>Computational Platform</div>
              </div>
            </Card>
          </div>

          <div>
            <div className='left-div'>
              {list.map((item, index) => {
                return (
                  <Button type={item.state ? 'primary' : ''} size='large' onClick={() => this.getListOne(index, item.name)} key={index}>
                    {item.name}
                  </Button>
                );
              })}
            </div>
            <div className={this.state.stateName === 'Welcome' || this.state.stateName === 'Task Manager' ? 'displaydiv' : 'right-div'}>
              {
                <div className='generalsearch-div'>
                  <div className='title-text'>
                    {(this.state.stateName === 'Automated Molecule Design' && 'Input Fragment') ||
                      (this.state.stateName === 'Pharmacophore' && 'Query Molecule') ||
                      (this.state.stateName === 'Retrosynthesis' && 'New Compound for Synthesis')}
                    {this.state.stateName != 'Automated Molecule Design' &&
                      'Ligand Preparation' &&
                      this.state.stateName != 'Pharmacophore' &&
                      'Ligand Preparation' &&
                      this.state.stateName != 'Retrosynthesis' &&
                      'Ligand Preparation'}
                  </div>
                  <Radio.Group onChange={this.onChange}>
                    <Radio style={radioStyle} value={'file'}>
                      Upload ligand file from your computer:
                      <Upload {...props}>
                        <Button
                          style={{
                            marginLeft: '5px',
                          }}
                        >
                          <Icon type='upload' /> 选择文件
                        </Button>
                      </Upload>
                    </Radio>
                    <Radio style={radioStyle} value={'smi'}>
                      Ligand SMILES:
                      <Input value={this.state.Smiles} onChange={this.ligandSmiles} style={{ width: '200px', marginLeft: '5px' }} />
                    </Radio>
                  </Radio.Group>

                  {/* <div>enter SMILES or draw the ligand structure below:</div> */}
                  <div className='Jsme-div'>
                    <Jsme height='300px' width='500px' options='oldlook,star' onChange={this.logSmiles} />
                  </div>
                </div>
              }
            </div>

            <div className='right-div'>
              {list[0].state && (
                <div className='generalsearch-div'>
                  <Card hoverable style={{ width: '100%', padding: '0px' }} cover={<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../../assets/img/u22.gif')} />} />
                </div>
              )}
              {list[1].state && (
                <div className='generalsearch-div'>
                  <div>
                    Availble Library for Docking：
                    <Radio.Group onChange={this.onChange} value={this.state.value}>
                      <Radio value={1}>Drugbank</Radio>
                      <Radio value={2}>Zinc</Radio>
                      <Radio value={3}>Enamine</Radio>
                      <Radio value={4}>Maybridge</Radio>
                    </Radio.Group>
                  </div>
                  <div className='title-text'>Receptor preparation</div>
                  <Radio.Group value={this.state.docking.pro} onChange={this.Receptorpreparation}>
                    <Radio style={radioStyle} value={'file'}>
                      Upload receptor file from your computer:
                      <Upload {...props2}>
                        <Button
                          style={{
                            marginLeft: '5px',
                          }}
                        >
                          <Icon type='upload' /> 选择文件
                        </Button>
                      </Upload>
                    </Radio>
                    <Radio style={radioStyle} value={'pdbid'}>
                      Specify PDB ID of receptor:
                      <Input style={{ width: '200px', marginLeft: '5px' }} value={this.state.docking.receptor_pdb} onChange={this.SpecifyPDB} />
                    </Radio>
                  </Radio.Group>
                  <div className='DockingCenter'>
                    Docking Center：
                    <Radio.Group onChange={this.onChangeDockingCenter} value={this.state.docking.grid_center}>
                      <Radio value={'inputcenter'}>yes</Radio>
                      <Radio value={'notinputcenter'}>no</Radio>
                    </Radio.Group>
                  </div>
                  {this.state.docking.grid_center == 'inputcenter' && (
                    <Form layout='inline'>
                      {/* <Form.Item label="Form Layout" {...formItemLayout} /> */}
                      <Form.Item label='grid_x' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} value={this.state.docking.gridx} onChange={this.grid_x} placeholder='input placeholder' />
                      </Form.Item>
                      <Form.Item label='grid_y' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.grid_y} value={this.state.docking.gridy} />
                      </Form.Item>
                      <Form.Item label='grid_z' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.grid_z} value={this.state.docking.gridz} />
                      </Form.Item>
                    </Form>
                  )}

                  <div className='Speed-div'>
                    Speed：
                    <Radio.Group onChange={this.onChangeSpeed} value={this.state.docking.handlespeed}>
                      <Radio value={'slow'}>accurate</Radio>
                      <Radio value={'quick'}>quick</Radio>
                      <Radio value={'highpass'}>high throught</Radio>
                    </Radio.Group>
                  </div>
                </div>
              )}

              {list[2].state && (
                <div className='pharmacophore-div'>
                  <div className='pharmacophore-top'>
                    <div className='pharmacophore-title'>Databases:</div>
                    <Radio.Group onChange={this.onChangeDatabase} value={this.state.pharmacophoreData.database_select}>
                      <Radio value={'PDB'}>PDB</Radio>
                      <Radio value={'GPCR'}>GPCR</Radio>
                      <Radio value={'KINASE'}>KINASE</Radio>
                    </Radio.Group>
                  </div>
                  <div className='pharmacophore-top'>
                    <div className='pharmacophore-title2'>Number of Results Retained:</div>
                    <div>
                      <InputNumber min={0} onChange={this.select_nums} value={this.state.pharmacophoreData.select_nums} style={{ width: '200px' }} />
                    </div>
                  </div>
                </div>
              )}
              {list[3].state && (
                <div className='generalsearch-div'>
                  <Form className='ant-advanced-search-form'>
                    <Col span={12}>
                      <Form.Item label='num_gen' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} min={0} placeholder='input placeholder' onChange={this.num_gen} value={this.state.amd.num_gen} />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item label='num_per_gen' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} min={0} onChange={this.num_per_gen} value={this.state.amd.num_per_gen} placeholder='input placeholder' />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item label='seed_per_gen' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} min={0} onChange={this.seed_per_gen} value={this.state.amd.seed_per_gen} placeholder='input placeholder' />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item label='grow type' {...formItemLayout3}>
                        {/* <Input
                          onChange={this.growType}
                          value={this.state.amd.growType}
                          placeholder="input placeholder"
                        /> */}

                        <Select onChange={this.growType} style={{ width: '150px' }}>
                          <Option value='grow'>grow</Option>
                          <Option value='mutation'>mutation</Option>
                          <Option value='bioisoteric'>bioisoteric</Option>
                          <Option value='reaction'>reaction</Option>
                        </Select>
                      </Form.Item>
                    </Col>
                  </Form>

                  <div className='title-text'>Docking</div>

                  <div className='Speed-div'>
                    Speed：
                    <Radio.Group onChange={this.amdSpeed} value={this.state.amd.handlespeed}>
                      <Radio value={'XP'}>accurate</Radio>
                      <Radio value={'SP'}>quick</Radio>
                      <Radio value={'HTVS'}>high throught Ⅰ</Radio>
                      <Radio value={'vina'}>high throught Ⅱ</Radio>
                    </Radio.Group>
                  </div>

                  <Radio.Group value={this.state.amd.pro} onChange={this.onChangeAmd}>
                    <Radio style={radioStyle} value={'file'}>
                      Upload receptor file from your computer:
                      <Upload {...props3}>
                        <Button style={{ marginLeft: '5px' }}>
                          <Icon type='upload' /> 选择文件
                        </Button>
                      </Upload>
                    </Radio>
                    <Radio style={radioStyle} value={'pdbid'}>
                      Specify PDB ID of receptor:
                      <Input style={{ width: '200px', marginLeft: '5px' }} value={this.state.amd.receptor_pdb} onChange={this.SpecifyPDB2} />
                    </Radio>
                  </Radio.Group>
                  <div className='DockingCenter'>
                    Docking Center：
                    <Radio.Group onChange={this.onChangeAmdCenter} value={this.state.amd.docking_center}>
                      <Radio value={'inputcenter'}>yes</Radio>
                      <Radio value={'notinputcenter'}>no</Radio>
                    </Radio.Group>
                  </div>
                  {this.state.amd.docking_center == 'inputcenter' && (
                    <Form layout='inline'>
                      <Form.Item label='X' {...formItemLayout}>
                        <InputNumber style={{ width: '150px' }} placeholder='input placeholder' value={this.state.amd.x} onChange={this.amd_x} />
                      </Form.Item>
                      <Form.Item label='Y' {...formItemLayout}>
                        <InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.amd_y} value={this.state.amd.y} />
                      </Form.Item>
                      <Form.Item label='Z' {...formItemLayout}>
                        <InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.amd_z} value={this.state.amd.z} />
                      </Form.Item>
                    </Form>
                  )}

                  <div className='title-text'>Deep Learning</div>

                  <Form className='generalsearch-div' style={{ height: '80px' }}>
                    {/* <Form.Item label="Form Layout" {...formItemLayout} /> */}
                    <Col span={12}>
                      <Form.Item label='mode' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} value={this.state.amd.mode} onChange={this.amdmode} placeholder='input placeholder' />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item label='dl_per_gen' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} value={this.state.amd.dl_per_gen} onChange={this.amd_dl_per_gen} placeholder='input placeholder' />
                      </Form.Item>
                    </Col>
                    {/* <Col span={12}>
                      <Form.Item
                        label="dl_score_cutoffize"
                        {...formItemLayout3}
                      >
                        <Input placeholder="input placeholder" />
                      </Form.Item>
                    </Col> */}
                  </Form>
                  <div className='title-text'>Properties</div>
                  <Form className='generalsearch-div' style={{ height: '100px' }}>
                    {/* <Form.Item label="Form Layout" {...formItemLayout} /> */}
                    <Col span={12}>
                      <Form.Item label='MW' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} value={this.state.amd.MW} onChange={this.amdMW} placeholder='input placeholder' />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item label='logP_lower' {...formItemLayout3}>
                        <InputNumber style={{ width: '150px' }} value={this.state.amd.logP_lower} onChange={this.amd_logP_lower} placeholder='input placeholder' />
                      </Form.Item>
                    </Col>
                    {/* <Col span={12}>
                      <Form.Item
                        label="dl_score_cutoffize"
                        {...formItemLayout3}
                      >
                        <Input placeholder="input placeholder" />
                      </Form.Item>
                    </Col> */}
                  </Form>
                </div>
              )}
              {list[5].state && (
                <div className='taskmanager-div'>
                  <div className='search-div'>
                    <Form layout='inline'>
                      <Form.Item label='type'>
                        <Select style={{ width: 120 }} onChange={this.handleChange} defaultValue=''>
                          <Option value='1'>retrosynthesis</Option>
                          <Option value='2'>docking</Option>
                          <Option value='3'>amd</Option>
                          <Option value='4'>pharmacophore</Option>
                          <Option value=''>all</Option>
                        </Select>
                      </Form.Item>
                      <Form.Item label='status'>
                        <Select style={{ width: 120 }} onChange={this.handleChange2} defaultValue=''>
                          <Option value='1'>running</Option>
                          <Option value='2'>finshed</Option>
                          <Option value='3'>others</Option>
                          <Option value=''>all</Option>
                        </Select>
                      </Form.Item>
                      <Form.Item>
                        <Button type='primary' onClick={this.getTaskManager}>
                          search
                        </Button>
                      </Form.Item>
                    </Form>
                  </div>
                  <div className='list-div'>
                    <Table columns={columns} pagination={false} dataSource={ListData} rowKey='id' />

                    <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange2} total={total_num} />
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className={this.state.stateName === 'Welcome' || this.state.stateName === 'Task Manager' ? 'displaydiv' : 'bottom-butn'}>
            <Button onClick={this.goList} type='primary' size='large' shape='round'>
              Run
            </Button>
          </div>
        </div>
      </div>
    );
  }
}
