import { PageContainer } from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';
import { Button, Card, Form, Input, Modal, Space, Table } from 'antd';
import Icon, { PlusCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import moment from 'moment/moment';
import Edit from '@/pages/MenuManagement/edit';
import IconMap from '@/components/Icon/IconMap';

interface DataType {
  name: string;
  menu_type: number;
  sequence: number;
  hidden: number;
  icon: string;
  record_id: string;
}

/**
 * 菜单管理
 * @constructor
 */
const MenuManagement: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [searchData, setSearchData] = useState<object | null>({});
  const [editData, setEditData] = useState(null);
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
  const [dataList, setDataList] = useState([]);
  const [tag] = useState('web');

  const getList = () => {
    const data: any = [
      {
        name: '菜单名称',
        menu_type: 2,
        sequence: 20,
        hidden: 1,
        icon: 'security-scan',
        tag: 'web',
        router: '/editionManagement',
        creator: 'root',
        created_at: '2023-01-04T14:31:23.664+08:00',
        record_id: '1111',
        parent_id: '1111',
      },
    ];
    setDataList(data);
    setPagination({ total: 0, current: 1, pageSize: 10 });
  };

  useEffect(() => {
    getList();
  }, []);

  //  分页切换
  const tableChange = (page: any) => {
    setLoading(true);
    const params = {
      q: 'page',
      current: page.current,
      pageSize: page.pageSize,
      ...searchData,
    };
    console.log(params);
    //   请求接口
  };

  //  搜索
  const onFinish = () => {
    form.validateFields().then((data) => {
      setLoading(true);
      setSearchData(data);
    });
  };
  // 重置
  const onReset = () => {
    form.resetFields();
    setLoading(true);
    setSearchData(null);
  };
  // 新增弹框
  const onAdd = () => {
    setEditData(null);
    setVisible(true);
  };
  // 打开编辑弹框
  const toEdit = (data: any) => {
    setEditData(data);
    setVisible(true);
  };
  // 删除
  const toDel = (record: any) => {
    Modal.confirm({
      title: '删除',
      content: `确认删除菜单：[${record.name}]`,
      onOk: () => {
        //   请求接口
      },
    });
  };

  // 编辑弹框回调
  const handleEdit = () => {
    setVisible(false);
    // 请求接口
  };
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      key: 'index',
      render: (_: any, row: any, index: number) => index + 1,
    },
    {
      title: '菜单名称',
      dataIndex: 'name',
      key: 'name',
      width: 250,
    },
    {
      title: '类型',
      dataIndex: 'menu_type',
      width: 100,
      render: (val) => {
        switch (val) {
          case 1:
            return <span style={{ color: '#f50' }}>系统</span>;
          case 2:
            return <span style={{ color: '#87d068' }}>通用</span>;
          case 3:
            return <span style={{ color: '#3c6bbc' }}>企业</span>;
          case 4:
            return <span style={{ color: '#b28317' }}>项目</span>;
          default:
            return <span style={{ color: '#590858' }}>无</span>;
        }
      },
    },
    {
      title: '排序值',
      dataIndex: 'sequence',
      align: 'center',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'hidden',
      align: 'center',
      width: 100,
      render: (val) =>
        val === 1 ? (
          <span style={{ color: '#f50' }}>隐藏</span>
        ) : (
          <span style={{ color: '#87d068' }}>显示</span>
        ),
    },
    {
      title: '图标',
      dataIndex: 'icon',
      align: 'center',
      width: 100,
      render: (val) => {
        return tag === 'api' ? (
          <img src={val} alt="val" style={{ width: 32 }} />
        ) : (
          <Icon component={IconMap[val] as React.ForwardRefExoticComponent<any>} />
        );
      },
    },
    // {
    //   title: '动作',
    //   dataIndex: 'actions',
    //   align: 'center',
    //   width: 80,
    //   render: val =>
    //     val ? (
    //       <Tooltip title={val.map((item: { name: any; }) => item.name).join(' ')}>
    //         <span style={{ color: '#87d068' }}>{val.length} 动作</span>
    //       </Tooltip>
    //     ) : (
    //       <span style={{ color: '#d07c63' }}>无动作</span>
    //     ),
    // },
    {
      title: '菜单标签',
      dataIndex: 'tag',
      key: 'tag',
    },
    {
      title: '访问路由',
      dataIndex: 'router',
      key: 'router',
    },
    {
      title: '创建者',
      dataIndex: 'creator',
      key: 'creator',
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at',
      render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              toEdit(record);
            }}
          >
            编辑
          </a>
          <a
            style={{ color: 'red' }}
            onClick={() => {
              toDel(record);
            }}
          >
            删除
          </a>
        </Space>
      ),
    },
  ];
  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => {
      return <span> 共 {total}条 </span>;
    },
    ...pagination,
  };
  return (
    <PageContainer>
      <div>
        <Card>
          <Form form={form} layout="inline" onFinish={onFinish}>
            <Form.Item name="name" label="菜单名称">
              <Input placeholder="请输入菜单名称" />
            </Form.Item>
            <Form.Item style={{ marginBottom: '10px' }}>
              <Space>
                <Button type="primary" htmlType="submit">
                  <SearchOutlined />
                  查询
                </Button>
                <Button htmlType="button" onClick={onReset}>
                  <ReloadOutlined />
                  重置
                </Button>
              </Space>
            </Form.Item>
          </Form>
          <Button htmlType="button" type="primary" style={{ margin: '20px 0' }} onClick={onAdd}>
            <PlusCircleOutlined />
            新增菜单
          </Button>
          <Table
            columns={columns}
            dataSource={dataList}
            rowKey={(record) => record.record_id}
            pagination={paginationProps}
            loading={loading}
            onChange={tableChange}
          />
          {visible && (
            <Edit
              visible={visible}
              treeData={dataList}
              editCallback={handleEdit}
              params={editData}
            />
          )}
        </Card>
      </div>
    </PageContainer>
  );
};
export default MenuManagement;
