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 } 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(({ register }) => ({ register }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      registerInfo: {},
    };
  }
  componentWillMount = () => {
    // 添加退后事件

    //获取注册需要参数
    const registerInfo = JSON.parse(window.sessionStorage.getItem('registerInfo'));
    this.setState({
      registerInfo: registerInfo,
    });

    // this.props.dispatch({
    //   type: 'register/clearState',
    //   payload: {},
    // });
  };

  goback = () => {
    console.log('popstate');
    //router.replace('/ckuh5/mobileCode');
  };

  componentDidMount = () => {
    window.addEventListener('popstate', this.goback);
  };

  componentWillUnmount() {
    window.removeEventListener('popstate', this.goback);
  }

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

  onChangeAddressText = type => e => {
    this.props.dispatch({
      type: 'register/updateAddressState',
      payload: {
        [type]: e.target.value,
      },
    });
  };

  onChangePicker = type => v => {
    let value = null;
    if (v instanceof Date) {
      value = formatDatetime(v, 'YYYY-MM-DD');
    } else {
      value = v[0];
    }
    this.props.dispatch({
      type: 'register/updateState',
      payload: {
        [type]: value,
      },
    });
  };

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

  render() {
    const {
      avatar,
      nickName,
      gender,
      birthday,
      memberName,
      cardNo,
      address,
      kennelNameCn,
      kennelNameEn,
      kennelFciName,
      // kennelFciNameBackup,
    } = this.props.register;

    const { registerInfo } = this.state;

    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 className={styles.tr}>
            <div className={styles.tr_t}>昵称</div>
            <input
              type="text"
              placeholder="请填写"
              value={nickName || ''}
              onChange={this.onChangeText('nickName')}
            />
          </div>
          <div className={styles.tr}>
            <div className={styles.tr_t}>性别</div>
            <Picker
              title="选择性别"
              extra="请选择"
              cols={1}
              data={[
                {
                  value: 'male',
                  label: '男',
                },
                {
                  value: 'female',
                  label: '女',
                },
              ]}
              value={gender ? [gender] : null}
              onChange={this.onChangePicker('gender')}
            >
              <CustomChildren value={gender}></CustomChildren>
            </Picker>
          </div>
          <div className={styles.tr}>
            <div className={styles.tr_t}>生日</div>
            <DatePicker
              mode="date"
              format="YYYY-MM-DD"
              title="选择生日"
              value={birthday ? new Date(formatDatetime(birthday, 'YYYY/MM/DD HH:mm:ss')) : null}
              onChange={this.onChangePicker('birthday')}
              extra="请选择生日"
              minDate={new Date(1900, 0, 1)}
              maxDate={new Date()}
            >
              <CustomChildren value={birthday}></CustomChildren>
            </DatePicker>
          </div>
          <div className={styles.tr}>
            <div className={styles.tr_t}>真实姓名</div>
            <input
              type="text"
              placeholder="请填写"
              value={memberName || ''}
              onChange={this.onChangeText('memberName')}
            />
          </div>
          <div className={styles.tr}>
            <div className={styles.tr_t}>身份证</div>
            <input
              type="text"
              placeholder="请填写身份证"
              value={cardNo || ''}
              onChange={this.onChangeText('cardNo')}
            />
          </div>
          {registerInfo && (registerInfo.memberType === '20' || registerInfo.memberType === 20) ? (
            <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>
          ) : null}
          <div className={styles.tr}>
            <div className={styles.tr_t}>收货地址</div>
            <div
              onClick={() => {
                router.push('/ckuh5/register/locationPicker');
              }}
              className={`${styles.select} ${address.area ? null : styles.placeholder}`}
            >
              {address.area ? address.province + address.city + address.area : '请添加收货地址'}
            </div>
          </div>
          <div className={styles.tr}>
            <div className={styles.tr_t}>详细地址</div>
            <input
              type="text"
              placeholder="请填写详细地址"
              value={address.address || ''}
              onChange={this.onChangeAddressText('address')}
            />
          </div>
        </div>
        <div className={styles.btn} onClick={this.submit}>
          完成
        </div>
      </div>
    );
  }
}

export default Index;