/**
 * Author: llw
 * Date: 2022.9.14
 * Description: [设置菜单弹框]
 */
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Drawer, Radio, Form, Select, Input, Button } from 'antd';

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

const ModalSetMenu = props => {
  const [menuType, setType] = useState(1);
  const [form] = Form.useForm();
  let {
    dispatch,
    handleCancelModal,
    dataLevelMenu = [],
    dataModal: {
      modalType,
      modalShow,
      modalData: { id, title, resourceCode, resourceNodeType, isEdit, parentId },
    },
  } = props;

  /* 重置resourceNodeType */
  useEffect(() => {
    if (modalType === 'MENU_SET_MODAL' && modalShow) {
      setType(resourceNodeType ? +resourceNodeType : 1);
      setTimeout(() => {
        form.resetFields();
        form.setFieldsValue({
          parentId,
          title,
          resourceCode,
          resourceNodeType: resourceNodeType ? +resourceNodeType : 1,
        });
      }, 100);
    }
  }, [modalType, modalShow]);

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

  /* 选择菜单类型 */
  const handleChangeRadio = value => {
    form.resetFields();
    setType(value);
    form.setFieldsValue({ resourceNodeType: value });
  };

  return (
    <Drawer
      title="菜单设置"
      placement="right"
      width={600}
      maskClosable={false}
      onClose={handleCancelModal}
      visible={modalType === 'MENU_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="auth_set_modal"
        initialValues={{ resourceNodeType: 1 }}
      >
        <Form.Item name="resourceNodeType" label="菜单类型">
          <Radio.Group buttonStyle="solid" onChange={e => handleChangeRadio(e.target.value)}>
            <Radio.Button disabled={isEdit && +resourceNodeType !== 1 ? true : false} value={1}>
              一级菜单
            </Radio.Button>
            <Radio.Button disabled={isEdit && +resourceNodeType !== 2 ? true : false} value={2}>
              子菜单
            </Radio.Button>
            {/* <Radio.Button disabled={isEdit && resourceNodeType !== 3 ? true : false} value={3}>
              按钮
            </Radio.Button> */}
          </Radio.Group>
        </Form.Item>
        {menuType !== 1 && (
          <Form.Item
            name="parentId"
            label={menuType === 2 ? '上级菜单' : '包含菜单'}
            rules={[
              {
                required: true,
                message: menuType === 2 ? '请选择上级菜单' : '请选择包含该按钮的菜单',
              },
            ]}
          >
            <Select
              showSearch
              placeholder={menuType === 2 ? '请选择上级菜单' : '请选择包含该按钮的菜单'}
              optionFilterProp="children"
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              {dataLevelMenu
                .filter(_ =>
                  isEdit ? _.resourceCode && _.resourceCode !== resourceCode : _.resourceCode,
                )
                .map(item => {
                  return (
                    <Option key={item.id} value={item.id}>
                      {item.title}
                    </Option>
                  );
                })}
            </Select>
          </Form.Item>
        )}
        <Form.Item
          name="title"
          label={menuType === 3 ? '按钮名称' : '菜单名称'}
          rules={[
            { required: true, message: menuType === 3 ? '请输入按钮名称' : '请输入菜单名称' },
            { min: 2, max: 15, message: '名称长度2~15个字符' },
          ]}
        >
          <Input
            maxLength={15}
            placeholder={menuType === 3 ? '请输入按钮名称' : '请输入菜单名称'}
          />
        </Form.Item>
        <Form.Item
          name="resourceCode"
          label={menuType === 3 ? '按钮code' : '菜单code'}
          rules={[
            { required: true, message: menuType === 3 ? '请输入按钮code' : '请输入菜单code' },
          ]}
        >
          <Input
            maxLength={20}
            placeholder={menuType === 3 ? '请输入按钮code' : '请输入菜单code'}
          />
        </Form.Item>
      </Form>
    </Drawer>
  );
};
export default connect(({ SystemMenu }) => ({
  ...SystemMenu,
}))(ModalSetMenu);