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 DnaXt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
      imgUri: null,
      geneDom: ''
    };
  }
  componentWillMount = () => {};

  componentDidMount = () => {
    let geneCode = this.props.ckuCertificate.geneCode || ''
    if(geneCode == '')return
    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 width = 32
    let gene
    let geneDom = ''
    gene = this.setGene(geneCode)
    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='display:block;height: 16px;margin-bottom: 2px;background:rgba("+colorList[i]+','+opacity+");width: "+width+"px;'></span>"
      }
      geneDom += '</p>'
    }
    this.setState({
      geneDom: geneDom
    })
  };

  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,
    });
  };

  render() {
    const data = this.props.ckuCertificate;
    const { flag, imgUri, geneDom } = this.state;
    return (
      <div className={`${styles.body} ${styles.dnaXt}`}>
        {data.pedigreeCertified ? (
          <div>
            <div className={styles.card}>
              {data.kennelEnName ? <div className={styles.c_t}>{data.kennelEnName}</div> : null}
              {data.dogName ? <div className={styles.c_n}>{data.dogName}</div> : null}
              <div className={styles.c_d}>
                {data.dogBreedDesc} {data.dogBreed} / {data.dogGender} {data.dogGenderDesc}
              </div>
              <div className={styles.c_dna}>DNA亲子比对合格</div>
              <div>
                {data.dogMemberName ? (
                  <div className={styles.tr}>
                    <span>犬主人</span>
                    {data.dogMemberName}
                    {data.secondDogOwner ? ` / ${data.secondDogOwner}` : null}
                  </div>
                ) : null}
                {data.breeder ? (
                  <div className={styles.tr}>
                    <span>繁殖人</span>
                    {data.breeder}
                    {data.secondBreeder ? ` / ${data.secondBreeder}` : null}
                  </div>
                ) : null}
                {data.kennleName ? (
                  <div className={styles.tr}>
                    <span>出生犬舍</span>
                    {data.kennleName}
                  </div>
                ) : null}
                {data.color ? (
                  <div className={styles.tr}>
                    <span>毛色(中文)</span>
                    {data.color} {data.colorDesc}
                  </div>
                ) : null}
                {data.dogBirthday ? (
                  <div className={styles.tr}>
                    <span>出生日期</span>
                    {data.dogBirthday}
                  </div>
                ) : null}
                {data.dogGrade ? (
                  <div className={styles.tr}>
                    <span>犬只等级</span>
                    {data.dogGrade}
                  </div>
                ) : null}
                {data.identification ? (
                  <div className={styles.tr}>
                    <span>身份鉴别号码</span>
                    {data.identification}
                  </div>
                ) : null}
                {data.pedigreeCertified ? (
                  <div className={styles.tr}>
                    <span>血统证书号码</span>
                    {data.pedigreeCertified}
                  </div>
                ) : null}
              </div>
              <div className={styles.bo}>
                <div className={styles.bo_l}>
                  签发日期<span>{data.createDate}</span>
                </div>
                <div className={styles.bo_r}>
                  会长签字<span></span>
                </div>
              </div>
            </div>
            <div className={styles.btn} onClick={this.open}>
              查看实体版证书
            </div>
            {/* <div
              className={styles.cku_ex}
              onClick={() => {
                router.push('/ckuh5/description?certificateType=dnaXt');
              }}
            >
              血统证书说明
            </div> */}
            <div className={styles.cku_foot}>@宠爱王国提供技术支持</div>
          </div>
        ) : null}
        <div id="certificate" className={styles.certificate}>
          {data.businessBan === '1' ? (
            <img
              className={styles.ce_t_i}
              src={require('../assets/ckuCertificate/icon5.png')}
              alt="禁止繁殖"
            ></img>
          ) : null}
          {data.changeBan === '1' ? (
            <img
              className={styles.ce_t_zaxt}
              src={require('../assets/ckuCertificate/icon6.png')}
              alt="禁止出口"
            ></img>
          ) : null}
          <div className={styles.ce_t}>
            <div className={styles.ce_tr}>
              <span>{data.paperDogName}&emsp;</span>
            </div>
            <div className={styles.ce_tr}>
              <span>{data.dogBreedDesc}&emsp;</span>
              <span>{data.dogBirthday}&emsp;</span>
              <span>{data.pedigreeCertifiedEn}&emsp;</span>
              {data.puppyBirthNum ? (
                <span>
                  {data.puppyBirthNum.split(',')[0]}
                  <span>{data.puppyBirthNum.split(',')[1]}</span>
                </span>
              ) : (
                <span>&emsp;</span>
              )}
            </div>
            <div className={styles.ce_tr}>
              <span>{data.dogBreed}&emsp;</span>
              <span>{data.identification}&emsp;</span>
              <span>{data.pedigreeCertified}&emsp;</span>
              {data.puppyRegisterNum ? (
                <span>
                  {data.puppyRegisterNum.split(',')[0]}
                  <span>{data.puppyRegisterNum.split(',')[1]}</span>
                </span>
              ) : (
                <span>&emsp;</span>
              )}
            </div>
            <div className={styles.ce_tr}>
              <span>{data.dogGender}&emsp;</span>
              <span>{data.color}&emsp;</span>
              <span>
                {data.breeder}
                {data.breederEn ? '【' + data.breederEn + '】' : ''}&emsp;
                {data.secondBreeder
                  ? [
                      <br key={0} />,
                      data.secondBreeder,
                      data.secondBreederEn ? '【' + data.secondBreederEn + '】' : '',
                    ]
                  : null}
              </span>
              <span>
                {data.dogMemberName}
                {data.dogMemberNameEn ? '【' + data.dogMemberNameEn + '】' : ''}&emsp;
              </span>
            </div>
          </div>
          <div className={styles.ce_b}>
            <div className={styles.ce_td}>
              <div className={styles.ce_td_tr}>
                <span>{data.dog1.showGrade}&emsp;</span>
                <span>{data.dog1.dogName}&emsp;</span>
                <span>{data.dog1.pedigreeCertified}&emsp;</span>
                <span>{data.dog1.color}&emsp;</span>
                <span>{data.dog1.createDate}&emsp;</span>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog2.showGrade}&emsp;</span>
                <span>{data.dog2.dogName}&emsp;</span>
                <span>{data.dog2.pedigreeCertified}&emsp;</span>
                <span>{data.dog2.color}&emsp;</span>
                <span>{data.dog2.createDate}&emsp;</span>
              </div>
            </div>
            <div className={styles.ce_td}>
              <div className={styles.ce_td_tr}>
                <span>{data.dog3.showGrade}&emsp;</span>
                <span>{data.dog3.dogName}&emsp;</span>
                <span>{data.dog3.pedigreeCertified}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog3.color}&emsp;</span>
                  <span>{data.dog3.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog4.showGrade}&emsp;</span>
                <span>{data.dog4.dogName}&emsp;</span>
                <span>{data.dog4.pedigreeCertified}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog4.color}&emsp;</span>
                  <span>{data.dog4.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog5.showGrade}&emsp;</span>
                <span>{data.dog5.dogName}&emsp;</span>
                <span>{data.dog5.pedigreeCertified}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog5.color}&emsp;</span>
                  <span>{data.dog5.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog6.showGrade}&emsp;</span>
                <span>{data.dog6.dogName}&emsp;</span>
                <span>{data.dog6.pedigreeCertified}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog6.color}&emsp;</span>
                  <span>{data.dog6.createDate}&emsp;</span>
                </div>
              </div>
            </div>
            <div className={styles.ce_td}>
              <div className={styles.ce_td_tr}>
                <span>{data.dog7.showGrade}&emsp;</span>
                <span>{data.dog7.dogName}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog7.pedigreeCertified}&emsp;</span>
                  <span>{data.dog7.color}&emsp;</span>
                  <span>{data.dog7.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog8.showGrade}&emsp;</span>
                <span>{data.dog8.dogName}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog8.pedigreeCertified}&emsp;</span>
                  <span>{data.dog8.color}&emsp;</span>
                  <span>{data.dog8.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog9.showGrade}&emsp;</span>
                <span>{data.dog9.dogName}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog9.pedigreeCertified}&emsp;</span>
                  <span>{data.dog9.color}&emsp;</span>
                  <span>{data.dog9.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog10.showGrade}&emsp;</span>
                <span>{data.dog10.dogName}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog10.pedigreeCertified}&emsp;</span>
                  <span>{data.dog10.color}&emsp;</span>
                  <span>{data.dog10.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog11.showGrade}&emsp;</span>
                <span>{data.dog11.dogName}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog11.pedigreeCertified}&emsp;</span>
                  <span>{data.dog11.color}&emsp;</span>
                  <span>{data.dog11.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog12.showGrade}&emsp;</span>
                <span>{data.dog12.dogName}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog12.pedigreeCertified}&emsp;</span>
                  <span>{data.dog12.color}&emsp;</span>
                  <span>{data.dog12.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog13.showGrade}&emsp;</span>
                <span>{data.dog13.dogName}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog13.pedigreeCertified}&emsp;</span>
                  <span>{data.dog13.color}&emsp;</span>
                  <span>{data.dog13.createDate}&emsp;</span>
                </div>
              </div>
              <div className={styles.ce_td_tr}>
                <span>{data.dog14.showGrade}&emsp;</span>
                <span>{data.dog14.dogName}&emsp;</span>
                <div className={styles.ce_td_tr_r}>
                  <span>{data.dog14.pedigreeCertified}&emsp;</span>
                  <span>{data.dog14.color}&emsp;</span>
                  <span>{data.dog14.createDate}&emsp;</span>
                </div>
              </div>
            </div>
          </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 DnaXt;