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 "./index.css";
const { TabPane } = Tabs;
const { Option } = Select;
const { Meta } = Card;

class Home extends React.Component {
  state = {
    // list: qs.parse(this.props.location.search.slice(1))
    list: [
    
    ]
     
  };
  componentDidMount() {
    if (qs.parse(this.props.location.search.slice(1))) {
      let list=qs.parse(this.props.location.search.slice(1))
      var arr = Array.from(Object.values(list),x=>x);
      this.setState({
        list:arr
      })
    }
  
  }
  getList=(e)=>{
     this.setState({
        list:e
      })

  }
  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,
    });
  };
  getOne=(e)=>{
      window.open(e)
  }

  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="Docking-div">
        <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>welcome to our platform</div>
              </div>
            </Card>
          </div>

          <div className="home-center">
            <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="right-div" >
            {list.map((item, index) => {
                return (
                  <a
                    className={item.state ? "" : "displaydiv"}
                    size="large"
                    onClick={() => this.getOne(item.url)}
                    key={index}
                  >
                   欢迎进入{item.name}平台 
                  </a>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;
