/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [修改密码]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Modal, Form, Input, Button } from 'antd';

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

const ModalUpdatePassword = props => {
  const [form] = Form.useForm();
  const {
    dispatch,
    dataModal: { modalType, modalShow },
  } = props;

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

  /* 点击保存 */
  const handleSave = () => {
    form.validateFields().then(values => {
      dispatch({ type: 'user/updatePassword', payload: values });
    });
  };

  return (
    <Modal
      title="修改密码"
      placement="right"
      width={700}
      maskClosable={false}
      onCancel={() => {
        dispatch({ type: 'user/cancelModal' });
      }}
      visible={modalType === 'PASSWORD_UPDATE_MODAL' && modalShow}
      footer={
        <div
          style={{
            textAlign: 'right',
          }}
        >
          <Button
            onClick={() => {
              dispatch({ type: 'user/cancelModal' });
            }}
            className="mr-10"
          >
            取消
          </Button>
          <Button onClick={handleSave} type="primary">
            保存
          </Button>
        </div>
      }
    >
      <Form form={form} {...formItemLayout} name="password_set_modal">
        <Form.Item
          name="oldPassword"
          label="原密码"
          rules={[{ required: true, message: '请输入原密码' }]}
        >
          <Input.Password placeholder="请输入原密码" />
        </Form.Item>
        <Form.Item
          name="newPassword"
          label="新密码"
          rules={[
            { required: true, message: '请输入新密码' },
            {
              pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![!#$%^&*]+$)[\da-zA-Z!#$%^&@*]{6,16}$/,
              message: '密码至少包含字母、数字、特殊符号的两种组合,限制6~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 connect(({ user }) => ({
  ...user,
}))(ModalUpdatePassword);