import Icon from '@ant-design/icons';
import { Col, Form, Input, Modal, Radio, Row, Select, TreeSelect } from 'antd';
import React, { useState } from 'react';
import IconSelector from '@/components/IconSelecter';

interface editPros {
  visible: boolean;
  treeData: any[];
  editCallback: () => void;
  params: any;
}

/**
 * 菜单管理 - 编辑
 * @param props
 * @constructor
 */
const Edit: React.FC<editPros> = (props) => {
  const { params, visible, editCallback, treeData } = props;
  const [iconSelectorVisible, setIconSelectorVisible] = useState(false);
  const [form] = Form.useForm();
  const { getFieldValue, setFieldsValue } = form;
  const iconType = getFieldValue('icon') || (params ? params.icon : '');

  const menuTypeLabel = (value: any) => {
    switch (value) {
      case 1:
        return ' [系统]';
      case 2:
        return ' [通用]';
      case 3:
        return ' [企业]';
      case 4:
        return ' [项目]';
      default:
        return ' [无]';
    }
  };

  const onOk = () => {};

  // 取消
  const onCancel = () => {
    editCallback();
  };

  // 打开图标选择框
  const openIconSelector = () => {
    setIconSelectorVisible(true);
  };

  // 上级菜单 树选择
  const toTreeSelect = (data: any) => {
    if (!data) {
      return [];
    }
    const newData = [];
    for (let i = 0; i < data.length; i += 1) {
      const item = {
        ...data[i],
        title: data[i].name + menuTypeLabel(data[i].menu_type),
        value: data[i].record_id,
      };
      if (item.children && item.children.length > 0) {
        item.children = toTreeSelect(item.children);
      }
      newData.push(item);
    }
    return newData;
  };

  // 选中图标后
  const onIconSelected = (item: any) => {
    if (item && typeof item === 'string') {
      setFieldsValue({ icon: item });
    }
    setIconSelectorVisible(false);
  };

  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };

  const formItemLayout24 = {
    labelCol: { span: 3 },
    wrapperCol: { span: 21 },
  };

  return (
    <Modal
      title={`${params ? '编辑' : '新增'}`}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={800}
    >
      <Form form={form}>
        <Row>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="name"
              label="菜单名称"
              rules={[{ required: true, message: '请输入菜单名称' }]}
              initialValue={params?.name}
            >
              <Input placeholder="请输入菜单名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="parent_id"
              label="上级菜单"
              rules={[{ required: true, message: '请选择上级菜单' }]}
              initialValue={params?.parent_id}
            >
              <TreeSelect
                allowClear
                showSearch
                treeNodeFilterProp="title"
                style={{ width: '100%' }}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={toTreeSelect(treeData)}
                placeholder="请选择"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="menu_type"
              label="菜单类型"
              rules={[{ required: true, message: '请选择菜单类型' }]}
              initialValue={params?.menu_type}
            >
              <Select placeholder="请选择菜单类型">
                <Select.Option key={1} value={1}>
                  系统
                </Select.Option>
                <Select.Option key={2} value={2}>
                  通用
                </Select.Option>
                <Select.Option key={3} value={3}>
                  企业
                </Select.Option>
                <Select.Option key={4} value={4}>
                  项目
                </Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="sequence"
              label="排序值"
              rules={[{ required: true, message: '请输入排序值' }]}
              initialValue={params?.sequence}
            >
              <Input placeholder="请输入排序值" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="icon"
              label="图标"
              rules={[{ required: true, message: '请选择图标' }]}
              initialValue={params?.icon}
            >
              <Input
                placeholder="请输入"
                readOnly
                onClick={openIconSelector}
                suffix={iconType ? <Icon type={iconType} /> : null}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="hidden"
              label="状态"
              rules={[{ required: true, message: '请选择状态' }]}
              initialValue={params?.hidden}
            >
              <Radio.Group>
                <Radio value={0}>显示</Radio>
                <Radio value={1}>隐藏</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout24}
              name="router"
              label="访问路由"
              rules={[{ required: true, message: '请输入访问路由' }]}
              initialValue={params?.router}
            >
              <Input placeholder="请输入访问路由" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
      {iconSelectorVisible && (
        <IconSelector visible={iconSelectorVisible} onSelected={onIconSelected} />
      )}
    </Modal>
  );
};
export default Edit;
