/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [更新角色]
 */
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Modal, Form, Input, Button, TreeSelect } from 'antd';

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

const ModalSetRole = props => {
  const [form] = Form.useForm();
  const {
    dispatch,
    dataUserMenu,
    handleCancelModal,
    handleOk,
    dataRoleMenuId,
    dataModal: {
      modalType,
      modalShow,
      modalData: { id, name, description },
    },
  } = props;

  useEffect(() => {
    if (modalType === 'ROLE_SET_MODAL' && modalShow) {
      dispatch({ type: 'Role/getUserMenu' });
      if (id) {
        dispatch({ type: 'Role/getRoleMenuId', payload: { id } });
      }
      form.resetFields();
      form.setFieldsValue({
        name,
        description,
      });
    }
  }, [modalType, modalShow]);

  const [value, setValue] = useState([]);

  useEffect(() => {
    form.setFieldsValue({
      menuIds: dataRoleMenuId,
    });
  }, [dataRoleMenuId]);

  // treeSelect配置
  const tProps = {
    treeData: dataUserMenu,
    value: dataRoleMenuId || [],
    onChange: () => {},
    treeCheckable: true,
    showCheckedStrategy: TreeSelect.SHOW_ALL,
    placeholder: '请选择菜单权限',
    style: {
      width: '100%',
    },
    fieldNames: {
      label: 'title',
      value: 'id',
    },
  };

  /* 点击保存 */
  const handleSave = () => {
    form.validateFields().then(values => {
      console.log(values, 'values');
      handleOk({ id, ...values });
    });
  };

  return (
    <Modal
      title={id ? '编辑角色' : '新增角色'}
      placement="right"
      width={700}
      maskClosable={false}
      onCancel={handleCancelModal}
      visible={modalType === 'ROLE_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="role_set_modal">
        <Form.Item
          name="name"
          label="角色名称"
          rules={[
            { required: true, message: '请输入角色名称,由2~10位非空格的字符组成' },
            { pattern: /^[\S]{2,10}$/, message: '角色名称由2~10位非空格的字符组成' },
          ]}
        >
          <Input placeholder="请输入角色名称" />
        </Form.Item>
        <Form.Item
          name="description"
          label="角色描述"
          rules={[
            { required: false, message: '请输入角色描述' },
            { max: 30, message: '角色描述字符长度不能超过30' },
          ]}
        >
          <Input.TextArea autoSize={{ minRows: 4, maxRows: 4 }} placeholder="请输入角色描述" />
        </Form.Item>
        <Form.Item
          name="menuIds"
          label="菜单权限"
          rules={[{ required: true, message: '请选择菜单权限' }]}
        >
          <TreeSelect {...tProps} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default connect(({ Role }) => ({
  ...Role,
}))(ModalSetRole);