import React, { Component } from 'react';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import router from 'umi/router';
import html2canvas from 'html2canvas';
import { Toast } from 'antd-mobile';

class GeneReport extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
      imgUri: null,
      geneDom: ''
    };
  }
  componentWillMount = () => {};

  componentDidMount = () => {
  };

  componentWillUnmount = () => {};
  setGene = (geneCode) => {
      let gene = geneCode
      gene = gene.split('X##').join('244')
      gene = gene.split('Y##').join('255')
      gene = gene.split('###').join('369')
      return gene
  }
  setOpactiy = (n) => {
    if(n == 0){
        return 1
    }else{
        return '.'+(10-n)
    }
  }
  open = () => {
    Toast.loading('生成中', 0);
    const certificate = document.getElementById('certificate');
    const newCanvas = document.createElement('canvas');
    const domWidth = parseInt(window.getComputedStyle(certificate).width);
    const domHeight = parseInt(window.getComputedStyle(certificate).height);
    newCanvas.width = domWidth;
    newCanvas.height = domHeight;
    newCanvas.style.width = domWidth + 'px';
    newCanvas.style.height = domHeight + 'px';
    const _this = this;
    html2canvas(certificate, {
      canvas: newCanvas,
      scale: 1,
      x: 0,
      y: 0,
      scrollX: 0,
      scrollY: 0,
    }).then(canvas => {
      const imgUri = canvas.toDataURL('image/png');
      _this.setState({
        imgUri,
        flag: true,
      });
      Toast.hide();
    });
  };
  closed = () => {
    this.setState({
      flag: false,
    });
  };

  serLevel = (data, n) => {
    if(data){
      let riskGroupList = data.riskGroupList
      let number = 0
      for(let i=0;i<riskGroupList.length;i++){
        if(riskGroupList[i].riskLevel == n){
          number = riskGroupList[i].count
          break
        }
      }
      return number
    }
  }

  openGenetree = (samplingCode) => {
    if(process.env.NODE_ENV == 'production'){
      window.location.href = 'http://gene-tree.chongaibao.com/mobile/diseaseList?samplingCode='+samplingCode
    }else{
      window.location.href = 'http://gene-tree.uat.chongaibao.com/mobile/diseaseList?samplingCode='+samplingCode
    }
  }
  render() {
    const data = this.props.ckuCertificate;
    const { flag, imgUri } = this.state;
    let geneCode = data.geneCode || ''
    var geneDom = ''
    if(geneCode != ''){
      let colorList = ['188, 159, 233','29, 207, 238', '127, 144, 254', '218, 140, 67', '127, 223, 114', '205, 91, 190', '109, 201, 217', '234, 85, 89', '34, 144, 140', '239, 217, 119', '177, 82, 87', '74, 183, 144', '86, 101, 155', '202, 47, 28', '35, 193, 43', '161, 80, 206', '39, 145, 255', '34, 221, 129', '0, 237, 255', '128, 188, 0', '40, 155, 192', '243, 122, 73', '181, 82, 77', '111, 74, 246', '53, 179, 200', '64, 117, 187']
      let n = 0
      let num = 26
      let gene
      gene = geneCode.split('X##').join('244')
      gene = geneCode.split('Y##').join('255')
      gene = geneCode.split('###').join('369')
      gene = gene.split('')
      for (let i = 0; i < num; i++) {
        geneDom += '<p>'
        for (let j = 0; j < 6; j++) {
          n += 1
          let t = gene[n];
          if (isNaN(t)) {
            t = j + 2
          }
          let opacity = this.setOpactiy(t)
          geneDom+="<span style='background:rgba("+colorList[i]+','+opacity+");'></span>"
        }
        geneDom += '</p>'
      }
    }
    return (
      <div className={`${styles.body} ${styles.geneContent}`}>
        {data.id ? (
          <div>
              <div className={styles.card}>
            <div className={styles.samplingCode}>样本编号：{data.samplingCode}</div>
            <div className={styles.enName}>{data.nameEn}</div>
            <div className={styles.gender}>{data.gender == '1' ? '公 Male' : '母 Female'}</div>
            <div className={`${styles.pos} ${styles.pedigreeCertifiedCode}`}>{data.pedigreeCertifiedCode}</div>
            <div className={`${styles.pos} ${styles.birthdate}`}>{data.birthdate}</div>
            <div className={`${styles.pos} ${styles.identificationFlag}`}>{data.identificationFlag}</div>
            <div className={`${styles.pos} ${styles.dogOwner}`}>
              <div>{data.dogOwner}</div>
            </div>
            { data.geneticDisease && <div className={`${styles.pos} ${styles.total}`}>
                <div onClick={this.openGenetree.bind(this, data.samplingCode)}>共检测{data.geneticDisease.count}项</div>
                <div className={styles.jt}></div>
              </div>
            }
            { data.geneticDisease == '' 
              ? <div className={`${styles.pos} ${styles.levelNo}`}>等待数据报告上传中...</div>
              : <div className={`${styles.pos} ${styles.level}`} onClick={this.openGenetree.bind(this, data.samplingCode)}>
                  <div className={styles.list}>
                    <div className={styles.block}><em></em><span>高风险</span></div>
                    <div>{this.serLevel(data.geneticDisease, 3)}项目</div>
                  </div>
                  <div className={styles.list}>
                    <div className={styles.block}><em></em><span>低风险</span></div>
                    <div>{this.serLevel(data.geneticDisease, 1)}项目</div> 
                  </div>
                  <div className={styles.list}>
                    <div className={styles.block}><em></em><span>无风险</span></div>
                    <div>{this.serLevel(data.geneticDisease, 0)}项目</div>
                  </div>
                </div>
            }
            <div className={`${styles.pos} ${styles.state}`}>
              {/* 不合格 */}
              {data.parenthoodType == 5 &&  <img src={require('../assets/ckuCertificate/gene/state1.png')}></img>  }
              {/* 合格 */}
              {data.parenthoodType == 4 &&  <img src={require('../assets/ckuCertificate/gene/state2.png')}></img>  }
              {/* 未鉴定 */}
              {data.parenthoodType == 1 &&  <img src={require('../assets/ckuCertificate/gene/state3.png')}></img>  }
            </div>
            <div className={`${styles.pos} ${styles.time}`}>{data.issueDate}</div>
            <div className={`${styles.pos} ${styles.dnaCode}`}>{data.dnaCode}</div>
            <div className={styles.geneBox} dangerouslySetInnerHTML={{ __html: geneDom}}>
            </div>
          </div>
          <div className={styles.btn} onClick={this.open}>
            下载基因报告
          </div>
          <div className={styles.cku_foot}>@宠爱王国提供技术支持</div>
          </div>
        ) : null}
        
        <div id="certificate" className={styles.certificate}>
          <div className={styles.samplingCode}>样本编号：{data.samplingCode}</div>
          <div className={`${styles.pos} ${styles.enName}`}>{data.nameEn}</div>
          <div className={`${styles.pos} ${styles.gender}`}>{data.gender == '1' ? '公 Male' : '母 Female'}</div>
          <div className={`${styles.pos} ${styles.pedigreeCertifiedCode}`}>{data.pedigreeCertifiedCode}</div>
          <div className={`${styles.pos} ${styles.birthdate}`}>{data.birthdate}</div>
          <div className={`${styles.pos} ${styles.identificationFlag}`}>{data.identificationFlag}</div>
          <div className={`${styles.pos} ${styles.dogOwner}`}>
              <div>{data.dogOwner}</div>
            </div>
          { data.geneticDisease && <div className={`${styles.pos} ${styles.total}`}>
              <div>共检测{data.geneticDisease.count}项</div>
              <div className={styles.jt}></div>
            </div>
          }
          { data.geneticDisease == '' 
            ? <div className={`${styles.pos} ${styles.levelNo}`}>等待数据报告上传中...</div>
            : <div className={`${styles.pos} ${styles.level}`}>
                <div className={styles.list}>
                  <div className={styles.block}><em></em><span>高风险</span></div>
                  <div>{this.serLevel(data.geneticDisease, 3)}项目</div>
                </div>
                <div className={styles.list}>
                  <div className={styles.block}><em></em><span>低风险</span></div>
                  <div>{this.serLevel(data.geneticDisease, 1)}项目</div> 
                </div>
                <div className={styles.list}>
                  <div className={styles.block}><em></em><span>无风险</span></div>
                  <div>{this.serLevel(data.geneticDisease, 0)}项目</div>
                </div>
              </div>
          }
          <div className={`${styles.pos} ${styles.state}`}>
            {/* 不合格 */}
            {data.parenthoodType == 5 &&  <img src={require('../assets/ckuCertificate/gene/state1.png')}></img>  }
            {/* 合格 */}
            {data.parenthoodType == 4 &&  <img src={require('../assets/ckuCertificate/gene/state2.png')}></img>  }
            {/* 未鉴定 */}
            {data.parenthoodType == 1 &&  <img src={require('../assets/ckuCertificate/gene/state3.png')}></img>  }
          </div>
          <div className={`${styles.pos} ${styles.time}`}>{data.issueDate}</div>
          <div className={`${styles.pos} ${styles.dnaCode}`}>{data.dnaCode}</div>
          {
            geneDom != '' &&
            <div className={styles.geneBox} dangerouslySetInnerHTML={{ __html: geneDom}}>
            </div>
          }
          <div className={styles.ce_b_t}>
            {
              geneDom == '' ? <span>{data.dnaCode}&emsp;</span> : <span></span>
            }
            <span>{data.createDate}&emsp;</span>
          </div>
        </div>
        {flag ? (
          <div className={styles.open_bg} onClick={this.closed}>
            <img src={imgUri} alt="血统证书"></img>
            <span>长按上方图片保存基因报告</span>
          </div>
        ) : null}
      </div>
    );
  }
}

export default GeneReport;