import React, { useState, useEffect } from 'react';
import { Modal, Radio, Checkbox, Input, Row, Col, message } from 'antd';
const VerifyModal = props => {
  const { visible, onCancel, callBackSubmit, formObj } = props;
  const [radioValue, setRadioValue] = useState();
  const [radioOptions] = useState([
    { lable: '数值(number)', value: 'number' },
    { lable: '整数(digits)', value: 'digits' },
    { lable: '邮箱(email)', value: 'email' },
    { lable: '身份证号(identity)', value: 'identity' },
    { lable: '手机号(mobile)', value: 'mobile' },
    { lable: '银行卡号(bankAccount)', value: 'bankAccount' },
    { lable: '时间控制(timeControl)', value: 'timeControl' },
  ]); // 单选框数据
  const [checkDefaultValue, setCheckDefaultValue] = useState([]); // 复选框选择的数据
  const [maxLengthVlaue, setMaxLengthVlaue] = useState(''); // 最大字节长度值
  const [hasMaxlength, setHasMaxlength] = useState(); // 是否有勾选最大字节长度规则
  useEffect(() => {
    if (visible) {
      setRadioValue(formObj.numerical);
      let chooseObj = formObj.rule.map(item => {
        if (item.indexOf('maxLength') !== -1) {
          setMaxLengthVlaue(item.split(':')[1]);
          return 'maxLength';
        }

        return item;
      });
      setCheckDefaultValue(chooseObj);
    }
  }, [visible]);
  useEffect(() => {
    let hasMax = checkDefaultValue.some(item => item === 'maxLength');
    setHasMaxlength(hasMax);
    if (!hasMax) {
      setMaxLengthVlaue('');
    }
  }, [checkDefaultValue]);
  // 单选框change事件
  const radioOnChange = e => {
    if (e.target.value === radioValue) {
      setRadioValue('');
    } else {
      setRadioValue(e.target.value);
    }
  };
  // 复选框change事件
  const CheckboxOnChange = e => {
    setCheckDefaultValue(e);
  };
  // maxleng值监听
  const maxLengthChange = e => {
    e.persist();
    setMaxLengthVlaue(e.target.value);
  };
  // 保存选择规则
  const onOk = () => {
    let checkList = JSON.parse(JSON.stringify(checkDefaultValue));
    checkList = checkList.map(item => {
      if (item === 'maxLength') {
        return `maxLength:${maxLengthVlaue}`;
      }
      return item;
    });
    if (hasMaxlength) {
      if (maxLengthVlaue === '') {
        message.error('请输入字节最大长度');
        return;
      }
      const posReg = /^\d+$/;
      if (!posReg.test(Number(maxLengthVlaue))) {
        message.error('请输入数字');
        return;
      }
    }
    let callValue = `${
      radioValue ? `${radioValue}${checkList.length > 0 ? ',' : ''}` : ''
    }${checkList.join(',')}`;
    callBackSubmit(callValue);
  };
  return (
    <div>
      <Modal
        width="600px"
        title="选择验证规则"
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
        maskClosable={false}
        destroyOnClose
      >
        <Radio.Group value={radioValue} style={{ display: 'flex', flexWrap: 'wrap' }}>
          {radioOptions.map(item => (
            <Radio
              value={item.value}
              key={item.value}
              onClick={radioOnChange}
              style={{ marginBottom: '10px' }}
            >
              {item.lable}
            </Radio>
          ))}
        </Radio.Group>
        <Checkbox.Group
          style={{ width: '100%', margin: '10px 0' }}
          onChange={CheckboxOnChange}
          defaultValue={checkDefaultValue}
        >
          <Checkbox value="required">必填(required)</Checkbox>
          <Checkbox value="emphasis">强调(emphasis)</Checkbox>
          <Checkbox value="sensitive" style={{ marginBottom: '10px' }}>
            敏感(sensitive)
          </Checkbox>
          <br />

          <Input.Group size="small">
            <Row gutter={16}>
              <Col span={9}>
                <Checkbox value="maxLength">字节最大长度(maxLength):</Checkbox>
              </Col>
              <Col span={8}>
                <Input
                  disabled={!hasMaxlength}
                  value={maxLengthVlaue}
                  size="small"
                  style={{ width: '150px' }}
                  onChange={maxLengthChange}
                  placeholder="请输入maxLength"
                />
              </Col>
            </Row>
          </Input.Group>
        </Checkbox.Group>
      </Modal>
    </div>
  );
};

export default VerifyModal;
