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 });
    request
      .post('/kinase/indication_search', 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: '/kinase/SearchDetails', search: qs.stringify(data) });
  }
  getOne2(e) {
    console.log(e);
    const { dataid, datatype } = e;
    let data = {
      dataid,
      datatype,
    };

    this.props.history.push({ pathname: '/kinase/TargetDetails', search: qs.stringify(data) });
  }
  getReferences = (e) => {
    window.open(e);
  };

  render() {
    const columns = [
      {
        title: 'indicationName',
        dataIndex: 'indication_name',
        key: 'indication_name',
      },
      // {
      //   title: 'Synonyms',
      //   dataIndex: 'Synonyms',
      //   key: 'Synonyms',
      //   render: (Synonyms) => (
      //     <span>
      //       {Synonyms != "Null" && Synonyms.map((item, index) => {
      //         return <span>{item.toUpperCase()},</span>
      //       })}
      //     </span>
      //   ),
      // },
      {
        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>
      //       {
      //         <Tag color="blue" onClick={() => { this.getOne2(Target) }} >
      //           {(Target.name)}
      //         </Tag>

      //       }
      //     </span>
      //   ),
      // },
      {
        title: 'Phase',
        dataIndex: 'Phase',
        key: 'Phase',
      },
      {
        title: 'Status',
        dataIndex: 'Status',
        key: 'Status',
      },
      {
        title: 'References',
        dataIndex: 'References',
        render: (References) => (
          <span>
            {References.map((item) => {
              return (
                <Tag
                  color='blue'
                  key={item}
                  onClick={() => {
                    this.getReferences(item);
                  }}
                >
                  {item.toUpperCase()}
                </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} />
        <div className='bottom-div'>
          <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num} />
        </div>
      </div>
    );
  }
}
