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 Jd 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.jd}`}>
        {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}
                    {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=jd');
              }}
            >
              鉴定证书说明
            </div> */}
            <div className={styles.cku_foot}>@宠爱王国提供技术支持</div>
          </div>
        ) : null}
        <div id="certificate" className={styles.certificate}>
          {data.businessBan === '1' ? (
            <img
              className={styles.ce_t_jd}
              src={require('../assets/ckuCertificate/icon5.png')}
              alt="禁止繁殖"
            ></img>
          ) : null}
          {data.changeBan === '1' ? (
            <img
              className={styles.ce_t_jd1}
              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.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.color}&emsp;</span>
            </div>
            <div className={styles.ce_tr}>
              <span>{data.pedigreeCertifiedEn}&emsp;</span>
              <span>{data.pedigreeCertified}&emsp;</span>
            </div>
            <div className={styles.ce_tr}>
              <span>{data.dogMemberName}&emsp;</span>
            </div>
            <div className={styles.ce_tr}>
              <span>&emsp;</span>
            </div>
          </div>
          <div className={styles.ce_b}>
            <div>{data.identifySite}&emsp;</div>
            <div>{data.identifyDate}&emsp;</div>
            <div>{data.identifier}&emsp;</div>
          </div>
          <div className={styles.ce_b_t}>{data.createDate}&emsp;</div>
        </div>
        {flag ? (
          <div className={styles.open_bg} onClick={this.closed}>
            <img src={imgUri} alt="血统证书"></img>
            <span>长按上方图片保存证书</span>
          </div>
        ) : null}
      </div>
    );
  }
}

export default Jd;