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;
