import {useTableModalEvent, useTableDeleteEvent} from '@hooks';
import {deleteContainer} from '@apis';
import {ContainerListData} from '@models';
import {ColumnsType} from 'antd/es/table';
import {Button} from 'antd';
import {
  GREAT_TABLE_WIDTH,
  LARGE_TABLE_WIDTH,
  MIDDLE_TABLE_WIDTH,
  NORMAL_TABLE_WIDTH,
  SMALL_TABLE_WIDTH,
} from '@utils';

const tableColumns: ColumnsType<ContainerListData> = [
  {
    title: '容器编号',
    dataIndex: 'code',
    key: 'code',
    width: MIDDLE_TABLE_WIDTH,
  },
  {
    title: '容器名称',
    dataIndex: 'containerName',
    key: 'containerName',
    width: LARGE_TABLE_WIDTH,
  },
  {
    title: '容器类型',
    dataIndex: 'type',
    key: 'type',
    width: MIDDLE_TABLE_WIDTH,
  },
  {
    title: '所属部门',
    dataIndex: 'department',
    key: 'department',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '容器数量',
    dataIndex: 'num',
    key: 'num',
    width: SMALL_TABLE_WIDTH,
    align: 'right',
  },
  {
    title: '修改人',
    dataIndex: 'modifyUser',
    key: 'modifyUser',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '修改时间',
    dataIndex: 'modifyTime',
    key: 'modifyTime',
    width: MIDDLE_TABLE_WIDTH,
  },
];

export function useHandle(refetch: () => void) {
  const [{editId, visible: putVisible}, {onAdd, onEdit, onClose: onPutClose}] =
    useTableModalEvent();
  const [pendingId, onDelete] = useTableDeleteEvent(deleteContainer, refetch, {
    label: '容器',
  });
  const [
    {visible: scrapVisible, editId: scrapId},
    {onEdit: onScrap, onClose: onScrapClose},
  ] = useTableModalEvent();
  const [
    {editId: logId, visible: logVisible},
    {onEdit: onLog, onClose: onLogClose},
  ] = useTableModalEvent();

  const columns: ColumnsType<ContainerListData> = [
    ...tableColumns,
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      width: GREAT_TABLE_WIDTH,
      fixed: 'right',
      render(_, {id, containerName}) {
        return (
          <>
            <Button
              type='text'
              className='ant-text-btn-color-primary'
              disabled={pendingId === id}
              onClick={onEdit(id)}
            >
              修改
            </Button>
            <Button
              type='text'
              className='ant-text-btn-color-primary'
              disabled={pendingId === id}
              onClick={onScrap(id)}
            >
              报废
            </Button>
            <Button
              type='text'
              className='ant-text-btn-color-primary'
              disabled={pendingId === id}
              onClick={onLog(id)}
            >
              报废记录
            </Button>
            <Button
              type='text'
              danger
              loading={pendingId === id}
              onClick={onDelete(id, containerName)}
            >
              删除
            </Button>
          </>
        );
      },
    },
  ];

  return [
    {columns, putVisible, editId, scrapId, scrapVisible, logVisible, logId},
    {onPutClose, onAdd, onScrapClose, onLogClose},
  ] as const;
}
