import React, { Component } from 'react'
import {Tabs,Table,message,Divider} from 'antd';
import  request from '../../../utils/request'
import './index.css'

export default class AntigenDetails extends Component {
    state={
        id:515,
        AntigenData:[]
    }
    componentDidMount(){
        this.getAntigenList()
      }
    getAntigenList(){
        const{id}=this.state
        this.setState({loading:true})
        request.get('/therapeutic/antigen/'+515)
        .then(res => {
          console.log(res)
          if (res.data.code===0) {
            console.log(res.data.data);
            this.setState({AntigenData:res.data.data})
            this.setState({loading:false}
              )
           
          }else{
            message.error(res.data.msg);
          }
        })
        .catch(err => {
          console.error(err); 
        })
    
      }

  render() {
    const {AntigenData}=this.state
    const columns = [
      {
        title: 'Type',
        dataIndex: 'epitopeType',
        key: 'epitopeType',
        // render: text => <a>{text}</a>,
      },
      {
        title: 'Description',
        dataIndex: 'epitopeDescription',
        key: 'epitopeDescription',
      },
      {
        title: 'Starting Position',
        dataIndex: 'startingPosition',
        key: 'startingPosition',
      },
      {
        title: 'Ending Position',
        key: 'endingPosition',
        dataIndex: 'endingPosition',
        // render: tags => (
        //   <span>
        //     {tags.map(tag => {
        //       let color = tag.length > 5 ? 'geekblue' : 'green';
        //       if (tag === 'loser') {
        //         color = 'volcano';
        //       }
        //       return (
        //         <Tag color={color} key={tag}>
        //           {tag.toUpperCase()}
        //         </Tag>
        //       );
        //     })}
        //   </span>
        // ),
      },
    ];
    const AntigenView=AntigenData.map((item,index)=>{
        return(
          <div className='div-list' key={index} >
          <div className='list-one'>
            <div className='left-div itle-div'>
            Antigen name:
            </div>
            <div className='right-div'>
            {item.antibodyName}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Uniport ID:
            </div>
            <div className='right-div'>
            {item.uniprotId}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Source:
            </div>
            <div className='right-div'>
            {item.sequence}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Antigen Sequence:
            </div>
            <div className='right-div'>
            {item.sequence}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Structures:
            </div>
            <div className='right-div'>
            {item.sequence}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Epitopes :
            </div>
            <div className='right-div'>
            {/* <Table columns={columns} dataSource={data} /> */}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            {/* Epitopes : */}
            </div>
            <div className='right-div'>
            <Table style={{backgroundColor: '#fff'}} columns={columns} pagination={false} dataSource={item.epitopes} />
            </div>
          </div>
          <Divider />
        </div>
        )
   

      })
    return (
      <div className='AntigenDetails-div'>{AntigenView}</div>
    )
  }
}
