import React, { Component } from "react";
import { Jsme } from "jsme-react";
import {
  Card,
  PageHeader,
  Pagination,
  Tabs,
  Spin,
  message,
  Modal,
  Tag,
} from "antd";
import Molstar from "molstar-react";
import request from "../../../utils/request";
import qs from "qs";
import "./index.css";
const { TabPane } = Tabs;

export default class SearchList extends Component {
  state = {
    smilesList: [{}, {}, {}],
    CDRList: [],
    EpitopeList: [],
    visible: false,
    pdbId: "6f6s",
    total_num: 0,
    searchData: qs.parse(this.props.location.search.slice(1)),
    name: "Summary",
  };
  getPdid(e) {
    let data = {
      dataid: e,
      defaultActiveKey: "Antibody",
    };

    this.props.history.push({
      pathname: "/home/SearchDetails",
      search: qs.stringify(data),
    });
  }
  clinicalIndicationPdid(e) {
    let data = {
      dataid: e,
      defaultActiveKey: "ClinicalIndication",
    };

    this.props.history.push({
      pathname: "/home/SearchDetails",
      search: qs.stringify(data),
    });
  }
  TargetPdid(e) {
    let data = {
      pdbCode: e,
    };

    this.props.history.push({
      pathname: "/home/SearchDetails",
      search: qs.stringify(data),
    });
  }
  onShowSizeChange = (current, pageSize) => {
    let searchData = this.state.searchData;

    if (searchData.searchType == 1) {
      searchData.generalSearchDTO.pageNumber = current;
      searchData.generalSearchDTO.pageSize = pageSize;
      this.setState({
        searchData,
      });
      this.getSummaryList();
      return;
    }
    if (searchData.searchType == 2) {
      searchData.cdrSearchDTO.pageNumber = current;
      searchData.cdrSearchDTO.pageSize = pageSize;
      this.setState({
        searchData,
      });
      this.getSummaryList();
      return;
    }
    if (searchData.searchType == 3) {
      searchData.sequenceSearchDTO.pageNumber = current;
      searchData.sequenceSearchDTO.pageSize = pageSize;
      this.setState({
        searchData,
      });
      this.getSummaryList();
      return;
    }
  };
  onChange = (current, pageSize) => {
    let searchData = this.state.searchData;

    if (searchData.searchType == 1) {
      searchData.generalSearchDTO.pageNumber = current;
      searchData.generalSearchDTO.pageSize = pageSize;
      this.setState({
        searchData,
      });
      this.getSummaryList();
      return;
    }
    if (searchData.searchType == 2) {
      searchData.cdrSearchDTO.pageNumber = current;
      searchData.cdrSearchDTO.pageSize = pageSize;
      this.setState({
        searchData,
      });
      this.getSummaryList();
      return;
    }
    if (searchData.searchType == 3) {
      searchData.sequenceSearchDTO.pageNumber = current;
      searchData.sequenceSearchDTO.pageSize = pageSize;
      this.setState({
        searchData,
      });
      this.getSummaryList();
      return;
    }
  };
  // getPdb(e){
  //   console.log(e);
  //   this.setState({visible: true})
  //   this.setState({pdbId: e})

  // }
  getPdb = (e) => {
    let data = {
      PdbId: e,
    };
    this.props.history.push({
      pathname: "/home/MolstarView",
      search: qs.stringify(data),
    });
  };
  componentDidMount() {
    console.log(qs.parse(this.props.location.search.slice(1)));
    this.getSummaryList();
    // if (this.state.smilesData.name==='Drugs') {
    //   this.getList()
    // }
    // if (this.state.smilesData.name==='Target') {
    //   this.getTargetList()
    // }
  }

  getSummaryList() {
    this.setState({ loading: true });
    request
      .post("/searchstruct/pdbpage", this.state.searchData)
      .then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.setState({ smilesList: res.data.result.rows });
          this.setState({ total_num: Number(res.data.result.totalCount) });

          this.setState({ loading: false });
        } else {
          message.error(res.data.message);
          this.props.history.go(-1);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  }
  callback = (e) => {
    console.log(e);
    this.setState({ name: e });
    if (e === "Summary") {
      this.getSummaryList();
      return;
    }
    if (e === "CDR") {
      this.getCDRList();
      return;
    }
    if (e === "Epitope") {
      this.getEpitopeList();
      return;
    }
  };
  getOne(e) {
    console.log(e);
    const { dataid, datatype } = e;
    let data = {
      dataid,
      datatype,
    };

    if (this.state.smilesData.name === "Drugs") {
      this.props.history.push({
        pathname: "/home/SearchDetails",
        search: qs.stringify(data),
      });
    }
    if (this.state.smilesData.name === "Target") {
      this.props.history.push({
        pathname: "/home/TargetDetails",
        search: qs.stringify(data),
      });
    }
  }

  render() {
    const {
      smilesList,
      loading,
      EpitopeList,
      CDRList,
      visible,
      pdbId,
      total_num,
      smilesData,
    } = this.state;

    const SummaryList = smilesList.map((item, index) => {
      console.log(item);
      return (
        <Card
          loading={loading}
          hoverable
          extra={<a onClick={() => this.getOne(item)}>{item.name}</a>}
          style={{ width: "100%", marginBottom: "20px" }}
          key={index}
        >
          <div
            className="list-div-one"
            onClick={() => this.TargetPdid(item.pdbCode)}
          >
            <div
              className="list-div-left"
              onClick={() => this.getPdid(item.id)}
            >
              {item.antibodyName}
            </div>
            <div className="list-div-right">
              <div>
                <span style={{ color: "blue" }}>{item.pdbCode}</span>
              </div>
              <div>
                <span>{item.compound}</span>
                {/* {item.compound} */}
              </div>
              <div>
                <span> Organism：</span>
                {item.organism}
              </div>
              <div>
                <span> Resolution:：</span>
                {item.resolution}
              </div>
              <div>
                <span>Method:</span>
                {item.method}
              </div>
              <div>
                <span> Released date ：</span>
                {item.releasedDate}
              </div>
            </div>
            {/* <div className='btn-list'>
            </div> */}

            <div />
          </div>
        </Card>
      );
    });
    return (
      <div className="search-div">
        <Modal
          footer={null}
          closable={false}
          width={850}
          visible={visible}
          wrapClassName="vertical-center-modal"
          onCancel={() => this.setState({ visible: false })}
        >
          <div className="Molstar-div">
            <Molstar pdbId={this.state.pdbId} />
          </div>
        </Modal>
        <Spin tip="Loading..." size="large" spinning={this.state.loading}>
          <PageHeader
            style={{
              border: "1px solid rgb(235, 237, 240)",
            }}
            onBack={() => this.props.history.go(-1)}
            title="返回"
          />
          {SummaryList}
          <Pagination
            showSizeChanger
            onShowSizeChange={this.onShowSizeChange}
            onChange={this.onChange}
            total={total_num}
          />
        </Spin>
      </div>
    );
  }
}
