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:{
      antibodyName:'',
      species:'',
      antibodyType:'',
      antigenName:'',
      clinicalIndication:'',
      companies:'',
      status:'',
      pageNum: 1, 
      pageSize: 10, 

    },
    disabled:true,
    loading:false,
    SelectList:[],
    AntibodyTypeList:[],
    StatusList:[],
    draw:false,
    classList:[],
    classData:'All Class',
    allClassList:{},
    childClassList :[],
};
  componentDidMount(){
    // this.getList()
    // this.getSelectList()
    this.getClassList()
  }
  getantibodyName=(e)=>{
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.antibodyName=value
    this.setState(()=>({searchData:searchData }))
    
  }
  getAntigenName=(e)=>{
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.antigenName=value
    this.setState(()=>({searchData:searchData }))
    
  }
  getClinicalIndication=(e)=>{
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.clinicalIndication=value
    this.setState(()=>({searchData:searchData }))
    
  }
  getCompanies=(e)=>{
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.companies=value
    this.setState(()=>({searchData:searchData }))
    
  }
  getSpecies=(e)=>{
    let searchData = this.state.searchData;
    searchData.species=e
    this.setState(()=>({searchData:searchData }))

  }
  getAntibodyType=(e)=>{
    let searchData = this.state.searchData;
    searchData.antibodyType=e
    this.setState(()=>({searchData:searchData }))

  }
  getStatus=(e)=>{
    let searchData = this.state.searchData;
    searchData.status=e
    this.setState(()=>({searchData:searchData }))

  }
  getValue=(e)=>{
    const { value } = e.target;
    let searchData = this.state.searchData;
    searchData.antibodyName=value
    this.setState(()=>({searchData:searchData }))
    
  }
  getClassList(){
    console.log(qs.parse(this.props.location.search.slice(1)));
    this.setState({loading:true})
    request.get('/common/codes')
    .then(res => {
      console.log(res)
      if (res.data.code===0) {
        console.log(res.data.data);
        this.setState({SelectList:res.data.data.species})
        this.setState({AntibodyTypeList:res.data.data.antibodyType})
        this.setState({StatusList:res.data.data.status})
        this.setState({loading:false})
       
      }else{
        message.error(res.data.msg);
      }
    })
    .catch(err => {
      console.error(err); 
    })
  }
  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,
    });
  }
  SearchIndication=()=>{
    let data={
      clinicalIndication:this.state.searchData.clinicalIndication
    }
    this.props.history.push({ pathname: '/home/AutoimmuneDiseases', search: qs.stringify(data)})
  }
 
  getList=()=>{
    let data=this.state.searchData
    this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data)})
  
  }
  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);
  }
  

  render() {
    const {AntibodyTypeList,StatusList,SelectList,targetList,classList,classData,childClassList,compoundList,searchData}=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> */}
          
          <div className='top-div'>
            <div>
            <Form layout="horizontal">
                <Form.Item label="Antibody name" {...formItemLayout} >
                  <Input placeholder="请输入" style={{ width: 250 }} size="large"  onChange={this.getantibodyName}  value={this.state.searchData.antibodyName} />
                </Form.Item>
                <Form.Item label="Species" {...formItemLayout}>
                <Select  value={this.state.searchData.species} style={{ width: 250 }} size="large" onChange={this.getSpecies}>
                      {
                        SelectList.map(
                          (item,index)=>{
                            return(
                              <Option key={index} value={item}>{item}</Option>
                            )
                           
                          }
                        )
                      }
                </Select>
                </Form.Item>
                <Form.Item label="Antibody type" {...formItemLayout} >
                <Select  value={this.state.searchData.antibodyType} style={{ width: 250 }} size="large" onChange={this.getAntibodyType}>
                      {
                        AntibodyTypeList.map(
                          (item,index)=>{
                            return(
                              <Option key={index} value={item}>{item}</Option>
                            )
                           
                          }
                        )
                      }
                </Select>
                </Form.Item>
                <Form.Item label="Antigen name" {...formItemLayout} >
                  <Input placeholder="请输入" style={{ width: 250 }} size="large"  onChange={this.getAntigenName}  value={this.state.searchData.antigenName} />
                </Form.Item>
                <Form.Item label="Clinical indication" {...formItemLayout} >
                  <Input placeholder="请输入" style={{ width: 250 }} size="large"  onChange={this.getClinicalIndication}  value={this.state.searchData.clinicalIndication} />
                  <Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large'  loading={this.state.loading}  onClick={this.SearchIndication}>SearchIndication</Button>
                </Form.Item>
                <Form.Item label="Company" {...formItemLayout} >
                  <Input placeholder="请输入" style={{ width: 250 }} size="large"  onChange={this.getCompanies}  value={this.state.searchData.companies} />
                </Form.Item>
                <Form.Item label="Status" {...formItemLayout}>
                <Select  value={this.state.searchData.status} style={{ width: 250 }} size="large" onChange={this.getStatus}>
                      {
                        StatusList.map(
                          (item,index)=>{
                            return(
                              <Option key={index} value={item}>{item}</Option>
                            )
                           
                          }
                        )
                      }
                </Select>
                <Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large'  loading={this.state.loading}  onClick={this.getList}>Search</Button>
                </Form.Item>
                <Form.Item label=""  {...formItemLayout}>
             
                </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>
        
          
        </div>
      </div>
    )
  }
}

export default Home