import React, { Component } from "react";
import {
  Pagination,
  message,
  Button,
  Tabs,
  Spin,
  Table,
  Tag,
  Typography,
} from "antd";
import { request } from "../../../utils/request";
import "./index.css";
import qs from "qs";
const { Title } = Typography;
export default class IndicationDetails extends Component {
  state = {
    IndicationList: [],
    smilesData: qs.parse(this.props.location.search.slice(1)),
    total_num: 0,
  };
  componentDidMount() {
    this.getDetails();
  }
  getDetails() {
    // this.setState({loading:true})
    this.setState({
      loading: true,
    });
    request
      .post("/drugbank/indication_search", qs.stringify(this.state.smilesData))
      .then((res) => {
        this.setState({
          loading: false,
        });
        if (res.data.code === 200) {
          this.setState({
            IndicationList: res.data.data,
          });
          this.setState({
            total_num: res.data.total_num,
          });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  }
  onShowSizeChange = (current, pageSize) => {
    let smilesData = this.state.smilesData;
    smilesData.page = current;
    smilesData.page_size = pageSize;
    this.setState({
      smilesData,
    });

    this.getDetails();
  };
  onChange = (current, pageSize) => {
    let smilesData = this.state.smilesData;
    smilesData.page = current;
    smilesData.page_size = pageSize;
    this.setState({
      smilesData,
    });

    this.getDetails();
  };
  getOne(e) {
    console.log(e);
    const { dataid, datatype } = e;
    let data = {
      dataid,
      datatype,
    };

    this.props.history.push({
      pathname: "/drugbank/SearchDetails",
      search: qs.stringify(data),
    });
  }
  getOne2(e) {
    console.log(e);
    const { dataid, datatype } = e;
    let data = {
      dataid,
      datatype,
    };

    this.props.history.push({
      pathname: "/drugbank/TargetDetails",
      search: qs.stringify(data),
    });
  }
  getReferences = (e) => {
    window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`);
  };

  render() {
    const columns = [
      {
        title: "indicationName",
        dataIndex: "indication_name",
        key: "indication_name",
      },
      {
        title: "Drug",
        dataIndex: "Drug",
        key: "Drug",
        render: (Drug) => (
          <span>
            {" "}
            {
              <Tag
                color="blue"
                onClick={() => {
                  this.getOne(Drug);
                }}
              >
                {" "}
                {Drug.name}{" "}
              </Tag>
            }{" "}
          </span>
        ),
      },
      {
        title: "Target",
        dataIndex: "Target",
        key: "Target",
        render: (Target) => (
          <span>
            {Target.map((item) => {
              return (
                <Tag
                  color="blue"
                  key={item}
                  onClick={() => {
                    this.getOne2(item);
                  }}
                >
                  {" "}
                  {item.name}{" "}
                </Tag>
              );
            })}{" "}
          </span>
        ),
      },

      {
        title: "Phase",
        dataIndex: "Phase",
        key: "Phase",
      },
      {
        title: "Status",
        dataIndex: "Status",
        key: "Status",
      },
      // {
      //   title: 'Year of approval',
      //   dataIndex: 'Year_of_Approval',
      //   key: 'Year_of_Approval',
      // },
      // {
      //   title: 'Mechanism of Action',
      //   dataIndex: 'Mechanism_of_Action',
      //   key: 'Mechanism_of_Action',
      // },
      {
        title: "References",
        dataIndex: "References",
        render: (References) => (
          <span>
            {" "}
            {References.map((item) => {
              return (
                <Tag
                  color="blue"
                  key={item}
                  onClick={() => {
                    this.getReferences(item);
                  }}
                >
                  {" "}
                  {item}{" "}
                </Tag>
              );
            })}{" "}
          </span>
        ),
      },
    ];
    const { IndicationList, total_num } = this.state;
    return (
      <div className="IndicationDetails-div">
        <Title> {IndicationList.name} </Title>{" "}
        <Table
          bordered
          rowKey="item"
          dataSource={IndicationList}
          pagination={false}
          columns={columns}
          loading={this.state.loading}
        />{" "}
        <div className="bottom-div">
          <Pagination
            showSizeChanger
            onShowSizeChange={this.onShowSizeChange}
            onChange={this.onChange}
            total={total_num}
          />
        </div>
      </div>
    );
  }
}
