import React, { Component } from 'react';
import { connect } from 'react-redux';
import DocumentTitle from 'react-document-title';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import router from 'umi/router';

@connect(({ registrationCard }) => ({ registrationCard }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
    };
  }
  componentWillMount = () => {};

  componentDidMount = () => {
    const { id } = this.props.location.query;
    if (id) {
      this.props.dispatch({
        type: 'registrationCard/birthcertificateInfo',
        payload: {
          id,
        },
      });
    }
  };

  componentWillUnmount = () => {
    this.props.dispatch({
      type: 'registrationCard/clean',
    });
  };

  show = () => {
    const { flag } = this.state;
    this.setState({
      flag: !flag,
    });
  };

  render() {
    const { flag } = this.state;
    const {
      id,
      dogGender,
      dogName,
      dogBreed,
      birthCerRegCode,
      snCode,
      colorFlag,
      dogBirthday,
      noseCode,
      identificationFlag,
      cabPassport,
      registerGrade,
      registerGradeDesc,
      canApplyPedigreeCertifiedFlag,
    } = this.props.registrationCard;
    return (
      <DocumentTitle title="宠物身份电子登记卡">
        <div>
          {id ? (
            <div className={styles.body}>
              <div className={styles.top}>
                <div className={styles.t_bg}></div>
                <div className={styles.top_t}>宠物身份电子登记卡</div>
                <div
                  className={`${styles.top_card} ${
                    dogGender === '1' ? styles.top_card_m : styles.top_card_f
                  }`}
                >
                  <div>
                    <span className={styles.top_name}>{dogName}</span>
                    <span className={styles.top_type}>{dogBreed} Alaska</span>
                  </div>
                  <div>
                    {birthCerRegCode ? (
                      <span className={styles.top_num}>No.{birthCerRegCode}</span>
                    ) : null}
                    {snCode ? (
                      <div className={styles.top_b}>
                        识别码<span>{flag ? snCode : '******'}</span>
                        <i className={flag ? styles.show : styles.hidden} onClick={this.show}></i>
                      </div>
                    ) : null}
                  </div>
                </div>
              </div>
              <div className={styles.box}>
                <div className={styles.tr}>
                  犬只性别
                  {dogGender === '1' ? (
                    <span>
                      <i className={styles.male}></i>公
                    </span>
                  ) : (
                    <span>
                      <i className={styles.female}></i>母
                    </span>
                  )}
                </div>
                {colorFlag ? (
                  <div className={styles.tr}>
                    犬只毛色
                    <span>{colorFlag}</span>
                  </div>
                ) : null}
                {dogBirthday ? (
                  <div className={styles.tr}>
                    出生日期
                    <span>{dogBirthday}</span>
                  </div>
                ) : null}
                {noseCode ? (
                  <div className={styles.tr}>
                    鼻纹编号
                    <span>{noseCode}</span>
                  </div>
                ) : null}
                {identificationFlag ? (
                  <div className={styles.tr}>
                    芯片号码
                    <span>{identificationFlag}</span>
                  </div>
                ) : null}
                {cabPassport ? (
                  <div className={styles.tr}>
                    宠爱护照号
                    <span>{cabPassport}</span>
                  </div>
                ) : null}
                {registerGrade ? (
                  <div className={styles.tr}>
                    宠物等级
                    <span>
                      <i
                        className={`${styles.grade_icon} ${
                          registerGrade === 'C'
                            ? styles.grade_icon_c
                            : registerGrade === 'E'
                            ? styles.grade_icon_e
                            : registerGrade === 'P'
                            ? styles.grade_icon_p
                            : registerGrade === 'S'
                            ? styles.grade_icon_s
                            : registerGrade === 'SS'
                            ? styles.grade_icon_ss
                            : null
                        }`}
                      ></i>
                      {registerGradeDesc}
                      <i
                        className={styles.icon}
                        onClick={() => {
                          router.push('/ckuh5/gradeDesc');
                        }}
                      ></i>
                    </span>
                  </div>
                ) : null}
              </div>
            </div>
          ) : null}
          {canApplyPedigreeCertifiedFlag === '1' ? (
            <div className={styles.b_btn}>
              <div
                className={styles.btn}
                onClick={() => {
                  router.push(`/ckuh5/ckuApply?birthCode=${birthCerRegCode}`);
                }}
              >
                血统证书申请
              </div>
            </div>
          ) : null}
        </div>
      </DocumentTitle>
    );
  }
}

export default Index;