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: null,
      gridy: null,
      gridz: null,
      handlespeed: "",
    },
    pharmacophoreData: {
      lig: "",
      ligand_file: "",
      ligand_smi: "",
      select_nums: null,
    },
    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: [],
    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();
    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;
    }
  };
  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 props = {
      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,
        });

        return false;
      },
      fileList,
    };
    const props2 = {
      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,
        });

        return false;
      },
      fileList,
    };
    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 {
      list,
      total_num,
      ListData,
      uploading,
      fileList,
      visible,
      ListData2,
    } = this.state;
    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: "30px",
      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">
                      Pharmacophore Database from PDB Rharmacophore:
                    </div>
                    <Radio.Group onChange={this.onChange} value={1}>
                      <Radio value={1}>PDB</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>
    );
  }
}
