import React from 'react';
import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col } from 'antd';
import LogoTitlte from '../../components/LogoTitlte/index';
import { Jsme } from 'jsme-react';
import qs from 'qs';
import request from '../../utils/request';
import './style.css';
const { TabPane } = Tabs;
const { Option } = Select;
class Home extends React.Component {
  state = {
    select_db: 'Ligands',
    data: '',
    page: 1,
    page_size: 10,
    data_type: 'smile',
    target_class: '',
    // target_families:'',
    searchData: {
      name: 'Drug',
      drugs_data: '',
      target_data: '',
      indication: '',
      pdb_status: 0,
      page: 1,
      page_size: 10,
    },

    TargetSearchData: {
      name: 'Target',
      target_data: '',
      pdb_status: 0,
      page: 1,
      page_size: 10,
    },
    ligandSearchData: {
      name: 'Ligand',
      ligand_data: '',
      target_class: 'All Groups',
      target_data: '',
      target_families: '',
      pdb_status: 0,
      page: 1,
      page_size: 10,
    },
    IndicationSearchData: {
      name: 'Indication',
      indication: '',
      page: 1,
      page_size: 10,
    },
    MutationSearchData: {
      name: 'Mutation',
      chembl_id: '',
      target_class: 'All Class',
      target_data: '',
      target_families: '',
      idselect_data: [],
      page: 1,
      page_size: 10,
    },
    disabled: true,
    loading: false,
    SelectList: [],
    draw: false,
    classList: [],
    classData: 'All Class',
    allClassList: {},
    childClassList: [],
    TargetClassList: [],
    TargetAllClassList: [],
    TargetChildClassList: [],
    compoundList: ['DrugName', 'Smiles'],
    targetList: ['TargetName', 'UniprotId'],
    optionsList: [{ label: '查询drug相关靶点', value: 1 }, { label: '查询ligand相关靶点', value: 2, disabled: false }, { label: '是否有PDB结构', value: 3 }],
  };
  // Mutation
  CheckChange = (e) => {
    console.log(e);
    let MutationSearchData = this.state.MutationSearchData;
    MutationSearchData.idselect_data = e;
    this.setState(() => ({ MutationSearchData: MutationSearchData }));
  };
  onAllChange = (e) => {
    if (e.target.checked) {
      let MutationSearchData = this.state.MutationSearchData;
      let all_idselect_data = ['TM1', 'TM4', 'TM7', 'ICL3', 'ECL3', 'N-Term', 'ECL1', 'ICL1', 'TM5', 'TM2', 'TM3', 'TM6', 'ICL2', 'ECL2', 'C-Term'];
      MutationSearchData.idselect_data = all_idselect_data;
      this.setState(() => ({ MutationSearchData: MutationSearchData }));
    } else {
      let MutationSearchData = this.state.MutationSearchData;
      let all_idselect_data = [];
      MutationSearchData.idselect_data = all_idselect_data;
      this.setState(() => ({ MutationSearchData: MutationSearchData }));
    }
  };
  getMutationList = () => {
    let data = JSON.parse(JSON.stringify(this.state.MutationSearchData));
    data.idselect_data = data.idselect_data.toString();
    this.setState(() => ({ loading: true }));
    request
      .post('/mutation_search', qs.stringify(data))
      .then((res) => {
        this.setState(() => ({ loading: false }));
        if (res.data.code === 200) {
          console.log(data);
          this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data) });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  childClassChange3 = (e) => {
    console.log(e);
    let MutationSearchData = this.state.MutationSearchData;
    MutationSearchData.target_families = e;
    this.setState(() => ({ MutationSearchData: MutationSearchData }));
  };
  getClassData3 = (e) => {
    console.log(e);
    this.setState(() => ({ classData: e }));
    let MutationSearchData = this.state.MutationSearchData;
    MutationSearchData.target_class = e;
    this.setState(() => ({ MutationSearchData: MutationSearchData }));
    let value = this.state.allClassList;
    let childData = value[e];
    console.log(childData);
    this.setState(() => ({ childClassList: childData }));
  };
  getMutationValue = (e) => {
    const { value } = e.target;
    let MutationSearchData = this.state.MutationSearchData;
    MutationSearchData.target_data = value;
    this.setState(() => ({ MutationSearchData: MutationSearchData }));
  };
  getChemblValue = (e) => {
    const { value } = e.target;
    let MutationSearchData = this.state.MutationSearchData;
    MutationSearchData.chembl_id = value;
    this.setState(() => ({ MutationSearchData: MutationSearchData }));
  };
  // Indication

  getIndicationValue = (e) => {
    const { value } = e.target;
    let IndicationSearchData = this.state.IndicationSearchData;
    IndicationSearchData.indication = value;
    this.setState(() => ({ IndicationSearchData: IndicationSearchData }));
  };
  getIndicationList = () => {
    let data = this.state.IndicationSearchData;
    this.setState(() => ({ loading: true }));
    request
      .post('/drugbank/indication_search', qs.stringify(data))
      .then((res) => {
        this.setState(() => ({ loading: false }));
        if (res.data.code === 200) {
          this.props.history.push({ pathname: '/drugbank/Indication', search: qs.stringify(data) });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  // ligend
  getLigendValue = (e) => {
    const { value } = e.target;
    let ligandSearchData = this.state.ligandSearchData;
    ligandSearchData.ligand_data = value;
    this.setState(() => ({ ligandSearchData: ligandSearchData }));
  };

  logSmiles2 = (e) => {
    let ligandSearchData = this.state.ligandSearchData;
    ligandSearchData.ligand_data = e;
    this.setState(() => ({ ligandSearchData: ligandSearchData }));
    // this.setState(()=>({data:e }))
  };
  getLigandData = (e) => {
    const { value } = e.target;
    let ligandSearchData = this.state.ligandSearchData;
    ligandSearchData.target_data = value;
    this.setState(() => ({ ligandSearchData: ligandSearchData }));
  };
  ligandChange = (e) => {
    let ligandSearchData = this.state.ligandSearchData;
    ligandSearchData.target_type = e;
    this.setState(() => ({ ligandSearchData: ligandSearchData }));
  };
  childClassChange2 = (e) => {
    console.log(e);
    let ligandSearchData = this.state.ligandSearchData;
    ligandSearchData.target_families = e;
    this.setState(() => ({ ligandSearchData: ligandSearchData }));
  };
  getClassData2 = (e) => {
    console.log(e);
    this.setState(() => ({ classData: e }));
    let ligandSearchData = this.state.ligandSearchData;
    ligandSearchData.target_class = e;
    this.setState(() => ({ ligandSearchData: ligandSearchData }));
    let value = this.state.allClassList;
    let childData = value[e];
    console.log(childData);
    this.setState(() => ({ childClassList: childData }));
  };
  // Target
  getTargetClassData = (e) => {
    this.setState(() => ({ classData: e }));
    let TargetSearchData = this.state.TargetSearchData;
    TargetSearchData.target_class = e;
    this.setState(() => ({ TargetSearchData: TargetSearchData }));
    let value = this.state.TargetClassList;
    value.map((item) => {
      if (item.name === e) {
        this.setState(() => ({ TargetChildClassList: item.content }));
      }
    });

    // let childData=value[e]
    // console.log(childData);
    // this.setState(()=>({childClassList:childData}))
  };
  childTargetClassChange = (e) => {
    console.log(e);
    let TargetSearchData = this.state.TargetSearchData;
    TargetSearchData.target_families = e;
    this.setState(() => ({ TargetSearchData: TargetSearchData }));
  };
  targetChange = (e) => {
    let TargetSearchData = this.state.TargetSearchData;
    TargetSearchData.target_type = e;
    this.setState(() => ({ TargetSearchData: TargetSearchData }));
  };
  getindTargetication = (e) => {
    const { value } = e.target;
    let TargetSearchData = this.state.TargetSearchData;
    TargetSearchData.indication = value;
    this.setState(() => ({ TargetSearchData: TargetSearchData }));
  };
  getTargetData2 = (e) => {
    const { value } = e.target;
    let TargetSearchData = this.state.TargetSearchData;
    TargetSearchData.target_data = value;
    this.setState(() => ({ TargetSearchData: TargetSearchData }));
  };
  get_drug_name = (e) => {
    const { value } = e.target;
    let TargetSearchData = this.state.TargetSearchData;
    TargetSearchData.drug_name = value;
    this.setState(() => ({ TargetSearchData: TargetSearchData }));
  };
  getTargetList = () => {
    let data = this.state.TargetSearchData;

    this.setState(() => ({ loading: true }));
    request
      .post('/drugbank/target_search', qs.stringify(data))
      .then((res) => {
        console.log(res);
        this.setState(() => ({ loading: false }));
        if (res.data.code === 200) {
          this.props.history.push({ pathname: '/drugbank/SearchList', search: qs.stringify(data) });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  onChangeCheckbox = (e) => {
    console.log(e);
    let TargetSearchData = this.state.TargetSearchData;
    TargetSearchData.select_status = e;
    this.setState(() => ({ TargetSearchData: TargetSearchData }));
    console.log(this.state.TargetSearchData);
  };
  handleChange = (e) => {
    console.log(e);
    this.setState(() => ({ select_db: e }));
    if (e != 'Ligands') {
      this.setState(() => ({ data: '' }));
    }
  };
  childClassChange = (e) => {
    console.log(e);
    let searchData = this.state.searchData;
    searchData.target_families = e;
    this.setState(() => ({ searchData: searchData }));
  };
  getClassData = (e) => {
    console.log(e);
    this.setState(() => ({ classData: e }));
    let searchData = this.state.searchData;
    searchData.target_class = e;
    this.setState(() => ({ searchData: searchData }));
    console.log(this.state.searchData);
    let value = this.state.allClassList;
    let childData = value[e];
    console.log(childData);
    this.setState(() => ({ childClassList: childData }));
  };
  targetChange = (e) => {
    let searchData = this.state.searchData;
    searchData.target_type = e;
    this.setState(() => ({ searchData: searchData }));
  };
  logSmiles = (e) => {
    let searchData = this.state.searchData;
    searchData.drugs_data = e;
    this.setState(() => ({ searchData: searchData }));
    // this.setState(()=>({data:e }))
  };
  componentDidMount() {
    // this.getList()
    this.getSelectList();
    this.getTargetSelectList();
  }
  getSelectList = () => {
    request
      .get('/kinase/target_class/drug')
      .then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          console.log(res.data.data);

          this.setState({
            classList: Object.keys(res.data.data),
            allClassList: res.data.data,
          });
          console.log(this.state);
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  getTargetSelectList = () => {
    localStorage.getItem('token') &&
      request
        .get('/kinase/target_class/target')
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            console.log(res.data.data);

            this.setState({
              TargetClassList: res.data.data,
              TargetAllClassList: res.data.data,
            });
            console.log(this.state);
          } else {
            message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
        });
  };
  getValue = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.drugs_data = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getindication = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.indication = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getTargetData = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.target_data = value;
    this.setState(() => ({ searchData: searchData }));
  };

  onChangeRadio = (e) => {
    console.log(e.target.value);
    let value = e.target.value;
    let searchData = this.state.searchData;
    searchData.pdb_status = value;
    this.setState({
      searchData: searchData,
    });
  };
  onChangeRadio2 = (e) => {
    let value = e.target.value;
    let TargetSearchData = this.state.TargetSearchData;
    TargetSearchData.pdb_status = value;
    this.setState({
      TargetSearchData: TargetSearchData,
    });
  };
  onChangeRadio3 = (e) => {
    let value = e.target.value;
    let ligandSearchData = this.state.ligandSearchData;
    ligandSearchData.pdb_status = value;
    this.setState({
      ligandSearchData: ligandSearchData,
    });
  };
  getList = () => {
    let data = this.state.searchData;
    request
      .post('/ligand_search', qs.stringify(data))
      .then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data) });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  getDrugsList = () => {
    let data = this.state.searchData;
    this.setState(() => ({ loading: true }));
    request
      .post('/drugbank/drug_search', qs.stringify(data))
      .then((res) => {
        console.log(res);
        this.setState(() => ({ loading: false }));
        if (res.data.code === 200) {
          this.props.history.push({ pathname: '/drugbank/SearchList', search: qs.stringify(data) });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  getDraw = () => {
    this.setState(() => ({ draw: !this.state.draw }));
  };
  compoundChange = (e) => {
    console.log(e);
    let searchData = this.state.searchData;
    searchData.drugs_type = e;
    this.setState(() => ({ searchData: searchData }));
    console.log(this.state.searchData);
  };
  callback = (e) => {
    console.log(e);
    let searchData = this.state.searchData;
    searchData.name = e;
    this.setState(() => ({ searchData: searchData }));
    console.log(this.state.searchData);
  };
  getJsme = () => {
    console.log(1);
  };
  // getTargetList=()=>{
  //   this.props.history.push({ pathname: '/home/TargetDetails'})
  // }
  // getOne(e){
  //   console.log(e);
  //   const {dataid,datatype}=e
  //   let data={
  //     dataid,
  //     datatype
  //   }
  //   console.log(data);
  //   this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})
  // }

  render() {
    const { select_db, data, data_type, optionsList, draw, SelectList, targetList, classList, classData, childClassList, compoundList, TargetClassList, TargetChildClassList } = this.state;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    };
    const formTailLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12, offset: 8 },
    };
    const formTailLayout2 = {
      labelCol: { span: 8 },
      wrapperCol: { span: 13, offset: 8 },
    };
    return (
      <div className='home'>
        <div className='home-div'>
          {/* <LogoTitlte></LogoTitlte> */}
          <Tabs onChange={this.callback} type='card'>
            <TabPane tab='Drug' key='Drug'>
              <div className='top-div'>
                <div>
                  <Form layout='horizontal'>
                    <Form.Item label='直接查询药物' {...formItemLayout}>
                      {/* <Select  value={this.state.searchData.drugs_type} style={{ width: 250 }} size="large" onChange={this.compoundChange}>
                      {
                        compoundList.map(
                          (item,index)=>{
                            return(
                              <Option key={index} value={item}>{item}</Option>
                            )
                           
                          }
                        )
                      }
                  </Select> */}
                      <Input placeholder='请输入药物名称、Smiles' style={{ width: 250 }} size='large' onChange={this.getValue} value={this.state.searchData.drugs_data} />
                    </Form.Item>
                    <Form.Item label='' {...formTailLayout}>
                      <Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
                        画结构
                      </Button>
                      <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
                        <Jsme height='500px' width='700px' options='oldlook,star' onChange={this.logSmiles} />
                      </div>
                    </Form.Item>
                    <Form.Item label='通过PDB筛选药物' {...formItemLayout}>
                      <Radio.Group onChange={this.onChangeRadio} value={this.state.searchData.pdb_status}>
                        <Radio value={0}>不筛选</Radio>
                        <Radio value={2}>筛选有PDB的药物</Radio>
                      </Radio.Group>
                    </Form.Item>
                    <Form.Item label='利用target查询化合物' {...formItemLayout}>
                      <Input placeholder='请输入target name、uniprot id' style={{ width: 250 }} size='large' onChange={this.getTargetData} value={this.state.searchData.target_data} />
                    </Form.Item>
                    <Form.Item label='利用Indication查询药物' {...formItemLayout}>
                      <Input placeholder='请输入indication' style={{ width: 250 }} size='large' onChange={this.getindication} value={this.state.searchData.indication} />
                      <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getDrugsList}>
                        Search
                      </Button>
                    </Form.Item>
                    <Form.Item label='Tips' {...formTailLayout2}>
                      <div className='Tips-div'>
                        <div>1.本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。</div>
                        <div>2.您可以直接检索药物名称，精准搜索您所需要的药物。您也可以试着画出您希望查询的分子片段，以检索包含这些片段的药物分子。</div>
                        <div>3.您也可以通过药物作用的靶点模糊搜索药物，选择您感兴趣的单个靶点或者一类靶点，查看相关药物分子。</div>
                        <div>4.如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“筛选有PDB的药物”选项，检索符合要求的药物分子。</div>
                        <div>5.使用药物的适应症作为检索关键词，可以检索出与病症相关的药物分子。</div>
                      </div>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </TabPane>

            <TabPane tab='Target' key='Target'>
              <div className='top-div'>
                <div>
                  <Form layout='horizontal'>
                    <Form.Item label='直接查询target' {...formItemLayout}>
                      {/* <Select  value={this.state.TargetSearchData.target_type} style={{ width: 250 }} size="large" onChange={this.targetChange}>
                      {
                        targetList.map(
                          (item,index)=>{
                            return(
                              <Option key={index} value={item}>{item}</Option>
                            )
                           
                          }
                        )
                      }
                  </Select> */}
                      <Input placeholder='请输入target name、uniprot id' style={{ width: 250 }} size='large' onChange={this.getTargetData2} value={this.state.TargetSearchData.target_data} />
                    </Form.Item>
                    <Form.Item label='通过PDB筛选target' {...formItemLayout}>
                      <Radio.Group onChange={this.onChangeRadio2} value={this.state.TargetSearchData.pdb_status}>
                        <Radio value={0}>不筛选</Radio>
                        <Radio value={2}>筛选有PDB的target</Radio>
                      </Radio.Group>
                    </Form.Item>
                    <Form.Item label='' {...formTailLayout2}>
                      <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getTargetList}>
                        Search
                      </Button>
                    </Form.Item>
                    <Form.Item label='Tips' {...formTailLayout2}>
                      <div className='Tips-div'>
                        <div>1. 本页面提供有药物关系的靶点数据检索功能。</div>
                        <div>2. 您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。</div>
                        <div>3. 如果您对靶点的结晶结构感兴趣，也可以勾选“筛选有PDB的target”选项，检索有结晶结构的靶点。</div>
                      </div>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </TabPane>
            <TabPane tab='Indication' key='Indication'>
              <div className='top-div'>
                <div>
                  <Form layout='horizontal'>
                    <Form.Item label='输入适应症进行检索' {...formItemLayout}>
                      <Input placeholder='请输入适应症' style={{ width: 250 }} size='large' onChange={this.getIndicationValue} value={this.state.IndicationSearchData.indication} />
                      <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getIndicationList}>
                        Search
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    );
  }
}

export default Home;
