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

const CustomChildren = props => {
  return (
    <div
      onClick={props.onClick}
      className={`${styles.select} ${props.value ? null : styles.placeholder}`}
    >
      {props.extra}
    </div>
  );
};

@connect(({ ckuApply }) => ({ ckuApply }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentWillMount = () => {};

  componentDidMount = () => {
    const { birthCode } = this.props.location.query;
    if (birthCode) {
      this.props.dispatch({
        type: 'ckuApply/checkBirthCode',
        payload: {
          birthCode,
        },
      });
    }
  };

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

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

  onChangePicker = type => v => {
    if (type === 'provinceName') {
      this.props.dispatch({
        type: 'ckuApply/org',
        payload: {
          provinceName: v[0],
        },
      });
    }
    this.props.dispatch({
      type: 'ckuApply/updateState',
      payload: {
        [type]: v[0],
      },
    });
  };

  onChangeFlag = type => {
    this.props.dispatch({
      type: 'ckuApply/updateState',
      payload: {
        [type]: this.props.ckuApply[type] === '0' ? '1' : '0',
      },
    });
  };

  changeFlag = () => {
    const { ecertFlag } = this.props.ckuApply;
    this.props.dispatch({
      type: 'ckuApply/updateState',
      payload: {
        ecertFlag: ecertFlag === '0' ? '1' : '0',
      },
    });
  };

  render() {
    const {
      id,
      birthCerRegCode,
      dogEnName,
      callName,
      dogBreedName,
      dogColorMarkCn,
      dogGender,
      dogBirthday,
      breeder,
      memberName,
      ecertFlag,
      showDna,
      dnaSaveWay,
      isDnaParentsCompare,
      provinceName,
      hospitalCode,
      province,
      orgList,
    } = this.props.ckuApply;
    return (
      <DocumentTitle title="血统证书申请">
        <div>
          {id ? (
            <div>
              <div className={styles.box}>
                <div className={styles.title}>申请犬只</div>
                <div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>登记卡编号</div>
                    <input type="text" placeholder="无" value={birthCerRegCode || ''} readOnly />
                  </div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>犬名</div>
                    <input type="text" placeholder="无" value={dogEnName || ''} readOnly />
                  </div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>呼名</div>
                    <input
                      type="text"
                      placeholder="请输入"
                      value={callName || ''}
                      onChange={this.onChangeText('callName')}
                    />
                  </div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>品种</div>
                    <input type="text" placeholder="无" value={dogBreedName || ''} readOnly />
                  </div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>毛色</div>
                    <input type="text" placeholder="无" value={dogColorMarkCn || ''} readOnly />
                  </div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>性别</div>
                    <input type="text" placeholder="无" value={dogGender || ''} readOnly />
                  </div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>出生日期</div>
                    <input type="text" placeholder="无" value={dogBirthday || ''} readOnly />
                  </div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>繁殖人</div>
                    <input type="text" placeholder="无" value={breeder || ''} readOnly />
                  </div>
                </div>
                <div className={styles.title}>犬主信息</div>
                <div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>犬主人</div>
                    <input type="text" placeholder="无" value={memberName || ''} readOnly />
                  </div>
                </div>
                {showDna ? (
                  <div>
                    <div className={styles.title}>DNA留存方式</div>
                    <div>
                      <div className={styles.tr}>
                        <div className={styles.tr_t}>DNA位点分析</div>
                        <div
                          className={`${styles.checkbox} ${
                            dnaSaveWay === '1' ? styles.checkbox_a : null
                          }`}
                        />
                      </div>
                      <div className={styles.tr}>
                        <div className={styles.tr_t}>双亲比对</div>
                        <div
                          onClick={() => {
                            this.onChangeFlag('isDnaParentsCompare');
                          }}
                          className={`${styles.checkbox} ${
                            isDnaParentsCompare === '1' ? styles.checkbox_a : null
                          }`}
                        />
                      </div>
                    </div>
                    <div className={styles.title}>选择合作机构</div>
                    <div>
                      <div className={styles.tr}>
                        <div className={styles.tr_t}>地区</div>
                        <Picker
                          title="选择地区"
                          extra="请选择地区"
                          cols={1}
                          data={province}
                          value={provinceName ? [provinceName] : null}
                          onChange={this.onChangePicker('provinceName')}
                        >
                          <CustomChildren value={provinceName}></CustomChildren>
                        </Picker>
                      </div>
                      <div className={styles.tr}>
                        <div className={styles.tr_t}>合作机构</div>
                        <Picker
                          title="选择合作机构"
                          extra={provinceName ? '请选择合作机构名称' : '请先选择地区'}
                          cols={1}
                          data={orgList}
                          value={hospitalCode ? [hospitalCode] : null}
                          onChange={this.onChangePicker('hospitalCode')}
                          disabled={!provinceName}
                        >
                          <CustomChildren value={hospitalCode}></CustomChildren>
                        </Picker>
                      </div>
                    </div>
                  </div>
                ) : null}
                <div className={styles.title}>纸质证书申请</div>
                <div>
                  <div className={styles.tr}>
                    <div className={styles.tr_t}>纸质版血统证书</div>
                    <div
                      onClick={this.changeFlag}
                      className={`${styles.checkbox} ${
                        ecertFlag === '0' ? styles.checkbox_a : null
                      }`}
                    />
                  </div>
                </div>
              </div>
              <div
                className={styles.btn}
                onClick={() => {
                  this.props.dispatch({
                    type: 'ckuApply/save',
                  });
                }}
              >
                确认申请
              </div>
            </div>
          ) : null}
        </div>
      </DocumentTitle>
    );
  }
}

export default Index;