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(({ transfer }) => ({ transfer }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentWillMount = () => {
    const { birthCerRegCode, identificationFlag } = this.props.location.query;
    if (birthCerRegCode && identificationFlag) {
      this.props.dispatch({
        type: 'transfer/updateState',
        payload: {
          birthCerRegCode,
          identificationFlag,
        },
      });
      this.props.dispatch({
        type: 'transfer/detail',
        payload: {},
      });
    }
  };

  componentDidMount = () => {};

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

  onChangeText = type => e => {
    this.props.dispatch({
      type: 'transfer/updateState',
      payload: {
        [type]: e.target.value,
      },
    });
  };

  inputOnBlur = () => {
    const { birthCerRegCode, identificationFlag } = this.props.transfer;
    if (birthCerRegCode && identificationFlag) {
      this.props.dispatch({
        type: 'transfer/detail',
        payload: {},
      });
    }
  };

  render() {
    const {
      birthCerRegCode,
      identificationFlag,
      dogEnName,
      dogBreedCnName,
      colorFlagName,
      dogGender,
      dogBirthday,
      breeder,
      dogOwenr,
      snCode,
    } = this.props.transfer;
    return (
      <DocumentTitle title="身份登记卡登记">
        <div>
          <div className={styles.box}>
            <div className={styles.tr}>
              <div className={styles.tr_t}>登记卡编号</div>
              <input
                type="text"
                placeholder="请输入"
                value={birthCerRegCode || ''}
                onChange={this.onChangeText('birthCerRegCode')}
                onBlur={this.inputOnBlur}
              />
            </div>
            <div className={styles.tr}>
              <div className={styles.tr_t}>芯片号码</div>
              <input
                type="text"
                placeholder="请输入"
                value={identificationFlag || ''}
                onChange={this.onChangeText('identificationFlag')}
                onBlur={this.inputOnBlur}
              />
            </div>
            {dogEnName ? (
              <div className={styles.tr}>
                <div className={styles.tr_t}>犬只名称</div>
                <input type="text" value={dogEnName || ''} readOnly />
              </div>
            ) : null}
            {dogBreedCnName ? (
              <div className={styles.tr}>
                <div className={styles.tr_t}>犬只品种</div>
                <input type="text" value={dogBreedCnName || ''} readOnly />
              </div>
            ) : null}
            {colorFlagName ? (
              <div className={styles.tr}>
                <div className={styles.tr_t}>毛色</div>
                <input type="text" value={colorFlagName || ''} readOnly />
              </div>
            ) : null}

            {dogGender ? (
              <div className={styles.tr}>
                <div className={styles.tr_t}>犬只性别</div>
                <input
                  type="text"
                  value={dogGender ? (dogGender === '1' ? '公' : '母') : ''}
                  readOnly
                />
              </div>
            ) : null}

            {dogBirthday ? (
              <div className={styles.tr}>
                <div className={styles.tr_t}>出生日期</div>
                <input type="text" value={dogBirthday || ''} readOnly />
              </div>
            ) : null}

            {breeder ? (
              <div className={styles.tr}>
                <div className={styles.tr_t}>繁殖人</div>
                <input type="text" value={breeder || ''} readOnly />
              </div>
            ) : null}

            {dogOwenr ? (
              <div className={styles.tr}>
                <div className={styles.tr_t}>犬主人</div>
                <input type="text" value={dogOwenr || ''} readOnly />
              </div>
            ) : null}
            {dogEnName ? (
              <div className={styles.tr}>
                <div className={styles.tr_t}>识别号码</div>
                <input
                  type="text"
                  placeholder="请输入"
                  value={snCode || ''}
                  onChange={this.onChangeText('snCode')}
                />
              </div>
            ) : null}
          </div>
          <div
            className={styles.btn}
            onClick={() => {
              this.props.dispatch({
                type: 'transfer/transfer',
                payload: {},
              });
            }}
          >
            确认登记
          </div>
        </div>
      </DocumentTitle>
    );
  }
}

export default Index;