/**
 * Author: llw
 * Date: 2020.7.20
 * Description: [设置权限弹框]
 */
import React, { useEffect, useState } from 'react';
import { Drawer, Radio, Form, Select, Input, Button } from 'antd';

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

const ModalSetAuth = props => {
  const [menuType, setType] = useState(1);
  const [form] = Form.useForm();
  let { 
    handleCancelModal, 
    handleAuthSetOk, 
    dataMenuList = [], 
    dataModal: { 
      modalType, 
      modalShow, 
      modalData,
      modalData: { name, code, type, url, icon, parentCode, isEdit } 
    } 
  } = props;

  dataMenuList = code ? dataMenuList.filter(item => code !== item.code) : dataMenuList;

  /* 重置type */
  useEffect(() => {
    if (modalType === "AUTH_SET_MODAL" && modalShow) {
      setType(type || 1);
      setTimeout(() => {
        form.resetFields();
        form.setFieldsValue({
          name,
          code,
          url, 
          icon,
          parentCode,
          type: type || 1,
        });
      }, 100)
    }
  }, [modalType, modalShow])

  /* 点击保存 */
  const handleSave = () => {
    form.validateFields().then(values => {
      handleAuthSetOk({
        ...modalData,
        ...values,
        isEdit
      });
    })
  };

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

  return (
    <Drawer
      title="权限设置"
      placement="right"
      width={600}
      maskClosable={false}
      onClose={handleCancelModal}
      visible={modalType === 'AUTH_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={{ type: 1 }}
      >
        <Form.Item
          name="type"
          label="菜单类型"
        >
          <Radio.Group buttonStyle="solid" onChange={(e) => handleChangeRadio(e.target.value)}>
            <Radio.Button disabled={(isEdit && type !== 1) ? true : false} value={1}>一级菜单</Radio.Button>
            <Radio.Button disabled={(isEdit && type !== 2) ? true : false} value={2}>子菜单</Radio.Button>
            <Radio.Button disabled={(isEdit && type !== 3) ? true : false} value={3}>按钮</Radio.Button>
          </Radio.Group>
        </Form.Item>
        {
          menuType !== 1 && <Form.Item
            name="parentCode"
            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
              }
            >
              {
                dataMenuList.map(item => {
                  return (
                    <Option key={item.code} value={item.code}>{item.name}</Option>
                  )
                })
              }
            </Select>
          </Form.Item>
        }
        <Form.Item
          name="name"
          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="code"
          label={menuType === 3 ? "按钮code" : "菜单code"}
          rules={
            [{required: true, message: menuType === 3 ? '请输入按钮code' : '请输入菜单code'}]
          }
        >
          <Input maxLength={20} placeholder={menuType === 3 ? "请输入按钮code" : "请输入菜单code"} />
        </Form.Item>
        {
          menuType !== 3 && <>
            <Form.Item
              name="url"
              label="菜单URL"
              rules={
                [{required: true, message: '请输入菜单URL'}]
              }
            >
              <Input placeholder="请输入菜单URL" />
            </Form.Item>
            <Form.Item
              name="icon"
              label="菜单Icon"
            >
              <Input placeholder="请输入菜单Icon" />
            </Form.Item>
          </>
        }
       </Form>
    </Drawer>
  )
};

export default ModalSetAuth;