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

  componentDidMount = () => {};

  componentWillUnmount = () => {};

  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 } = this.state;
    return (
      <div className={`${styles.body} ${styles.mq}`}>
        {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>
                {data.dogMemberName ? (
                  <div className={styles.tr}>
                    <span>犬主人</span>
                    {data.dogMemberName}
                  </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=mq');
              }}
            >
              血统证书说明
            </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}
          <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>
          <div className={styles.ce_b_t}>
            <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 Mq;