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('/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('/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('/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('/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('/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('/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('/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('/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