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: {
      antibodyName: '',
      species: '',
      antibodyType: '',
      antigenName: '',
      clinicalIndication: '',
      companies: '',
      status: '',
      pageNum: 1,
      pageSize: 10,
    },
    disabled: true,
    loading: false,
    SelectList: [],
    AntibodyTypeList: [],
    StatusList: [],
    draw: false,
    classList: [],
    classData: 'All Class',
    allClassList: {},
    childClassList: [],
  };
  componentDidMount() {
    // this.getList()
    // this.getSelectList()
    this.getClassList();
  }
  getantibodyName = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.antibodyName = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getAntigenName = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.antigenName = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getClinicalIndication = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.clinicalIndication = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getCompanies = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.companies = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getSpecies = (e) => {
    let searchData = this.state.searchData;
    searchData.species = e;
    this.setState(() => ({ searchData: searchData }));
  };
  getAntibodyType = (e) => {
    let searchData = this.state.searchData;
    searchData.antibodyType = e;
    this.setState(() => ({ searchData: searchData }));
  };
  getStatus = (e) => {
    let searchData = this.state.searchData;
    searchData.status = e;
    this.setState(() => ({ searchData: searchData }));
  };
  getValue = (e) => {
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.antibodyName = value;
    this.setState(() => ({ searchData: searchData }));
  };
  getClassList() {
    console.log(qs.parse(this.props.location.search.slice(1)));

    localStorage.getItem('token') &&
      request
        .get('/common/codes')
        .then((res) => {
          this.setState({ loading: true });
          console.log(res);
          if (res.data.code === 0) {
            console.log(res.data.data);
            this.setState({ SelectList: res.data.data.species });
            this.setState({ AntibodyTypeList: res.data.data.antibodyType });
            this.setState({ StatusList: res.data.data.status });
            this.setState({ loading: false });
          } else {
            message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
        });
  }
  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,
    });
  };
  SearchIndication = () => {
    let data = {
      clinicalIndication: this.state.searchData.clinicalIndication,
    };
    this.props.history.push({ pathname: '/home/AutoimmuneDiseases', search: qs.stringify(data) });
  };

  getList = () => {
    let data = this.state.searchData;
    this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data) });
  };
  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);
  };

  render() {
    const { AntibodyTypeList, StatusList, SelectList, targetList, classList, classData, childClassList, compoundList, searchData } = 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> */}

          <div className='top-div'>
            <div>
              <Form layout='horizontal'>
                <Form.Item label='Antibody name' {...formItemLayout}>
                  <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getantibodyName} value={this.state.searchData.antibodyName} />
                </Form.Item>
                <Form.Item label='Species' {...formItemLayout}>
                  <Select value={this.state.searchData.species} style={{ width: 250 }} size='large' onChange={this.getSpecies}>
                    {SelectList.map((item, index) => {
                      return (
                        <Option key={index} value={item}>
                          {item}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
                <Form.Item label='Antibody type' {...formItemLayout}>
                  <Select value={this.state.searchData.antibodyType} style={{ width: 250 }} size='large' onChange={this.getAntibodyType}>
                    {AntibodyTypeList.map((item, index) => {
                      return (
                        <Option key={index} value={item}>
                          {item}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
                <Form.Item label='Antigen name' {...formItemLayout}>
                  <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getAntigenName} value={this.state.searchData.antigenName} />
                </Form.Item>
                <Form.Item label='Clinical indication' {...formItemLayout}>
                  <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getClinicalIndication} value={this.state.searchData.clinicalIndication} />
                  <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.SearchIndication}>
                    SearchIndication
                  </Button>
                </Form.Item>
                <Form.Item label='Company' {...formItemLayout}>
                  <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getCompanies} value={this.state.searchData.companies} />
                </Form.Item>
                <Form.Item label='Status' {...formItemLayout}>
                  <Select value={this.state.searchData.status} style={{ width: 250 }} size='large' onChange={this.getStatus}>
                    {StatusList.map((item, index) => {
                      return (
                        <Option key={index} value={item}>
                          {item}
                        </Option>
                      );
                    })}
                  </Select>
                  <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getList}>
                    Search
                  </Button>
                </Form.Item>
                <Form.Item label='' {...formItemLayout} />
                {/* <Form.Item label="Tips"  {...formTailLayout2}>
                  <div className='Tips-div'>
                    <div>1.  本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。</div>
                    <div>2.  您可以直接检索药物名称，精准搜索您所需要的药物。您也可以试着画出您希望查询的分子片段，以检索包含这些片段的药物分子。</div>
                    <div> 3.  您也可以通过药物作用的靶点模糊搜索药物，选择您感兴趣的单个靶点或者一类靶点，查看相关药物分子。</div>
                    <div>4.  使用药物的适应症作为检索关键词，可以检索出与病症相关的药物分子。</div>
                    <div>5.  如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“有GPCR相关PDB结构”或者“有PDB结构”选项，检索符合要求的药物分子。</div>
               </div>
                </Form.Item> */}
              </Form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;
