import React from 'react';
import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col, Card } 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;
const { Meta } = Card;
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: [],
    list: [
      {
        name: 'general search',
        state: true,
        searchType: 1,
      },
      {
        name: 'cdr search',
        state: false,
        searchType: 2,
      },
    ],
  };
  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)));
    this.setState({ loading: true });
    request
      .get('/common/codes')
      .then((res) => {
        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/StructureSearch',
      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);
  };
  getListOne = (e) => {
    console.log(1111);
    let newList = this.state.list;
    console.log(e);
    newList.forEach((item, index) => {
      item.state = false;
      if (e === index) {
        item.state = true;
      }
    });
    this.setState({
      list: newList,
    });
  };

  render() {
    const { list } = 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'>
        <LogoTitlte />
        <div className='home-div'>
          <div className='top-div'>
            {/* <Tabs onChange={this.callback} type="card">
              <TabPane tab="search" key="1">
              <Button type="primary" onClick={this.getList} >结构搜索</Button>
              </TabPane>
              <TabPane tab="tools" key="2">
              <Button type="primary">docking retrosynthesis</Button>
              </TabPane>
            </Tabs> */}

            <div className='home-top-div'>
              <div className='left-div'>
                {list.map((item, index) => {
                  // return (
                  //   <Button
                  //     type={item.state ? "primary" : ""}
                  //     size="large"
                  //     shape="round"
                  //     onClick={() => this.getListOne(index)}
                  //     key={index}
                  //   >
                  //     {item.name}
                  //   </Button>
                  // );
                })}
              </div>
              <div className='right-div'>
                {list[0].state && (
                  <Button type='primary' onClick={this.getList}>
                    结构搜索
                  </Button>
                )}
                {list[1].state && <Button type='primary'>docking retrosynthesis</Button>}
              </div>
            </div>
          </div>
        </div>
        <div className='cardLIst'>
          <Card hoverable style={{ width: 240 }} cover={<img alt='example' src='http://52.83.169.190:3003/images/soluImg2.png' />}>
            <Meta title='模块' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean' />
          </Card>
          <Card hoverable style={{ width: 240 }} cover={<img alt='example' src='http://52.83.169.190:3003/images/soluImg2.png' />}>
            <Meta title='模块' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean' />
          </Card>
          <Card hoverable style={{ width: 240 }} cover={<img alt='example' src='http://52.83.169.190:3003/images/soluImg2.png' />}>
            <Meta title='模块' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean' />
          </Card>
        </div>
      </div>
    );
  }
}

export default Home;
