import {delTraceBack} from '@apis';
import {useTableDeleteEvent, useTableModalEvent} from '@hooks';
import {TraceBackListData} from '@models';
import {
  CODE_COL_WIDTH,
  COMPANY_COL_WIDTH,
  HUGE_TABLE_WIDTH,
  MATERIAL_CODE_COL_WIDTH,
  MATERIAL_NAME_COL_WIDTH,
  MAXIMAL_TABLE_WIDTH,
  MIDDLE_TABLE_WIDTH,
  NORMAL_TABLE_WIDTH,
  SMALL_TABLE_WIDTH,
  SUPPLIER_COL_WIDTH,
  WBS_COL_WIDTH,
} from '@utils';
import {Button} from 'antd';
import {ColumnsType} from 'antd/es/table';

const columns: ColumnsType<TraceBackListData> = [
  {title: '交货单号', dataIndex: 'deliveryOrder', width: CODE_COL_WIDTH},
  {title: '发货日期', dataIndex: 'deliveryTime', width: NORMAL_TABLE_WIDTH},
  {title: '订单类型', dataIndex: 'deliveryType', width: NORMAL_TABLE_WIDTH},
  {title: '销售订单编号', dataIndex: 'deliveryCode', width: CODE_COL_WIDTH},
  {title: '负责子公司', dataIndex: 'subsidiaryName', width: COMPANY_COL_WIDTH},
  {
    title: '销售公司编号',
    dataIndex: 'deliveryCompany',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '销售部门名称',
    dataIndex: 'deliveryDepartment',
    width: MIDDLE_TABLE_WIDTH,
  },
  {title: '客户名称', dataIndex: 'customerName', width: SUPPLIER_COL_WIDTH},
  {
    title: '商机编号',
    dataIndex: 'commercialOpportunityCode',
    width: CODE_COL_WIDTH,
  },
  {
    title: '商机名称',
    dataIndex: 'commercialOpportunityName',
    width: HUGE_TABLE_WIDTH,
  },
  {
    title: '电站名称',
    dataIndex: 'powerStationName',
    width: HUGE_TABLE_WIDTH,
  },
  {
    title: '物料编号',
    dataIndex: 'materialCode',
    width: MATERIAL_CODE_COL_WIDTH,
  },
  {
    title: '物料名称',
    dataIndex: 'materialName',
    width: MATERIAL_NAME_COL_WIDTH,
  },
  {
    title: 'WBS编号',
    dataIndex: 'wbs',
    width: WBS_COL_WIDTH,
  },
  {
    title: '发货数量',
    dataIndex: 'num',
    width: SMALL_TABLE_WIDTH,
    align: 'right',
  },
  {title: '省', dataIndex: 'province', width: NORMAL_TABLE_WIDTH},
  {title: '市', dataIndex: 'city', width: NORMAL_TABLE_WIDTH},
  {title: '地址', dataIndex: 'address', width: MAXIMAL_TABLE_WIDTH},
];

export function useColumns(refetch: () => void) {
  const [pendingId, onDelete] = useTableDeleteEvent(delTraceBack, refetch, {
    label: '发货计划',
  });
  const [{visible, editId}, {onClose, onEdit}] = useTableModalEvent();
  const tableColumn: ColumnsType<TraceBackListData> = [
    ...columns,
    {
      title: '操作',
      fixed: 'right',
      width: MIDDLE_TABLE_WIDTH,
      dataIndex: 'id',
      render(_, {id, deliveryOrder}) {
        return (
          <>
            <Button
              type='text'
              className='ant-text-btn-color-primary'
              disabled={pendingId === id}
              onClick={onEdit(id)}
            >
              出库明细
            </Button>
            <Button
              type='text'
              loading={pendingId === id}
              danger
              onClick={onDelete(id, deliveryOrder)}
            >
              删除
            </Button>
          </>
        );
      },
    },
  ];

  return [{columns: tableColumn, editId, visible}, {onClose}] as const;
}
