import React from 'react'
import {
  Form,
  Input,
  Button,
  Select,
  Tabs,
  message,
  Radio,
  Checkbox,
  Row,
  Col,
} from 'antd'
import LogoTitlte from '../../components/LogoTitlte/index'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import request from '../../utils/request'
import './style.css'
const { TabPane } = Tabs
const { Option } = Select
class Home extends React.Component {
  state = {
    select_db: 'Ligands',
    data: '',
    page: 1,
    page_size: 10,
    data_type: 'smile',
    target_class: '',
    // target_families:'',
    searchData: {
      name: 'Drug',
      drugs_data: '',
      // drugs_type :'DrugName',
      target_class: 'All Class',
      target_data: '',
      // target_type :'TargetName',
      target_families: '',
      indication: '',
      pdb_status: 0,
      page: 1,
      page_size: 10,
    },

    TargetSearchData: {
      name: 'Target',
      target_class: 'All Class',
      target_data: '',
      // target_type :'TargetName',
      target_families: '',
      indication: '',
      select_status: [],
      drug_name: '',
      page: 1,
      page_size: 10,
    },
    ligandSearchData: {
      name: 'Ligand',
      ligand_data: '',
      name: 'Ligand',
      target_class: 'All Class',
      target_data: '',
      // target_type :'TargetName',
      target_families: '',
      page: 1,
      page_size: 10,
    },
    IndicationSearchData: {
      name: 'Indication',
      indication: '',
      page: 1,
      page_size: 10,
    },
    MutationSearchData: {
      name: 'Mutation',
      chembl_id: '',
      target_class: 'All Class',
      target_data: '',
      target_families: '',
      idselect_data: [],
      page: 1,
      page_size: 10,
    },
    disabled: true,
    loading: false,
    SelectList: [],
    draw: false,
    classList: [],
    classData: 'All Class',
    allClassList: {},
    childClassList: [],
    TargetClassList: [],
    TargetAllClassList: [],
    TargetChildClassList: [],
    compoundList: ['DrugName', 'Smiles'],
    targetList: ['TargetName', 'UniprotId'],
    optionsList: [
      { label: '查询drug相关靶点', value: 1 },
      { label: '查询ligand相关靶点', value: 2, disabled: false },
      { label: '是否有PDB结构', value: 3 },
    ],
  }
  // Mutation
  CheckChange = (e) => {
    console.log(e)
    let MutationSearchData = this.state.MutationSearchData
    MutationSearchData.idselect_data = e
    this.setState(() => ({ MutationSearchData: MutationSearchData }))
  }
  onAllChange = (e) => {
    if (e.target.checked) {
      let MutationSearchData = this.state.MutationSearchData
      let all_idselect_data = [
        'TM1',
        'TM4',
        'TM7',
        'ICL3',
        'ECL3',
        'N-Term',
        'ECL1',
        'ICL1',
        'TM5',
        'TM2',
        'TM3',
        'TM6',
        'ICL2',
        'ECL2',
        'C-Term',
      ]
      MutationSearchData.idselect_data = all_idselect_data
      this.setState(() => ({ MutationSearchData: MutationSearchData }))
    } else {
      let MutationSearchData = this.state.MutationSearchData
      let all_idselect_data = []
      MutationSearchData.idselect_data = all_idselect_data
      this.setState(() => ({ MutationSearchData: MutationSearchData }))
    }
  }
  getMutationList = () => {
    let data = JSON.parse(JSON.stringify(this.state.MutationSearchData))
    data.idselect_data = data.idselect_data.toString()
    this.setState(() => ({ loading: true }))
    request
      .post('/gpcr/mutation_search', qs.stringify(data))
      .then((res) => {
        this.setState(() => ({ loading: false }))
        if (res.data.code === 200) {
          console.log(data)
          this.props.history.push({
            pathname: '/home/SearchList',
            search: qs.stringify(data),
          })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  childClassChange3 = (e) => {
    console.log(e)
    let MutationSearchData = this.state.MutationSearchData
    MutationSearchData.target_families = e
    this.setState(() => ({ MutationSearchData: MutationSearchData }))
  }
  getClassData3 = (e) => {
    console.log(e)
    this.setState(() => ({ classData: e }))
    let MutationSearchData = this.state.MutationSearchData
    MutationSearchData.target_class = e
    this.setState(() => ({ MutationSearchData: MutationSearchData }))
    let value = this.state.allClassList
    let childData = value[e]
    console.log(childData)
    this.setState(() => ({ childClassList: childData }))
  }
  getMutationValue = (e) => {
    const { value } = e.target
    let MutationSearchData = this.state.MutationSearchData
    MutationSearchData.target_data = value
    this.setState(() => ({ MutationSearchData: MutationSearchData }))
  }
  getChemblValue = (e) => {
    const { value } = e.target
    let MutationSearchData = this.state.MutationSearchData
    MutationSearchData.chembl_id = value
    this.setState(() => ({ MutationSearchData: MutationSearchData }))
  }
  // Indication

  getIndicationValue = (e) => {
    const { value } = e.target
    let IndicationSearchData = this.state.IndicationSearchData
    IndicationSearchData.indication = value
    this.setState(() => ({ IndicationSearchData: IndicationSearchData }))
  }
  getIndicationList = () => {
    let data = this.state.IndicationSearchData
    // data.select_status= data.select_status.toString()
    // console.log(data);
    this.setState(() => ({ loading: true }))
    request
      .post('/gpcr/indication_search', qs.stringify(data))
      .then((res) => {
        this.setState(() => ({ loading: false }))
        if (res.data.code === 200) {
          this.props.history.push({
            pathname: '/home/IndicationDetails',
            search: qs.stringify(data),
          })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }

  // ligend
  getLigendValue = (e) => {
    const { value } = e.target
    let ligandSearchData = this.state.ligandSearchData
    ligandSearchData.ligand_data = value
    this.setState(() => ({ ligandSearchData: ligandSearchData }))
  }

  logSmiles2 = (e) => {
    let ligandSearchData = this.state.ligandSearchData
    ligandSearchData.ligand_data = e
    this.setState(() => ({ ligandSearchData: ligandSearchData }))
    // this.setState(()=>({data:e }))
  }
  getLigendList = () => {
    let data = this.state.ligandSearchData
    // data.select_status= data.select_status.toString()
    // console.log(data);
    this.setState(() => ({ loading: true }))
    request
      .post('/gpcr/ligand_search', qs.stringify(data))
      .then((res) => {
        console.log(res)
        this.setState(() => ({ loading: false }))
        if (res.data.code === 200) {
          this.props.history.push({
            pathname: '/home/SearchList',
            search: qs.stringify(data),
          })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  getLigandData = (e) => {
    const { value } = e.target
    let ligandSearchData = this.state.ligandSearchData
    ligandSearchData.target_data = value
    this.setState(() => ({ ligandSearchData: ligandSearchData }))
  }
  ligandChange = (e) => {
    let ligandSearchData = this.state.ligandSearchData
    ligandSearchData.target_type = e
    this.setState(() => ({ ligandSearchData: ligandSearchData }))
  }
  childClassChange2 = (e) => {
    console.log(e)
    let ligandSearchData = this.state.ligandSearchData
    ligandSearchData.target_families = e
    this.setState(() => ({ ligandSearchData: ligandSearchData }))
  }
  getClassData2 = (e) => {
    console.log(e)
    this.setState(() => ({ classData: e }))
    let ligandSearchData = this.state.ligandSearchData
    ligandSearchData.target_class = e
    this.setState(() => ({ ligandSearchData: ligandSearchData }))
    let value = this.state.allClassList
    let childData = value[e]
    console.log(childData)
    this.setState(() => ({ childClassList: childData }))
  }
  // Target
  getTargetClassData = (e) => {
    this.setState(() => ({ classData: e }))
    let TargetSearchData = this.state.TargetSearchData
    TargetSearchData.target_class = e
    this.setState(() => ({ TargetSearchData: TargetSearchData }))
    let value = this.state.TargetClassList
    value.map((item) => {
      if (item.name === e) {
        this.setState(() => ({ TargetChildClassList: item.content }))
      }
    })

    // let childData=value[e]
    // console.log(childData);
    // this.setState(()=>({childClassList:childData}))
  }
  childTargetClassChange = (e) => {
    console.log(e)
    let TargetSearchData = this.state.TargetSearchData
    TargetSearchData.target_families = e
    this.setState(() => ({ TargetSearchData: TargetSearchData }))
  }
  targetChange = (e) => {
    let TargetSearchData = this.state.TargetSearchData
    TargetSearchData.target_type = e
    this.setState(() => ({ TargetSearchData: TargetSearchData }))
  }
  getindTargetication = (e) => {
    const { value } = e.target
    let TargetSearchData = this.state.TargetSearchData
    TargetSearchData.indication = value
    this.setState(() => ({ TargetSearchData: TargetSearchData }))
  }
  getTargetData2 = (e) => {
    const { value } = e.target
    let TargetSearchData = this.state.TargetSearchData
    TargetSearchData.target_data = value
    this.setState(() => ({ TargetSearchData: TargetSearchData }))
  }
  get_drug_name = (e) => {
    const { value } = e.target
    let TargetSearchData = this.state.TargetSearchData
    TargetSearchData.drug_name = value
    this.setState(() => ({ TargetSearchData: TargetSearchData }))
  }
  getTargetList = () => {
    let data = this.state.TargetSearchData
    data.select_status = data.select_status.toString()
    console.log(data)
    this.setState(() => ({ loading: true }))
    request
      .post('/gpcr/targets_search', qs.stringify(data))
      .then((res) => {
        console.log(res)
        this.setState(() => ({ loading: false }))
        if (res.data.code === 200) {
          this.props.history.push({
            pathname: '/home/SearchList',
            search: qs.stringify(data),
          })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }

  onChangeCheckbox = (e) => {
    console.log(e)
    let TargetSearchData = this.state.TargetSearchData
    TargetSearchData.select_status = e
    this.setState(() => ({ TargetSearchData: TargetSearchData }))
    console.log(this.state.TargetSearchData)
  }
  handleChange = (e) => {
    console.log(e)
    this.setState(() => ({ select_db: e }))
    if (e != 'Ligands') {
      this.setState(() => ({ data: '' }))
    }
  }
  childClassChange = (e) => {
    console.log(e)
    let searchData = this.state.searchData
    searchData.target_families = e
    this.setState(() => ({ searchData: searchData }))
  }
  getClassData = (e) => {
    console.log(e)
    this.setState(() => ({ classData: e }))
    let searchData = this.state.searchData
    searchData.target_class = e
    this.setState(() => ({ searchData: searchData }))
    console.log(this.state.searchData)
    let value = this.state.allClassList
    let childData = value[e]
    console.log(childData)
    this.setState(() => ({ childClassList: childData }))
  }
  targetChange = (e) => {
    let searchData = this.state.searchData
    searchData.target_type = e
    this.setState(() => ({ searchData: searchData }))
  }
  logSmiles = (e) => {
    let searchData = this.state.searchData
    searchData.drugs_data = e
    this.setState(() => ({ searchData: searchData }))
    // this.setState(()=>({data:e }))
  }
  componentDidMount () {
    // this.getList()
    this.getSelectList()
    this.getTargetSelectList()
  }
  getSelectList = () => {
    request
      .get('/gpcr/target_class/drug')
      .then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data.data)

          this.setState({
            classList: Object.keys(res.data.data),
            allClassList: res.data.data,
          })
          console.log(this.state)
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  getTargetSelectList = () => {
    request
      .get('/gpcr/target_class/target')
      .then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data.data)

          this.setState({
            TargetClassList: res.data.data,
            TargetAllClassList: res.data.data,
          })
          console.log(this.state)
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  getValue = (e) => {
    const { value } = e.target
    let searchData = this.state.searchData
    searchData.drugs_data = value
    this.setState(() => ({ searchData: searchData }))
  }
  getindication = (e) => {
    const { value } = e.target
    let searchData = this.state.searchData
    searchData.indication = value
    this.setState(() => ({ searchData: searchData }))
  }
  getTargetData = (e) => {
    const { value } = e.target
    let searchData = this.state.searchData
    searchData.target_data = value
    this.setState(() => ({ searchData: searchData }))
  }

  onChangeRadio = (e) => {
    console.log(e.target.value)
    let value = e.target.value
    let searchData = this.state.searchData
    searchData.pdb_status = value
    this.setState({
      searchData: searchData,
    })
  }
  getList = () => {
    let data = this.state.searchData
    request
      .post('/gpcr/ligand_search', qs.stringify(data))
      .then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.props.history.push({
            pathname: '/home/SearchList',
            search: qs.stringify(data),
          })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  getDrugsList = () => {
    let data = this.state.searchData
    this.setState(() => ({ loading: true }))
    request
      .post('/gpcr/drugs_search', qs.stringify(data))
      .then((res) => {
        console.log(res)
        this.setState(() => ({ loading: false }))
        if (res.data.code === 200) {
          this.props.history.push({
            pathname: '/home/SearchList',
            search: qs.stringify(data),
          })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  getDraw = () => {
    this.setState(() => ({ draw: !this.state.draw }))
  }
  compoundChange = (e) => {
    console.log(e)
    let searchData = this.state.searchData
    searchData.drugs_type = e
    this.setState(() => ({ searchData: searchData }))
    console.log(this.state.searchData)
  }
  callback = (e) => {
    console.log(e)
    let searchData = this.state.searchData
    searchData.name = e
    this.setState(() => ({ searchData: searchData }))
    console.log(this.state.searchData)
  }
  getJsme = () => {
    console.log(1)
  }
  // getTargetList=()=>{
  //   this.props.history.push({ pathname: '/home/TargetDetails'})
  // }
  // getOne(e){
  //   console.log(e);
  //   const {dataid,datatype}=e
  //   let data={
  //     dataid,
  //     datatype
  //   }
  //   console.log(data);
  //   this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})
  // }

  render () {
    const {
      select_db,
      data,
      data_type,
      optionsList,
      draw,
      SelectList,
      targetList,
      classList,
      classData,
      childClassList,
      compoundList,
      TargetClassList,
      TargetChildClassList,
    } = this.state
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    }
    const formTailLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12, offset: 8 },
    }
    const formTailLayout2 = {
      labelCol: { span: 8 },
      wrapperCol: { span: 13, offset: 8 },
    }
    return (
      <div className="home">
        <div className="home-div">
          {/* <LogoTitlte></LogoTitlte> */}
          <Tabs onChange={this.callback} type="card">
            <TabPane tab="Drug" key="Drug">
              <div className="top-div">
                <div>
                  <Form layout="horizontal">
                    <Form.Item label="请输入药物名或Smiles" {...formItemLayout}>
                      {/* <Select  value={this.state.searchData.drugs_type} style={{ width: 250 }} size="large" onChange={this.compoundChange}>
                      {
                        compoundList.map(
                          (item,index)=>{
                            return(
                              <Option key={index} value={item}>{item}</Option>
                            )
                           
                          }
                        )
                      }
                  </Select> */}
                      <Input
                        placeholder="请输入化合物"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getValue}
                        value={this.state.searchData.drugs_data}
                      />
                    </Form.Item>
                    <Form.Item label="" {...formTailLayout}>
                      <Button
                        type="primary"
                        style={{ marginRight: '50px' }}
                        onClick={this.getDraw}>
                        画结构
                      </Button>
                      <div
                        className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
                        onClick={this.getJsme}>
                        <Jsme
                          height="500px"
                          width="700px"
                          options="oldlook,star"
                          onChange={this.logSmiles}
                        />
                      </div>
                    </Form.Item>
                    <Form.Item label="使用PDB查询" {...formItemLayout}>
                      <Radio.Group
                        onChange={this.onChangeRadio}
                        value={this.state.searchData.pdb_status}>
                        <Radio value={0}>不使用</Radio>
                        <Radio value={1}>有GPCR相关PDB结构</Radio>
                        <Radio value={2}>有PDB结构</Radio>
                      </Radio.Group>
                    </Form.Item>
                    <Form.Item label="利用Target查询药物" {...formItemLayout}>
                      <Select
                        value={this.state.searchData.target_class}
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getClassData}>
                        {classList.map((item, index) => {
                          return (
                            <Option key={index} value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                      <Select
                        value={this.state.searchData.target_families}
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.childClassChange}>
                        {childClassList.map((item, index) => {
                          return (
                            <Option key={index} value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                    </Form.Item>
                    <Form.Item
                      label="请输入Target name或Uniprot id"
                      {...formItemLayout}>
                      {/* <Select  value={this.state.searchData.target_type} style={{ width: 250 }} size="large" onChange={this.targetChange}>
                      {
                        targetList.map(
                          (item,index)=>{
                            return(
                              <Option key={index} value={item}>{item}</Option>
                            )
                           
                          }
                        )
                      }
                  </Select> */}
                      <Input
                        placeholder="请输入Target"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getTargetData}
                        value={this.state.searchData.target_data}
                      />
                    </Form.Item>
                    <Form.Item
                      label="利用Indication查询药物"
                      {...formItemLayout}>
                      <Input
                        placeholder="请输入indication"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getindication}
                        value={this.state.searchData.indication}
                      />
                      <Button
                        type="primary"
                        style={{ marginLeft: 50, width: 150 }}
                        size="large"
                        loading={this.state.loading}
                        onClick={this.getDrugsList}>
                        Search
                      </Button>
                    </Form.Item>
                    <Form.Item label="Tips" {...formTailLayout2}>
                      <div className="Tips-div">
                        <div>
                          1.
                          本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。
                        </div>
                        <div>
                          2.
                          您可以直接检索药物名称，精准搜索您所需要的药物。您也可以试着画出您希望查询的分子片段，以检索包含这些片段的药物分子。
                        </div>
                        <div>
                          {' '}
                          3.
                          您也可以通过药物作用的靶点模糊搜索药物，选择您感兴趣的单个靶点或者一类靶点，查看相关药物分子。
                        </div>
                        <div>
                          4.
                          使用药物的适应症作为检索关键词，可以检索出与病症相关的药物分子。
                        </div>
                        <div>
                          5.
                          如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“有GPCR相关PDB结构”或者“有PDB结构”选项，检索符合要求的药物分子。
                        </div>
                      </div>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </TabPane>
            <TabPane tab="Target" key="Target">
              <div className="top-div">
                <div>
                  <Form layout="horizontal">
                    <Form.Item label="直接查询Target" {...formItemLayout}>
                      <Select
                        value={this.state.TargetSearchData.target_class}
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getTargetClassData}>
                        {TargetClassList.map((item, index) => {
                          return (
                            <Option key={index} value={item.name}>
                              {item.name}({item.number})
                            </Option>
                          )
                        })}
                      </Select>
                      <Select
                        value={this.state.TargetSearchData.target_families}
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.childTargetClassChange}>
                        {TargetChildClassList.map((item, index) => {
                          return (
                            <Option key={index} value={item.name}>
                              {item.name}({item.number})
                            </Option>
                          )
                        })}
                      </Select>
                    </Form.Item>
                    <Form.Item
                      label="请输入Target name或Uniprot id"
                      {...formItemLayout}>
                      {/* <Select  value={this.state.TargetSearchData.target_type} style={{ width: 250 }} size="large" onChange={this.targetChange}>
                      {
                        targetList.map(
                          (item,index)=>{
                            return(
                              <Option key={index} value={item}>{item}</Option>
                            )
                           
                          }
                        )
                      }
                  </Select> */}
                      <Input
                        placeholder="请输入Target"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getTargetData2}
                        value={this.state.TargetSearchData.target_data}
                      />
                    </Form.Item>
                    <Form.Item label="查询配体相关Target" {...formItemLayout}>
                      <Checkbox.Group
                        style={{
                          width: '100%',
                        }}
                        onChange={this.onChangeCheckbox}>
                        <Row>
                          <Col span={8}>
                            <Checkbox value={1}>查询drug相关靶点</Checkbox>
                          </Col>
                          {/* <Col span={8}>
                          <Checkbox disabled value={2}>查询ligand相关靶点</Checkbox>
                        </Col> */}
                          <Col span={8}>
                            <Checkbox value={3}>是否有PDB结构</Checkbox>
                          </Col>
                        </Row>
                      </Checkbox.Group>
                    </Form.Item>
                    <Form.Item label="请输入药名" {...formItemLayout}>
                      <Input
                        placeholder="请输入药名"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.get_drug_name}
                        value={this.state.TargetSearchData.drug_name}
                      />
                    </Form.Item>
                    <Form.Item
                      label="查询Indication相关Target"
                      {...formItemLayout}>
                      <Input
                        placeholder="请输入indication"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getindTargetication}
                        value={this.state.TargetSearchData.indication}
                      />
                      <Button
                        type="primary"
                        style={{ marginLeft: 50, width: 150 }}
                        size="large"
                        loading={this.state.loading}
                        onClick={this.getTargetList}>
                        Search
                      </Button>
                    </Form.Item>
                    <Form.Item label="Tips" {...formTailLayout2}>
                      <div className="Tips-div">
                        <div>1. 本页面提供GPCR相关靶点数据检索功能。</div>
                        <div>
                          2.
                          您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。
                        </div>
                        <div>
                          3.
                          您也可以通过靶向药物或者是否有配体信息模糊搜索靶点。
                        </div>
                        <div>
                          4.
                          如果您对靶点的结晶结构感兴趣，也可以勾选“是否有PDB结构”选项，检索有结晶结构的靶点。
                        </div>
                        <div>
                          5.
                          使用靶点的适应症作为检索关键词，可以检索出与病症相关的靶点信息。
                        </div>
                      </div>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </TabPane>
            <TabPane tab="Mutation" key="Mutation">
              <div className="top-div">
                <div>
                  <Form layout="horizontal">
                    <Form.Item label="Target对应Mutation" {...formItemLayout}>
                      <Select
                        value={this.state.MutationSearchData.target_class}
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getClassData3}>
                        {classList.map((item, index) => {
                          return (
                            <Option key={index} value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                      <Select
                        value={this.state.MutationSearchData.target_families}
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.childClassChange3}>
                        {childClassList.map((item, index) => {
                          return (
                            <Option key={index} value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                    </Form.Item>
                    <Form.Item
                      label="请输入Target name或者Uniprot id"
                      {...formItemLayout}>
                      <Input
                        placeholder="请输入"
                        style={{ width: 250 }}
                        size="large"
                        value={this.state.MutationSearchData.target_data}
                        onChange={this.getMutationValue}
                      />
                    </Form.Item>
                    {/* <Form.Item label="Mutation位点" {...formItemLayout} >
                <Checkbox onChange={this.onAllChange}>全选</Checkbox>
                </Form.Item>
                <Form.Item label="" {...formTailLayout2} >
                <div className='mutation-label'>
                <Checkbox.Group style={{ width: '100%' }} value={this.state.MutationSearchData.idselect_data} onChange={this.CheckChange}>
                      <Row>
                        <Col span={4}>
                          <Checkbox value="TM1">TM1</Checkbox>
                        </Col>
                        <Col span={4}>
                        <Checkbox value="TM2">TM2</Checkbox>
                        </Col>
                        <Col span={4}>
                        <Checkbox value="TM3">TM3</Checkbox>
                        </Col>
                      </Row>
                      <Row>
                        <Col span={4}>
                          <Checkbox value="TM4">TM4</Checkbox>
                        </Col>
                        <Col span={4}>
                          <Checkbox value="TM5">TM5</Checkbox>
                        </Col>
                        <Col span={4}>
                          <Checkbox value="TM6">TM6</Checkbox>
                        </Col>
                      </Row>
                      <Row>
                        <Col span={4}>
                          <Checkbox value="TM7">TM7</Checkbox>
                        </Col>
                        <Col span={4}>
                          <Checkbox value="ICL1">ICL1</Checkbox>
                        </Col>
                        <Col span={4}>
                          <Checkbox value="ICL2">ICL2</Checkbox>
                        </Col>
                      </Row>
                      <Row>
                        <Col span={4}>
                          <Checkbox value="ICL3">ICL3</Checkbox>
                        </Col>
                        <Col span={4}>
                          <Checkbox value="ECL1">ECL1</Checkbox>
                        </Col>
                        <Col span={4}>
                          <Checkbox value="ECL2">ECL2</Checkbox>
                        </Col>
                      </Row>
                      <Row>
                        <Col span={4}>
                          <Checkbox value="ECL3">ECL3</Checkbox>
                        </Col>
                        <Col span={4}>
                          <Checkbox value="N-Term">N-Term</Checkbox>
                        </Col>
                        <Col span={4}>
                          <Checkbox value="C-Term">C-Term</Checkbox>
                        </Col>
                        <Col span={1}>
                     
                        </Col>
                      </Row>
                </Checkbox.Group>
                </div>
              
                </Form.Item> */}
                    <Form.Item label="请输入Chembl id" {...formItemLayout}>
                      <Input
                        placeholder="请输入"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getChemblValue}
                        value={this.state.MutationSearchData.chembl_id}
                      />
                      <Button
                        type="primary"
                        style={{ marginLeft: 50, width: 150 }}
                        size="large"
                        loading={this.state.loading}
                        onClick={this.getMutationList}>
                        Search
                      </Button>
                    </Form.Item>
                    <Form.Item label="Tips" {...formTailLayout2}>
                      <div className="Tips-div">
                        <div>1. 本页面提供GPCR mutation相关数据的搜索功能</div>
                        <div>
                          2.
                          您可以直接搜索指定target或者一类target的mutation数据。
                        </div>
                        <div> 3. 您可以指定mutation的位点来进行检索。</div>
                        <div>
                          4.
                          使用药物的适应症作为检索关键词，可以检索出与病症相关的药物分子。
                        </div>
                        <div>5. 您也可以查询指定配体的mutation数据。</div>
                      </div>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </TabPane>
            <TabPane tab="Indication" key="Indication">
              <div className="top-div">
                <div>
                  <Form layout="horizontal">
                    <Form.Item label="输入适应症进行检索" {...formItemLayout}>
                      <Input
                        placeholder="请输入适应症"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getIndicationValue}
                        value={this.state.IndicationSearchData.indication}
                      />
                      <Button
                        type="primary"
                        style={{ marginLeft: 50, width: 150 }}
                        size="large"
                        loading={this.state.loading}
                        onClick={this.getIndicationList}>
                        Search
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </TabPane>
            <TabPane tab="Ligand" key="Ligand">
              <div className="top-div">
                <div>
                  <Form layout="horizontal">
                    <Form.Item label="输入Chemblid或Smiles" {...formItemLayout}>
                      <Input
                        placeholder="请输入"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getLigendValue}
                        value={this.state.ligandSearchData.ligand_data}
                      />
                    </Form.Item>
                    <Form.Item label="" {...formTailLayout}>
                      <Button
                        type="primary"
                        style={{ marginRight: '50px' }}
                        onClick={this.getDraw}>
                        画结构
                      </Button>
                      <div
                        className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
                        onClick={this.getJsme}>
                        <Jsme
                          height="500px"
                          width="700px"
                          options="oldlook,star"
                          onChange={this.logSmiles2}
                        />
                      </div>
                    </Form.Item>
                    <Form.Item label="利用Target查询化合物" {...formItemLayout}>
                      <Select
                        value={this.state.ligandSearchData.target_class}
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getClassData2}>
                        {classList.map((item, index) => {
                          return (
                            <Option key={index} value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                      <Select
                        value={this.state.ligandSearchData.target_families}
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.childClassChange2}>
                        {childClassList.map((item, index) => {
                          return (
                            <Option key={index} value={item}>
                              {item}
                            </Option>
                          )
                        })}
                      </Select>
                    </Form.Item>
                    <Form.Item
                      label="请输入Target name或Uniprot id"
                      {...formItemLayout}>
                      {/* <Select  value={this.state.ligandSearchData.target_type} style={{ width: 250 }} size="large" onChange={this.ligandChange}>
                      {
                        targetList.map(
                          (item,index)=>{
                            return(
                              <Option key={index} value={item}>{item}</Option>
                            )
                           
                          }
                        )
                      }
                  </Select> */}
                      <Input
                        placeholder="请输入target"
                        style={{ width: 250 }}
                        size="large"
                        onChange={this.getLigandData}
                        value={this.state.ligandSearchData.target_data}
                      />
                    </Form.Item>
                    <Form.Item label="" {...formTailLayout}>
                      <Button
                        type="primary"
                        style={{ marginLeft: 50, width: 150 }}
                        size="large"
                        loading={this.state.loading}
                        onClick={this.getLigendList}>
                        Search
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    )
  }
}

export default Home
