import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { Button, Modal, Space, Switch } from 'antd';
import React, { useRef, useState } from 'react';
import { OPTIONS } from '../../constants';
import { ButtonController } from '../../services';
import AddForm from './AddForm';
import EditForm from './EditForm';

const User: React.FC<unknown> = () => {
  const actionRef = useRef<ActionType>();

  const [selectedRows, setSelectedRows] = useState<
    ButtonController.ButtonFields[]
  >([]);

  const onDelete = (record: ButtonController.ButtonFields) => {
    Modal.confirm({
      title: '操作提示',
      content: `是否确认删除按钮名称为"${record.buttonName}"的数据项？`,
      maskClosable: true,
      onOk: async () => {
        await ButtonController.delApi([record.buttonId]);
        actionRef.current?.reload();
      },
      okText: '确定',
      cancelText: '取消',
    });
  };

  const onBatchDelete = () => {
    const keys = selectedRows.map((item) => item.buttonId);
    Modal.confirm({
      title: '操作提示',
      content: `是否确认执行批量删除操作？`,
      maskClosable: true,
      onOk: async () => {
        await ButtonController.delApi(keys);
        actionRef.current?.reload();
      },
      okText: '确定',
      cancelText: '取消',
    });
  };

  const columns: ProColumns<ButtonController.ButtonFields>[] = [
    {
      title: '菜单名称',
      dataIndex: 'menuName',
      width: 240,
      ellipsis: true,
    },
    {
      title: '菜单路由',
      dataIndex: 'menuPath',
      width: 360,
      ellipsis: true,
    },
    {
      title: '按钮名称',
      dataIndex: 'buttonName',
      width: 240,
      ellipsis: true,
    },
    {
      title: '权限字符',
      dataIndex: 'perms',
      hideInSearch: true,
      width: 360,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: true,
      valueType: 'select',
      request: async () => {
        return OPTIONS.OPTIONS_AVAILABLE;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      width: 120,
      ellipsis: true,
      render: (_, record) => {
        return (
          <Switch
            size="small"
            checked={Boolean(2 - Number(record.status))}
            onChange={async () => {
              const { buttonId, status: preStatus } = record;
              const status = preStatus === '1' ? '2' : '1';
              await ButtonController.updateApi({ buttonId, status });
              actionRef.current?.reload();
            }}
          />
        );
      },
    },
    {
      title: '创建时间',
      key: 'showTime',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      hideInSearch: true,
      width: 240,
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 120,
      fixed: 'right',
      render: (_, record) => (
        <Space>
          <EditForm
            type="update"
            title="编辑按钮"
            value={record}
            trigger={<a>编辑</a>}
            onOk={() => {
              actionRef.current?.reload();
            }}
          ></EditForm>
          <a onClick={() => onDelete(record)} style={{ color: '#FF4D4F' }}>
            删除
          </a>
        </Space>
      ),
    },
  ];

  return (
    <ProTable<ButtonController.ButtonFields>
      rowKey={'buttonId'}
      actionRef={actionRef}
      search={{ span: 6 }}
      rowSelection={{ onChange: (keys, rows) => setSelectedRows(rows) }}
      tableAlertRender={false}
      toolBarRender={() => [
        <AddForm
          key="add"
          type="add"
          title="新增按钮"
          trigger={
            <Button type="primary" icon={<PlusOutlined />}>
              新增
            </Button>
          }
          onOk={() => {
            actionRef.current?.reload();
          }}
        ></AddForm>,
        <Button
          type="primary"
          danger
          disabled={selectedRows.length === 0}
          icon={<DeleteOutlined />}
          key="delete"
          onClick={onBatchDelete}
        >
          批量删除
        </Button>,
      ]}
      columns={columns}
      pagination={{
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        hideOnSinglePage: true,
      }}
      scroll={{ x: 0 }}
      request={async (params) => {
        const { current: pageNum, ...rest } = params;
        const { total = 0, data = [] } = await ButtonController.getListApi({
          ...rest,
          pageNum,
        });
        actionRef.current?.clearSelected?.();
        return {
          data,
          total,
        };
      }}
    />
  );
};

export default User;
