import type { TableColumn } from '@/components/core/dynamic-table';
import { stateTypeList } from './data';
import { Tag } from 'ant-design-vue';
export type TableListItem = API.IssueType;
export type TableColumnItem = TableColumn<TableListItem>;
// 数据项类型
// export type ListItemType = typeof tableData[number];
// 使用TableColumn<ListItemType> 将会限制dataIndex的类型，但换来的是dataIndex有类型提示
export const baseColumns: TableColumnItem[] = [
  {
    title: '问题标题',
    align: 'center',
    dataIndex: 'title',
    // sorter: true,
    width: 150,
    resizable: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '问题描述',
    align: 'center',
    dataIndex: 'description',
    width: 150,
    resizable: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '问题号',
    align: 'center',
    dataIndex: 'billcode',
    width: 150,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '客户',
    align: 'center',
    dataIndex: 'customer',
    width: 150,
    hideInSearch: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '产品',
    align: 'center',
    dataIndex: 'product',
    width: 150,
    hideInSearch: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '代理商',
    align: 'center',
    dataIndex: 'agent',
    width: 150,
    hideInSearch: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '服务号',
    align: 'center',
    dataIndex: 'serviceNumber',
    width: 150,
    hideInSearch: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '创建时间',
    align: 'center',
    width: 200,
    dataIndex: 'createTime',
    formItemProps: {
      defaultValue: '',
      required: false,
      component: 'RangePicker',
    },
  },
  // state 问题状态
  {
    title: '问题状态',
    align: 'center',
    dataIndex: 'state',
    width: 150,
    formItemProps: {
      defaultValue: undefined,
      required: false,
      component: 'Select',
      componentProps: {
        options: stateTypeList,
      },
    },
    customRender: ({ record }) => {
      const { label, color } = stateTypeList.find((e) => e.value === record.state);

      return <Tag color={color}>{label}</Tag>;
    },
  },
];