import {useTableModalEvent} from '@hooks';
import {InventoryMainListData} from '@models';
import {NORMAL_TABLE_WIDTH, MIDDLE_TABLE_WIDTH, DOUBLE_BTN_WIDTH} from '@utils';
import {Button} from 'antd';
import {ColumnsType} from 'antd/es/table';

const tableColumns: ColumnsType<InventoryMainListData> = [
  {title: '盘点标题', dataIndex: 'title', width: NORMAL_TABLE_WIDTH},
  {title: '盘点人', dataIndex: 'userName', width: NORMAL_TABLE_WIDTH},
  {title: '盘点时间', dataIndex: 'scrq', width: MIDDLE_TABLE_WIDTH},
];

export function useColumn() {
  const [
    {visible: detailVisible, editId: detailId},
    {onEdit: onDetailDetail, onClose: onDetailDetailClose},
  ] = useTableModalEvent();
  const [
    {visible: logVisible, editId: logId},
    {onEdit: onLogEdit, onClose: onLogClose},
  ] = useTableModalEvent();

  const columns: ColumnsType<InventoryMainListData> = [
    ...tableColumns,
    {
      title: '操作',
      dataIndex: 'id',
      fixed: 'right',
      width: DOUBLE_BTN_WIDTH,
      render(_, {uuid}) {
        return (
          <>
            <Button
              type='text'
              className='ant-text-btn-color-primary'
              onClick={onDetailDetail(uuid)}
            >
              明细
            </Button>
            <Button type='text' onClick={onLogEdit(uuid)}>
              记录
            </Button>
          </>
        );
      },
    },
  ];

  return [
    {columns, detailVisible, detailId, logVisible, logId},
    {onDetailDetailClose, onLogClose},
  ] as const;
}
