/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [菜单设置]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Card, Button, Table, Tooltip, Divider, Modal } from 'antd';
import ModalSetMenu from './ModalSetMenu';
import MenuTree from './MenuTree';
import { EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import {
  StyledPageContainer,
  StyledPageHeader,
  StyledPageContent,
  StyledPageFlex,
  StyledPageLeft,
  StyledPageRight,
} from '@/components/style';

/* DataTable */
const DataTable = props => {
  const { dispatch, dataMenuInfo } = props;

  const columns = [
    {
      title: '菜单ID',
      dataIndex: 'id',
      align: 'center',
      width: 120,
    },
    {
      title: '菜单名称',
      dataIndex: 'title',
      align: 'center',
      width: 160,
    },
    {
      title: '菜单code',
      dataIndex: 'resourceCode',
      align: 'center',
      width: 160,
    },
    {
      title: '操作',
      align: 'center',
      width: 120,
      render(t, r) {
        return (
          <>
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ cursor: 'pointer', fontSize: 16 }}
                onClick={() => {
                  dispatch({
                    type: 'SystemMenu/changeState',
                    payload: {
                      dataModal: {
                        modalType: 'MENU_SET_MODAL',
                        modalShow: true,
                        modalData: { ...r, isEdit: true },
                      },
                    },
                  });
                }}
              />
            </Tooltip>
            <Divider type="vertical" style={{ margin: '0 16px' }} />
            <Tooltip
              placement="top"
              title="删除"
              onClick={() => {
                Modal.confirm({
                  title: '删除',
                  icon: <ExclamationCircleOutlined />,
                  content: '确定删除该菜单吗?',
                  centered: true,
                  onOk() {
                    dispatch({
                      type: 'SystemMenu/delSystemMenu',
                      payload: { id: r.id },
                    });
                  },
                  onCancel() {},
                });
              }}
            >
              <DeleteOutlined style={{ cursor: 'pointer', fontSize: 16 }} />
            </Tooltip>
          </>
        );
      },
    },
  ];
  return <Table rowKey="id" dataSource={dataMenuInfo} columns={columns} pagination={false} />;
};

/* Main */
const SystemMenu = props => {
  const { dispatch, dataModal, dataMenuInfo } = props;

  useEffect(() => {
    dispatch({ type: 'SystemMenu/getAllSystemMenu' });
  }, []);

  // 关闭弹框
  const handleCancelModal = () => {
    dispatch({ type: 'SystemMenu/cancelModal' });
  };

  // 点击保存
  const handleOk = values => {};

  return (
    <StyledPageContainer>
      <StyledPageHeader>
        <Button
          type="primary"
          onClick={() => {
            dispatch({
              type: 'SystemMenu/changeState',
              payload: {
                dataModal: {
                  modalType: 'MENU_SET_MODAL',
                  modalShow: true,
                  modalData: {},
                },
              },
            });
          }}
        >
          新增菜单
        </Button>
      </StyledPageHeader>
      <StyledPageContent>
        <StyledPageFlex>
          <StyledPageLeft>
            <MenuTree />
          </StyledPageLeft>
          <StyledPageRight>
            <Card bordered={false}>
              <div className="mt-16">
                <DataTable dispatch={dispatch} dataMenuInfo={dataMenuInfo} />
              </div>
            </Card>
          </StyledPageRight>
        </StyledPageFlex>
      </StyledPageContent>
      <ModalSetMenu
        dataModal={dataModal}
        handleCancelModal={handleCancelModal}
        handleOk={handleOk}
      />
    </StyledPageContainer>
  );
};

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