/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [重置密码]
 */
import React, { useEffect } from 'react';
import { Modal, Form, Input, Button } from 'antd';
import {aesEncrypt} from '@/utils/encrypt';

const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };

const ModalResetPassword = props => {
  const [form] = Form.useForm();
  const {
    handleCancelModal,
    handleOk,
    dataModal: {
      modalType,
      modalShow,
      modalData: { id },
    },
  } = props;

  useEffect(() => {
    if (modalType === 'PASSWORD_SET_MODAL' && modalShow) {
      form.resetFields();
    }
  }, [modalType, modalShow]);

  /* 点击保存 */
  const handleSave = () => {

    form.validateFields().then(values => {
      const saveData = {
        newPassword: aesEncrypt(values.newPassword),
        checkPassword: aesEncrypt(values.checkPassword)
      }
      handleOk({ saveType: 'PASSWORD', id, ...saveData });
    });
  };

  return (
    <Modal
      title="重置密码"
      placement="right"
      width={700}
      maskClosable={false}
      onCancel={handleCancelModal}
      visible={modalType === 'PASSWORD_SET_MODAL' && modalShow}
      footer={
        <div
          style={{
            textAlign: 'right',
          }}
        >
          <Button onClick={handleCancelModal} className="mr-10">
            取消
          </Button>
          <Button onClick={handleSave} type="primary">
            保存
          </Button>
        </div>
      }
    >
      <Form form={form} {...formItemLayout} name="password_set_modal">
        <Form.Item
          name="newPassword"
          label="密码"
          rules={[
            { required: true, message: '请输入密码' },
            {
              pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/,
              // pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![!#$%^&*]+$)[\da-zA-Z!#$%^&@*]{8,16}$/,
              message: '密码至少包含大小写字母、数字、特殊符号的三种组合,限制8~16个字符~',
            },
          ]}
        >
          <Input.Password placeholder="请输入密码" />
        </Form.Item>
        <Form.Item
          name="checkPassword"
          label="密码确认"
          rules={[
            { required: true, message: '请输入确认密码' },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('newPassword') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次密码不一致，请重新输入'));
              },
            }),
          ]}
        >
          <Input.Password placeholder="请确认密码" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ModalResetPassword;