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';
import moment from 'moment';

class DnaAppRaisal 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.dnaAppRaisal}`}>
        {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.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.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}>
          <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.dogBreed}&emsp;</span>
            </div>
            <div className={styles.ce_tr}>
              <span>{data.dogGender}&emsp;</span>
              <span>{data.dogBirthday}&emsp;</span>
            </div>
            <div className={styles.ce_tr}>
              <span>{data.identification}&emsp;</span>
              <span>{data.colorDesc}&emsp;</span>
            </div>
            <div className={styles.ce_tr}>
              <span>{data.dogMemberName}[{data.dogMemberNameEn}]&emsp;</span>
              <span>{data.pedigreeCertified}&emsp;</span>
            </div>
          </div>
          {
            geneDom != '' &&
            <div className={styles.geneBox} dangerouslySetInnerHTML={{ __html: geneDom}}>
            </div>
          }
          <div className={styles.ce_b_t}>
            <img
              className={styles.ce_b_img}
              src={require('../assets/ckuCertificate/chairman_signature.png')}
            ></img>
              <div className={styles.ce_b_t_i}>{moment(data.createDate).format('YYYY年MM月DD日')}&emsp;</div>
          </div>

        </div>
        {flag ? (
          <div className={styles.open_bg} onClick={this.closed}>
            <img src={imgUri} alt="血统证书"></img>
            <span>长按上方图片保存证书</span>
          </div>
        ) : null}
      </div>
    );
  }
}

export default DnaAppRaisal;