import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import request from '../../utils/request'
import { Input,Button,Modal,Table,message,Pagination } from 'antd';
import Molstar from "molstar-react";
import './index.css'

export default class MolecularSearch extends Component {
    state={
        loading:false,
        smilesData:{
          smile:'',
          page_size: 10,
          page: 1
      },
        visible:false,
        pdbId:'1C8L',
        total_num:0,
        smilesList:[]
        

    }
    logSmiles=(e)=>{
        let smilesData = this.state.smilesData;
        smilesData.smile =e
        this.setState(()=>({smilesData:smilesData }))
        // this.setState(()=>({data:e }))
      }
      getValue=(e)=>{
        const { value } = e.target;
        let smilesData = this.state.smilesData;
        smilesData.smile=value
        this.setState(()=>({smilesData:smilesData }))
        
      }
      onShowSizeChange=(current, pageSize)=> {
          let smilesData = this.state.smilesData;
          smilesData.page=current
          smilesData.page_size=pageSize
          this.setState({
            smilesData
          })
          this.getList()
        }
        onChange=(current, pageSize)=>{
        
            let smilesData = this.state.smilesData;
            smilesData.page=current
            smilesData.page_size=pageSize
            this.setState({
              smilesData
            })
            this.getList()
          }
        
        getList=()=>{
          this.setState({loading:true})
          request.post('/openeye_search', qs.stringify(this.state.smilesData) )
          .then(res => {
            
            if (res.data.code===200) {
              console.log(res.data.data);
              this.setState({smilesList:res.data.data})
              this.setState({total_num:res.data.total_num})
              this.setState({loading:false})
             
            }else{
              message.error(res.data.msg);
              this.setState({loading:false})
              
            }
          })
          .catch(err => {
            console.error(err); 
          })
        }
        showPdb=(e)=>{
          this.setState({
            visible:true
          })
          this.setState({
            pdbId:e
          })
        }
  render() {
      const{visible,pdbId,total_num,smilesList}=this.state

      
      const columns = [
        {
          title: '分子',
          dataIndex: 'smile',
          key: 'smile',
          width:310,
          render: smile => (
            <span>
              {
               <Jsme height="150px" width="300px" options="depict,useopenchemlib" smiles={smile} />
              }
            </span>
          ),
        },
        {
          title: 'PDB',
          dataIndex: 'pdb',
          key: 'pdb',
          render: pdb => (
            <span>
              {
               pdb.map((item,index)=>{
                 return(<Button style={ {marginRight: '10px'}} type="primary" key={index} onClick={()=>this.showPdb(item)} >{item}</Button>)
                
               })
              }
            </span>
          ),
        },
      ];
    return (
      <div className='MolecularSearch-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={pdbId} />
               </div>
            </Modal>
          <div className='left-div'>
            <div className='input-div'>
            <Input placeholder="输入分子" size='large' onChange={this.getValue}  value={this.state.smilesData.smile} />
            </div>
          <Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large'  loading={this.state.loading}  onClick={this.getList}>Search</Button>
          </div>
           <Jsme height="300px" width="500px" options="oldlook,star"  onChange={this.logSmiles}/>
           {smilesList.length!=0&&(     <div className='list-div'>
           <Table dataSource={smilesList} columns={columns} pagination={false} style={ {backgroundColor: '#fff'}}/>
            <Pagination
            showSizeChanger
            onShowSizeChange={this.onShowSizeChange}
            onChange={this.onChange}
            total={total_num}
          />
            
           </div>)}
      
      </div>
    )
  }
}
