import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Picker, DatePicker } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import router from 'umi/router';
import { formatDatetime, getQueryVariableBy } from '../../../utils/helper';

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

const photo = require('../assets/register/photo.png');
@connect(({ upgradeInfo }) => ({ upgradeInfo }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      upgradeInfo: {},
    };
  }
  componentWillMount = () => {
    //获取注册需要参数
    const upgradeInfo = JSON.parse(window.sessionStorage.getItem('upgradeInfo'));
    this.setState({
      upgradeInfo: upgradeInfo,
    });
  };

  componentDidMount = () => {};

  componentWillUnmount() {}

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

  submit = () => {
    const { upgradeInfo } = this.state;
    this.props.dispatch({
      type: 'upgradeInfo/upgradeFy',
      payload: { ...upgradeInfo },
    });
  };

  render() {
    const {
      kennelNameCn,
      kennelNameEn,
      kennelFciName,
      kennelFciNameBackup,
    } = this.props.upgradeInfo;

    return (
      <div>
        <div className={styles.top}>
          <div>犬舍信息</div>
          {/* <img className={styles.top_i} src={avatar ? avatar : photo} alt="头像"></img> */}
        </div>
        <div className={styles.box}>
          <div>
            <div className={styles.tr}>
              <div className={styles.tr_t}>犬舍中文名</div>
              <input
                type="text"
                placeholder="限填写2-4个汉字"
                value={kennelNameCn || ''}
                onChange={this.onChangeText('kennelNameCn')}
              />
            </div>
            <div className={styles.tr}>
              <div className={styles.tr_t}>犬舍英文名</div>
              <input
                type="text"
                placeholder="仅限填写英文"
                value={kennelNameEn || ''}
                onChange={this.onChangeText('kennelNameEn')}
              />
            </div>
            <div className={styles.tr}>
              <div className={styles.tr_t}>FCI英文名</div>
              <input
                type="text"
                placeholder="仅限填写英文"
                value={kennelFciName || ''}
                onChange={this.onChangeText('kennelFciName')}
              />
            </div>
            {/* <div className={styles.tr}>
                <div className={styles.tr_t}>FCI备用名</div>
                <input
                  type="text"
                  placeholder="仅限填写英文"
                  value={kennelFciNameBackup || ''}
                  onChange={this.onChangeText('kennelFciNameBackup')}
                />
              </div> */}
          </div>
        </div>
        <div className={styles.btn} onClick={this.submit}>
          完成
        </div>
      </div>
    );
  }
}

export default Index;