import React, { Component } from 'react'
import {Input,Button,Card,message} from 'antd';
import './index.css'
import  request from '../../../utils/request'
const { TextArea } = Input;

export default class ProteinView extends Component {
  state={
    sequence:'',
    loading:false,
    listData:[
      "Query  1    ALKTLGIIMGTFTLCWLPFFIVNIVHVIQDNLIRKEVYIL  40\n            ALKTLGIIMGTFTLCWLPFFIVNIVHVIQDNLIRKEVYIL\nSbjct  271  ALKTLGIIMGTFTLCWLPFFIVNIVHVIQDNLIRKEVYIL  310"
    
    ]
  }
  onChange=(e)=>{
    const { value } = e.target;
    console.log(value);
       this.setState({sequence:value})
  }
  getList(){
    this.setState({loading:true})
    request.post('/tool/sequence-alignment',{sequence:this.state.sequence})
    .then(res => {
      console.log(res)
      this.setState({loading:false})
      if (res.data.code===0) {
          this.setState({listData:res.data.data })
      
      }else{
        
        message.error(res.data.msg);
      }
    })
    .catch(err => {
      this.setState({loading:false})
      console.error(err); 
     
    })

  }
  render() {
    const{listData,loading}=this.state
  
   const ProteinViewList = 
   <Card  loading={loading} className='Card-title' hoverable style={{ width: '100%',  marginBottom: '20px',}}  >
      {
          listData.map( (item,index)=> {
            return(
             
              <div className='list-div-one Card-title'>
                  <div className='list-div-right' >
                      <div className='right-center' >
                      
                      {
                           <p key={index}>
                              <pre> {item}</pre>
                           
                           </p>
                        }
                      </div>
                  </div>
                  <div>
                  </div>
          
              </div>
             
            )
          } )
         
          // listData
      }
     </Card>

    return (
      <div className='ProteinView-div'>
        <div className='title-div' >
        Please input your multiple sequence alignment   
        </div>
        <div className='center-div'>
        <TextArea
          onChange={this.onChange}
          placeholder=" Please input your multiple sequence alignment  "
          style={{height:'200px'}}
         
        />
        </div>
        <div className='btn-div'>
        <Button type="primary" onClick={()=>this.getList()} disabled={this.state.loading}>Submit</Button>
        </div>
        {
        listData.length>0&& (ProteinViewList)
        }
      </div>
    )
  }
}
