import React, { Component } from "react";
import { Jsme } from "jsme-react";
import qs from "qs";
import request from "../../utils/request";
import { Input, Button, Modal, Table, message, Pagination } from "antd";
import Molstar from "molstar-react";
import "./index.css";

export default class MolecularSearch extends Component {
  state = {
    loading: false,
    smilesData: {
      smile: "",
      page_size: 10,
      page: 1,
    },
    visible: false,
    pdbId: "1C8L",
    total_num: 0,
    smilesList: [],
  };
  logSmiles = (e) => {
    let smilesData = this.state.smilesData;
    smilesData.smile = e;
    this.setState(() => ({ smilesData: smilesData }));
    // this.setState(()=>({data:e }))
  };
  getValue = (e) => {
    const { value } = e.target;
    let smilesData = this.state.smilesData;
    smilesData.smile = value;
    this.setState(() => ({ smilesData: smilesData }));
  };
  onShowSizeChange = (current, pageSize) => {
    let smilesData = this.state.smilesData;
    smilesData.page = current;
    smilesData.page_size = pageSize;
    this.setState({
      smilesData,
    });
    this.getList();
  };
  onChange = (current, pageSize) => {
    let smilesData = this.state.smilesData;
    smilesData.page = current;
    smilesData.page_size = pageSize;
    this.setState({
      smilesData,
    });
    this.getList();
  };

  getList = () => {
    this.setState({ loading: true });
    request
      .post("/openeye_search", qs.stringify(this.state.smilesData))
      .then((res) => {
        if (res.data.code === 200) {
          console.log(res.data.data);
          this.setState({ smilesList: res.data.data });
          this.setState({ total_num: res.data.total_num });
          this.setState({ loading: false });
        } else {
          message.error(res.data.msg);
          this.setState({ loading: false });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };
  showPdb = (e) => {
    this.setState({
      visible: true,
    });
    this.setState({
      // pdbId: "http://52.83.169.190:3004/?id="+e,
      pdbId: e,
    });
  };
  render() {
    const { visible, pdbId, total_num, smilesList } = this.state;

    const columns = [
      {
        title: "分子",
        dataIndex: "smile",
        key: "smile",
        width: 310,
        render: (smile) => (
          <span>
            {
              <Jsme
                height="150px"
                width="300px"
                options="depict,useopenchemlib"
                smiles={smile}
              />
            }
          </span>
        ),
      },
      {
        title: "PDB",
        dataIndex: "pdb",
        key: "pdb",
        render: (pdb) => (
          <span>
            {pdb.map((item, index) => {
              return (
                <Button
                  style={{ marginRight: "10px" }}
                  type="primary"
                  key={index}
                  onClick={() => this.showPdb(item)}
                >
                  {item}
                </Button>
              );
            })}
          </span>
        ),
      },
    ];
    return (
      <div className="MolecularSearch-div">
        <Modal
          footer={null}
          closable={false}
          width={850}
          visible={visible}
          wrapClassName="vertical-center-modal"
          onCancel={() => this.setState({ visible: false })}
        >
          <div className="Molstar-div">
            {/* <iframe
              src={pdbId}
              height={"100%"}
              width={"810px"}
              name="iframe-video"
            /> */}
             <Molstar pdbId={this.state.pdbId} />
          </div>
        </Modal>
        <div className="left-div">
          <div className="input-div">
            <Input
              placeholder="输入分子"
              size="large"
              onChange={this.getValue}
              value={this.state.smilesData.smile}
            />
          </div>
          <Button
            type="primary"
            style={{ marginLeft: 50, width: 150 }}
            size="large"
            loading={this.state.loading}
            onClick={this.getList}
          >
            Search
          </Button>
        </div>
        <Jsme
          height="300px"
          width="500px"
          options="oldlook,star"
          onChange={this.logSmiles}
        />
        {smilesList.length != 0 && (
          <div className="list-div">
            <Table
              dataSource={smilesList}
              columns={columns}
              pagination={false}
              style={{ backgroundColor: "#fff" }}
            />
            <Pagination
              showSizeChanger
              onShowSizeChange={this.onShowSizeChange}
              onChange={this.onChange}
              total={total_num}
            />
          </div>
        )}
      </div>
    );
  }
}
