import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
import { Card,Button,Pagination,Tabs,Spin,message ,Modal,Tag } from 'antd';
import Molstar from "molstar-react";
import  request from '../../../utils/request'
import qs from 'qs'
import './index.css'
const { TabPane } = Tabs;

export default class SearchList extends Component {
  state = {
    smilesList:[{},{},{}
    ],
    CDRList:[],
    EpitopeList:[],
    visible:false,
    pdbId:'6f6s',
    total_num:0,
    searchData:qs.parse(this.props.location.search.slice(1)),
    name:'Summary'

};
    getPdid(e){
      let data={
        dataid:e,
        defaultActiveKey:'Antibody'
        
      }

      this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})

    }
    clinicalIndicationPdid(e){
      let data={
        dataid:e,
        defaultActiveKey:'ClinicalIndication'
        
      }

      this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})

    }
    TargetPdid(e){
      let data={
        dataid:e,
        defaultActiveKey:'Antigen'
        
      }

      this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})

    }
    onShowSizeChange=(current, pageSize)=> {
      if (this.state.name==='Summary') {
        let searchData = this.state.searchData;
        searchData.pageNum=current
        searchData.pageSize=pageSize
        this.setState({
          searchData
        })
        this.getSummaryList()
        return
      }
      if (this.state.name==='CDR') {
        let searchData = this.state.searchData;
        searchData.pageNum=current
        searchData.pageSize=pageSize
        this.setState({
          searchData
        })
        this.getCDRList()
        return
      }
      if (this.state.name==='Epitope') {
        let searchData = this.state.searchData;
        searchData.pageNum=current
        searchData.pageSize=pageSize
        this.setState({
          searchData
        })
        this.getEpitopeList()
        return
      }
    }
    onChange=(current, pageSize)=>{
      if (this.state.name==='Summary') {
        let searchData = this.state.searchData;
        searchData.pageNum=current
        searchData.pageSize=pageSize
        this.setState({
          searchData
        })
        
        this.getSummaryList()
        return
      }
      if (this.state.name==='CDR') {
        let searchData = this.state.searchData;
        searchData.pageNum=current
        searchData.pageSize=pageSize
        this.setState({
          searchData
        })
        this.getCDRList()
        return
      }
      if (this.state.name==='Epitope') {
        let searchData = this.state.searchData;
        searchData.pageNum=current
        searchData.pageSize=pageSize
        this.setState({
          searchData
        })
        this.getEpitopeList()
        return
      }

    }
    // getPdb(e){
    //   console.log(e);
    //   this.setState({visible: true})
    //   this.setState({pdbId: e})

    // }
    getPdb=(e)=>{
      let data={
        PdbId:e
      }
      this.props.history.push({ pathname: '/home/MolstarView', search: qs.stringify(data)})
  
    }
    componentDidMount(){
      this.getSummaryList()
      // if (this.state.smilesData.name==='Drugs') {
      //   this.getList()
      // }
      // if (this.state.smilesData.name==='Target') {
      //   this.getTargetList()
      // }
      
    }
 
    
    
    getSummaryList(){
      this.setState({loading:true})
      request.post('/therapeutic/summary/page-list',this.state.searchData )
      .then(res => {
        console.log(res)
        if (res.data.code===0) {
          console.log(res.data.data);
          this.setState({smilesList:res.data.data.records})
          this.setState({total_num: Number(res.data.data.total) })
         
          this.setState({loading:false}
            )
         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })
    }
    getCDRList(){
   
      this.setState({loading:true})
      request.post('/therapeutic/cdrs/page-list',this.state.searchData )
      .then(res => {
        console.log(res)
        if (res.data.code===0) {
          console.log(res.data.data);
          this.setState({CDRList:res.data.data.records})
          this.setState({total_num: Number(res.data.data.total) })
         
          this.setState({loading:false}
            )
         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })
    }
    getEpitopeList(){
      
      this.setState({loading:true})
      request.post('/therapeutic/epitope/page-list',this.state.searchData )
      .then(res => {
        console.log(res)
        if (res.data.code===0) {
          console.log(res.data.data);
          this.setState({EpitopeList:res.data.data.records})
          this.setState({total_num: Number(res.data.data.total) })
         
          this.setState({loading:false}
            )
         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })
    }
    callback=(e)=>{
      console.log(e);
      this.setState({name:e})
      if (e==='Summary') {
        this.getSummaryList()
        return
      }
      if (e==='CDR') {
        this.getCDRList()
        return
        
      }
      if (e==='Epitope') {
        this.getEpitopeList()
        return
        
      }
    }
    getOne(e){
      console.log(e);
      const {dataid,datatype}=e
      let data={
        dataid,
        datatype
      }

      if (this.state.smilesData.name==='Drugs') {
        this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})
      }
      if (this.state.smilesData.name==='Target') {
        this.props.history.push({ pathname: '/home/TargetDetails', search: qs.stringify(data)})
      }
      
    }
    
  render() {
    const {smilesList,loading,EpitopeList,CDRList,visible,pdbId,total_num,smilesData}=this.state

    const SummaryList = smilesList.map( (item,index)=> {
      console.log(item);
      return(
        <Card  loading={loading} hoverable extra={<a onClick={()=>this.getOne(item)}>{item.name}</a>} style={{ width: '100%',  marginBottom: '20px' }} key={index} >
        <div className='list-div-one'>
            <div className='list-div-left' onClick={()=>this.getPdid(item.id)}>
            {item.antibodyName}
            </div>
            <div className='list-div-right' >
                <div>
                  <span>antigen source：</span>
                {item.species}
                </div>
                <div style={{color: 'blue'}} onClick={()=>this.TargetPdid(item.id)}>
                  <span> Target：</span>
                {item.target}
               </div>
               <div>
                 <span> Method：</span>
                    {item.method}
               </div>
               <div style={{color: 'blue'}} onClick={()=>this.clinicalIndicationPdid(item.id)}>
                 <span>Clinical indication:</span>
                {item.clinicalIndication}
               </div>
               <div>
                 <span> Highest  Clinical Trial ：</span>
                 {item.highestClinTrial}
               </div>
               <div>
                 <span> companies ：</span>
                 {item.companies}
               </div>
               <div className='pdb-center'> <span>PDB:</span>
               <div className='pdb-idv'>
                 <div className={item.pdbOneHundreds===null?'isShowDiv':''}>
                   {
                    item.pdbOneHundreds && item.pdbOneHundreds.map(
                       (item,index)=>{
                          return(
                            <Tag onClick={()=>this.getPdb(item)} color="#108ee9">{item}</Tag>
                            
                            
                          )
                       }
                     )
                   }
                 （100%）
                 </div>
                 <div className={item.pdbNineNines===null?'isShowDiv':''}>
                 {
                    item.pdbNineNines&& item.pdbNineNines.map(
                      (item,index)=>{
                        return(
                          <Tag onClick={()=>this.getPdb(item)} color="#108ee9">{item}</Tag>
                          
                        )
                     }
                     )
                   }
                 （99%）
                 </div>
                 <div className={item.pdbNineFives===null?'isShowDiv':''}>
                 {
                    item.pdbNineFives&& item.pdbNineFives.map(
                      (item,index)=>{
                        return(
                          <Tag onClick={()=>this.getPdb(item)} color="#108ee9">{item}</Tag>
                          
                        )
                     }
                     )
                   }
                 （95-98%）
                 </div>

               </div>
               </div>
            </div>
            {/* <div className='btn-list'>
            </div> */}
    
            <div>
            </div>
    
        </div>
        </Card>
      )
    } )
    const allCDRList = CDRList.map( (item,index)=> {
      console.log(item);
      return(
        <Card  loading={loading} hoverable extra={<a onClick={()=>this.getOne(item)}>{item.name}</a>} style={{ width: '100%',  marginBottom: '20px' }} key={index} >
        <div className='list-div-one'>
            <div className='list-div-left' onClick={()=>this.getPdid(item.id)} >
            {item.antibodyName}
            </div>
            <div className='list-div-right' >
            <div>
                  <span>pdb:</span>
                  {
                   
                   <Tag onClick={()=>this.getPdb(item.pdb)} color="#108ee9">{item.pdb}</Tag>
                 
                  }
                </div>
                <div>
                  {/* <span>cdrs：</span> */}
                {Object.keys(item.cdrs).map((item2,index)=>{
                  // console.log(item2);
                  // console.log((item.cdrs[item2])[0]);
                   return(
                     <div key={index}>
                       <div> <span>Fab {item2}:</span></div>
                       <div className='cdrs-div'>
                       <div>
                     
                       <span>  L1: </span>
                       {
                       item.cdrs[item2].L1&&item.cdrs[item2].L1[0]
                       }

                      ( {
                       item.cdrs[item2].L1&&item.cdrs[item2].L1[1]
                       }-
                       {
                       item.cdrs[item2].L1&&item.cdrs[item2].L1[2]
                       })
                       </div>
                       <div>
                       <span>  L2: </span>
                      
                       {
                       item.cdrs[item2].L2&&item.cdrs[item2].L2[0]
                       }

                      ( {
                       item.cdrs[item2].L2&&item.cdrs[item2].L2[1]
                       }-
                       {
                       item.cdrs[item2].L2&&item.cdrs[item2].L2[2]
                       })
                       </div>
                       <div>
                       <span>  L3: </span>
                       {
                       item.cdrs[item2].L3&&item.cdrs[item2].L3[0]
                       }

                      ( {
                       item.cdrs[item2].L3&&item.cdrs[item2].L3[1]
                       }-
                       {
                       item.cdrs[item2].L3&&item.cdrs[item2].L3[2]
                       })
                       </div>
                       <div>
                      
                       <span>   H1:  </span>
                       {
                       item.cdrs[item2].H1&&item.cdrs[item2].H1[0]
                       }

                      ( {
                       item.cdrs[item2].H1&&item.cdrs[item2].H1[1]
                       }-
                       {
                       item.cdrs[item2].H1&&item.cdrs[item2].H1[2]
                       })
                       </div>
                       <div>
                       
                       <span>    H2:  </span>
                       {
                       item.cdrs[item2].H2&&item.cdrs[item2].H2[0]
                       }

                      ( {
                       item.cdrs[item2].H2&&item.cdrs[item2].H2[1]
                       }-
                       {
                       item.cdrs[item2].H2&&item.cdrs[item2].H2[2]
                       })
                       </div>
                       <div>
                        
                       <span>    H3:  </span>
                       {
                       item.cdrs[item2].H3&&item.cdrs[item2].H3[0]
                       }

                      ( {
                       item.cdrs[item2].H3&&item.cdrs[item2].H3[1]
                       }-
                       {
                       item.cdrs[item2].H3&&item.cdrs[item2].H3[2]
                       })
                       </div>
                       </div>
                  
                      
                     </div>
                   )
                })}
                </div>
              
              
            </div>
            {/* <div className='btn-list'>
              
          
            </div> */}
    
            <div>
            </div>
    
        </div>
        </Card>
      )
    } )
    const allEpitopeList = EpitopeList.map( (item,index)=> {
      return(
        <Card  className='allEpitopeList' loading={loading} hoverable extra={<a onClick={()=>this.getOne(item)}>{item.name}</a>} style={{ width: '100%',  marginBottom: '20px' }} key={index} >
        <div className='list-div-one'>
            <div className='list-div-left' onClick={()=>this.getPdid(item.id)}>
            {item.antibodyName}
            </div>
            <div className='list-div-right' >
                <div>
                  <span>Epitope Type：</span>
                {item.epitopeType}
                </div>
                <div>
                  <span> Antigen：</span>
                {item.antigenName}
               </div>
               <div>
                 <span> Starting-ending positon：</span>
                    {item.endingPosition}
               </div>
               <div>
                 <span>Description：</span>
                {item.epitopeDescription}
               </div>
               {/* <div>
                 <span>Description： </span>
              {item.highestClinTrial}
               </div> */}
            </div>
            <div>
            </div>
    
        </div>
        </Card>
      )
    } )
    return (
      <div className='search-div' >
             <Modal
                footer={null} closable={false}
                width={850}
                visible={visible}
                wrapClassName="vertical-center-modal"
                onCancel={() => this.setState({visible: false})}>
               <div className='Molstar-div'>
               <Molstar pdbId={this.state.pdbId}/>
               </div>
            </Modal>
          <Spin tip="Loading..." size='large' spinning={this.state.loading}>
            
          <Tabs  type="card" onChange={this.callback}>
            <TabPane tab="Summary" key="Summary">
              {SummaryList}
            
            </TabPane>
            <TabPane tab="CDR" key="CDR">
              {allCDRList}
            
            </TabPane>
            <TabPane tab="Epitope" key="Epitope">
              {allEpitopeList}
            
            </TabPane>
        </Tabs>
        <Pagination
            showSizeChanger
            onShowSizeChange={this.onShowSizeChange}
            onChange={this.onChange}
            total={total_num}
          />
 
      </Spin>
      
    
      </div>
    )
  }
}
