/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [更新账号]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Modal, Form, Select, Input, Button } from 'antd';
import {aesEncrypt} from '@/utils/encrypt';

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

const ModalSetAccount = props => {
  const [form] = Form.useForm();
  const {
    dispatch,
    handleCancelModal,
    handleOk,
    dataRoleList,
    dataModal: {
      modalType,
      modalShow,
      modalData: { id, realName, username, roleId },
    },
  } = props;

  useEffect(() => {
    if (modalType === 'ACCOUNT_SET_MODAL' && modalShow) {
      dispatch({ type: 'Account/getRoleSelect' });
      form.resetFields();
      form.setFieldsValue({
        realName,
        username,
        roleId,
      });
    }
  }, [modalType, modalShow]);

  /* 点击保存 */
  const handleSave = () => {
    form.validateFields().then(values => {
      const saveData = {...values}
      saveData.password = aesEncrypt(values.password),
      saveData.checkPassword = aesEncrypt(values.checkPassword),
      handleOk({ saveType: 'ACCOUNT', id, ...saveData });
    });
  };

  return (
    <Modal
      title={id ? '编辑账号' : '新增账号'}
      placement="right"
      width={700}
      maskClosable={false}
      onCancel={handleCancelModal}
      visible={modalType === 'ACCOUNT_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="account_set_modal">
        <Form.Item
          name="username"
          label="账号"
          rules={[
            { required: true, message: '请输入账号名称, 由4~10位字母、数字、符号组成不包括空格' },
            {
              pattern: /^[0-9a-zA-Z]{4,10}$/,
              message: '账号名称由4~10位字母、数字、符号组成不包括空格~',
            },
          ]}
        >
          <Input placeholder="请输入账号" disabled={id ? true : false} />
        </Form.Item>
        <Form.Item
          name="realName"
          label="姓名"
          rules={[
            { required: true, message: '请输入姓名, 由2~10位非空格字符组成' },
            { pattern: /^[\S]{2,10}$/, message: '昵称由2~10位非空格字符组成' },
          ]}
        >
          <Input placeholder="请输入姓名" />
        </Form.Item>
        {!id && (
          <>
            <Form.Item
              name="password"
              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!#$%^&@*]{6,16}$/,
                  message: '密码至少包含大小写字母、数字、特殊符号的三种组合,限制8~16个字符~',
                },
              ]}
            >
              <Input.Password placeholder="请输入密码" />
            </Form.Item>
            <Form.Item
              name="checkPassword"
              label="密码确认"
              rules={[
                { required: true, message: '请输入确认密码' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次密码不一致，请重新输入'));
                  },
                }),
              ]}
            >
              <Input.Password placeholder="请输入确认密码" />
            </Form.Item>
          </>
        )}
        <Form.Item
          name="roleId"
          label="角色"
          rules={[{ required: true, message: '请选择关联的角色' }]}
        >
          <Select placeholder="请选择关联的角色">
            {dataRoleList.map(item => {
              return (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default connect(({ Account }) => ({
  ...Account,
}))(ModalSetAccount);