import React, { Component } from "react";
import { Tabs, Table,PageHeader, message, Card } from "antd";
import request from "../../../utils/request";
import "./index.css";
import qs from "qs";
const { TabPane } = Tabs;
export default class SearchDetails extends Component {
  state = {
    id: qs.parse(this.props.location.search.slice(1)).pdbCode,
    // id:515,
    AntibodyData: {
      
    },
    antibodyInfo:[],
    AntigenData: [],
    StructuresData: [],
    ClinicalIndicationData: {},
    defaultActiveKey: qs.parse(this.props.location.search.slice(1))
      .defaultActiveKey,
  };
  componentDidMount() {
    console.log(this.state);
    this.getOne(this.state.defaultActiveKey);
    this.getClinicalIndicationList;
  }
  getAntibodyList() {
    const { id } = this.state;
    console.log(id);
    this.setState({ loading: true });
    request
      .get("/searchstruct/pdbdetail?pdbCode=" + id)
      .then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          console.log(res.data.result.pdbCommonVO);
          this.setState({ AntibodyData: res.data.result.pdbCommonVO });
          this.setState({ antibodyInfo: res.data.result.antibodyInfo });
          
          this.setState({ loading: false });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  }
  getPdb = (e) => {
    let data = {
      PdbId: e,
    };
    this.props.history.push({
      pathname: "/home/MolstarView",
      search: qs.stringify(data),
    });
  };
  getOne(e) {
    this.getAntibodyList();
  }
  callback = (e) => {
    if (e === "Antibody") {
      this.getAntibodyList();
      return;
    }
    if (e === "Antigen") {
      this.getAntigenList();

      return;
    }
    if (e === "Structures") {
      this.getStructuresList();
      return;
    }
    if (e === "ClinicalIndication") {
      this.getClinicalIndicationList();
      return;
    }
  };
  getSequenceDetails = (e) => {
    let data = {
      Sequence: e,
    };
    this.props.history.push({
      pathname: "/home/SequenceDetails",
      search: qs.stringify(data),
    });
  };
  render() {
    const {
      AntibodyData,
      antibodyInfo,
    } = this.state;
    const columns = [
      {
        title: "CDR",
        dataIndex: "chainName",
        key: "chainName",
        // render: text => <a>{text}</a>,
        width: 200,
      },
      {
        title: "sequence",
        dataIndex: "sequence",
        key: "sequence",
        width: 200,
        render: (text, record) => (
          <div style={{ wordWrap: "break-word", wordBreak: "break-word" }}>
            {text}
          </div>
        ),
      },
      {
        title: "length",
        dataIndex: "length",
        key: "length",
        width: 200,
      },
      {
        title: "cluster",
        key: "cluster",
        dataIndex: "cluster",
        width: 200,
      },
    ];
    const AntibodyView = (
      <div className="div-list">
        <div className="list-one">
          <div className="left-div itle-div">In complex:</div>
          <div className="right-div">{AntibodyData.inComplex}</div>
        </div>
        <div className="list-one">
          <div className="left-div itle-div">Resolution:</div>
          <div className="right-div">{AntibodyData.resolution}</div>
        </div>
        <div className="list-one">
          <div className="left-div itle-div">R-free:</div>
          <div className="right-div">{AntibodyData.rfree}</div>
        </div>
        <div className="list-one">
          <div className="left-div itle-div">Released date:</div>
          <div className="right-div">{AntibodyData.releasedDate}</div>
        </div>
        <div className="list-one">
          <div className="left-div itle-div">Organism:</div>
          <div className="right-div">{AntibodyData.organism}</div>
        </div>
        <div className="list-one">
          <div className="left-div itle-div">R-factor:</div>
          <div className="right-div">{AntibodyData.rfactor}</div>
        </div>
        <div className="list-one">
          <div className="left-div itle-div">PMID:</div>
          <div className="right-div">{AntibodyData.pmid}</div>
        </div>
      </div>
    );
    const AntibodyView2 = antibodyInfo.map((item,index)=>{
      return(

        <Card
        hoverable
        style={{ marginBottom: '10px'}}
      >
            <div className="card-div" key={index}>
        <div className="title-div">antibody1</div>
       <div className="div-list">
         <div className="list-one">
           <div className="left-div itle-div">Chains:</div>
           <div className="right-div">{item.antibodyCommonInfoVO.chains}</div>
         </div>
         <div className="list-one">
           <div className="left-div itle-div">Heavy chains::</div>
           <div className="right-div">{item.antibodyCommonInfoVO.heavyChains}</div>
         </div>
         <div className="list-one">
           <div className="left-div itle-div">Light chains:</div>
           <div className="right-div">{item.antibodyCommonInfoVO.lightChains}</div>
         </div>
         <div className="list-one">
           <div className="left-div itle-div">in complex:</div>
           <div className="right-div">{item.antibodyCommonInfoVO.inComplex}</div>
         </div>
         <div className="list-one">
           <div className="left-div itle-div">Antigen chains:</div>
           <div className="right-div">{item.antibodyCommonInfoVO.antigenChains}</div>
         </div>
         <div className="list-one">
           <div className="left-div itle-div">Format:</div>
           <div className="right-div">{item.antibodyCommonInfoVO.format}</div>
         </div>
       </div>
       <div className="title-div">heavy chain</div>
       <div className="div-list">
         <div className="list-one">
           <div className="left-div itle-div">V gene usage:</div>
           <div className="right-div">{item.antibodyCommonInfoVO.heavyChainVgeneusage}</div>
         </div>
         <div className="list-one">
           <div className="left-div itle-div">Species:</div>
           <div className="right-div">{item.antibodyCommonInfoVO.heavyChainSpecies}</div>
         </div>
       </div>
       <div className="title-div">light chain</div>
       <div className="div-list">
         <div className="list-one">
           <div className="left-div itle-div">V gene usage:</div>
           <div className="right-div">{item.antibodyCommonInfoVO.lightChainVgeneusage}</div>
         </div>
         <div className="list-one">
           <div className="left-div itle-div">Species:</div>
           <div className="right-div">{item.antibodyCommonInfoVO.lightChainSpecies}</div>
         </div>
       </div>
       <Table  bordered  columns={columns} pagination={false} dataSource={item.cdrList} rowKey='chainName' />
       <div className="title-div">affinity information</div>
       <div className="title-div">calculated property</div>
     </div>

      </Card>
    
      )
    })
     
  
     
    

    return (
      <div className="search-details-div">
        <PageHeader
            style={{
              border: "1px solid rgb(235, 237, 240)",
            }}
            onBack={() => this.props.history.go(-1)}
            title="返回"
          />
        <div className="title-div">pdb</div>
        {AntibodyView}
        <div className="title-div">antibody information</div>
        {AntibodyView2}
      </div>
    );
  }
}
