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('/gpcr/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: '/home/SearchDetails', search: qs.stringify(data) })



  }
  getOne2 (e) {
    console.log(e)
    const { dataid, datatype } = e
    let data = {
      dataid,
      datatype
    }




    this.props.history.push({ pathname: '/home/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>
    )
  }
}
