// 紧急联系人信息
import React from 'react';
import {InputItem, Picker, List, Toast} from 'antd-mobile';
import { createForm } from 'rc-form';
import {Util} from 'tools';

class EmergencyContactInformation extends React.Component{
  componentDidMount = () => {
    this.props.onRef(this)
  }

  // 获取form表单信息
  getFormData = () => {
    let obj = {}
    this.props.form.validateFields((error, values) => {
      if (!error) {
        obj = {...values};
        obj.EContactCredTypeID = obj.EContactCredTypeID[0];
        obj.relationID = obj.relationID[0];
        obj.EContactMobile = obj.EContactMobile ? Util.removeSpacesFromString(obj.EContactMobile) : "";
        obj.healthCode = '';
        obj.errorCode = 0;
      } else {
        obj.errorCode = -100;
      }
    });
    return obj
  }

  // 验证表单信息
  handleVerification = (e) => {
    this.setState(() => {
      let obj = this.props.form.getFieldsValue();
      if (obj.EContact&&obj.EContactCredTypeID&&obj.EContactIDNo&&obj.EContactMobile&&obj.relationID) {
        this.props.handleNextStepStatus(false);
      }else {
        this.props.handleNextStepStatus(true);
      }
    })
  }

  // 手机号验证
  handleVerificationMobile = (rule, value, callback) => {
    if (value && (/^1[3456789]\d{9}$/.test(value.replace(/\s*/g,'')))) {
      callback();
    } else {
      callback(new Error("手机号码有误，请重填"));
    }
  }

  render() {
    const { getFieldProps, getFieldError } = this.props.form;
    let {relation, cardType} = this.props.selectData;
    return (
      <div>
        <form>
          <InputItem
            error={!!getFieldError('EContact')}
            onErrorClick={() => {
              Toast.info(getFieldError('EContact').join('、'), 3, () => {}, false);
            }}
            {...getFieldProps('EContact', {
              onChange: this.handleVerification,
              initialValue: undefined,
              rules: [
                { required: true, message: '请输入联系人姓名' },
              ],
            })}
          >联系人姓名</InputItem>
          <div className="region-flex-basis">
            <Picker data={cardType} cols={1}
              error={!!getFieldError('EContactCredTypeID')}
              onErrorClick={() => {
                Toast.info(getFieldError('EContactCredTypeID').join('、'), 3, () => {}, false);
              }}
              title="选择证件类型"
              {...getFieldProps('EContactCredTypeID', {
                onChange: this.handleVerification,
                initialValue: cardType&&cardType.length > 0 ? [cardType[0].value] : undefined,
                rules: [
                  { required: true, message: '请选择证件类型' },
                ],
              })}
            >
              <List.Item arrow="horizontal">证件类型</List.Item>
            </Picker>
          </div>
          <InputItem
            error={!!getFieldError('EContactIDNo')}
            onErrorClick={() => {
              Toast.info(getFieldError('EContactIDNo').join('、'), 3, () => {}, false);
            }}
            {...getFieldProps('EContactIDNo', {
              onChange: this.handleVerification,
              initialValue: undefined,
              rules: [
                { required: true, message: '请输入证件号' },
              ],
            })}
            // placeholder="0.00"
            extra={<i className="iconfont icon-zhuyuanjilu"></i>}
          >证件号</InputItem>
          <InputItem
            error={!!getFieldError('EContactMobile')}
            onErrorClick={() => {
              Toast.info(getFieldError('EContactMobile').join('、'), 3, () => {}, false);
            }}
            {...getFieldProps('EContactMobile', {
              onChange: this.handleVerification,
              initialValue: undefined,
              rules: [ { validator: this.handleVerificationMobile }],
            })}
            type="phone"
          >手机号码</InputItem>
          <Picker data={relation} cols={1}
            title="选择关系"
            error={!!getFieldError('relationID')}
            onErrorClick={() => {
              Toast.info(getFieldError('relationID').join('、'), 3, () => {}, false);
            }}
            {...getFieldProps('relationID', {
              onChange: this.handleVerification,
              initialValue: undefined,
              rules: [
                { required: true, message: '请选择关系' },
              ],
            })}
          >
            <List.Item arrow="horizontal">关系</List.Item>
          </Picker>
        </form>
      </div>
    )
  }
};
const EmergencyContactInformationForm = createForm()(EmergencyContactInformation);
export default EmergencyContactInformationForm;
