import { BasicColumn, FormSchema } from '/@/components/Table'
import dayjs from 'dayjs'
import { h } from 'vue'
import { Tag } from 'ant-design-vue'
import { ColEx } from '/@/components/Form/src/types'

const colProps: Partial<ColEx> = {
  xs: 24,
  sm: 12,
  md: 8,
  lg: 6,
  xl: 6,
  xxl: 4,
}

const statusOptions = [
  {
    value: 0,
    color: 'red',
    label: '未处理',
  },
  {
    value: 1,
    color: 'green',
    label: '已处理',
  },
  {
    value: 2,
    color: 'pink',
    label: '已忽略',
  },
]

export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '内容',
    dataIndex: 'content',
  },
  {
    title: '等级',
    dataIndex: 'lv',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    customRender: ({ record }) => {
      const status = record.status

      const list = statusOptions
      const item = list.find((e) => e.value === status)
      const color = item?.color ?? 'red'
      const text = item?.label ?? status
      return h(Tag, { color: color }, () => text)
    },
  },
  {
    title: '开始时间',
    dataIndex: 'created_at',
    width: 180,
    customRender: ({ text }) => {
      if (!text) return ''
      return dayjs.unix(text).format('YYYY-MM-DD HH:mm:ss')
    },
  },
  {
    width: 90,
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: undefined,
  },
]

export const searchFormSchema: FormSchema[] = [
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    componentProps: {
      options: statusOptions,
    },
    colProps,
  },
]