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(({ authentication }) => ({ authentication }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      needKennel: false,
    };
  }
  componentWillMount = () => {
    const { id } = this.props.authentication;
    if (!id) {
      this.props.dispatch({
        type: 'authentication/info',
        payload: {},
      });
    }
  };

  componentDidMount = () => {
    let needKennel = getQueryVariableBy(window.location.href, 'needKennel');
    if (needKennel === 1 || needKennel === '1') {
      this.setState({
        needKennel: true,
      });
    }
  };

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

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

  onChangeAddressText = type => e => {
    this.props.dispatch({
      type: 'authentication/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: 'authentication/updateState',
      payload: {
        [type]: value,
      },
    });
  };

  submit = () => {
    this.props.dispatch({
      type: 'authentication/save',
      payload: {},
    });
  };

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

    const { needKennel } = 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}>{authentication === '1' ? '真实姓名' : '真实姓名'}</div>
            {authentication === '1' ? (
              <div>{memberName}</div>
            ) : (
              <input
                type="text"
                placeholder="请填写"
                value={memberName || ''}
                onChange={this.onChangeText('memberName')}
              />
            )}
          </div>
          <div className={styles.tr}>
            <div className={styles.tr_t}>{authentication === '1' ? '身份证' : '身份证'}</div>
            {authentication === '1' ? (
              <div className={styles.button_blue}>
                <span>已认证</span>
              </div>
            ) : (
              <input
                type="text"
                placeholder="请填写身份证"
                value={cardNo || ''}
                onChange={this.onChangeText('cardNo')}
              />
            )}
          </div>
          {memberType === '20' || memberType === 20 || needKennel ? (
            <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/authentication/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;