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'
// import { formatDataByObject } from '/@/utils/index'
// import { getGriculturalDeviceBasic, getaGriculturalDevicePoint } from '/@/api/sys/user'

const colProps: Partial<ColEx> = {
  xs: 24,
  sm: 12,
  md: 8,
  lg: 6,
  xl: 6,
  xxl: 4,
}
const diviceTypes = [
  {
    label: '监控设备',
    value: 1,
  },
  {
    label: '土壤设备',
    value: 2,
  },
  {
    label: '水质设备',
    value: 3,
  },
  {
    label: '气象设备',
    value: 4,
  },
]

const lvOptions = [
  {
    label: 'Ⅰ级预警',
    value: 1,
  },
  {
    label: 'Ⅱ级预警',
    value: 2,
  },
  {
    label: 'Ⅲ级预警',
    value: 3,
  },
  {
    label: 'Ⅳ级预警',
    value: 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: 'base_name',
  },
  {
    title: '监控点',
    dataIndex: 'point_name',
  },
  {
    title: '设备类型',
    dataIndex: 'device_type',
    customRender: ({ text }) => {
      const item = diviceTypes.find(({ value }) => value == text)

      return item?.label ?? text
    },
  },
  {
    title: '内容',
    dataIndex: 'content',
  },
  {
    title: '等级',
    dataIndex: 'lv',
    width: 100,
    customRender: ({ text }) => {
      const item = lvOptions.find(({ value }) => value == text)
      return item?.label ?? text
    },
  },
  {
    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: 'base',
  //   component: 'ApiSelect',
  //   label: '基地',
  //   colProps,
  //   componentProps: ({ formModel, formActionType }) => {
  //     return {
  //       placeholder: '基地',
  //       allowClear: true,
  //       api: getGriculturalDeviceBasic,
  //       labelField: 'name',
  //       valueField: 'id',
  //       onChange: (e: any) => {
  //         formModel.point = undefined
  //         if (!e) return
  //         const { updateSchema } = formActionType
  //         updateSchema({
  //           field: 'point',
  //           componentProps: {
  //             api: async (e) => {
  //               const resData = await getaGriculturalDevicePoint(e)
  //               return formatDataByObject(resData)
  //             },
  //             params: {
  //               device_type: 4,
  //               agricultural_basic: e,
  //             },
  //             labelField: 'label',
  //             valueField: 'value',
  //           },
  //         })
  //       },
  //     }
  //   },
  // },
  // {
  //   field: 'point',
  //   component: 'ApiSelect',
  //   label: '监控点',
  //   colProps,
  //   componentProps: {
  //     allowClear: true,
  //     placeholder: '监控点',
  //   },
  // },
  {
    field: 'lv',
    label: '等级',
    component: 'Select',
    componentProps: {
      options: lvOptions,
    },
    colProps,
  },
  {
    field: 'device',
    label: '设备类型',
    component: 'Select',
    componentProps: {
      options: diviceTypes,
    },
    colProps,
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    componentProps: {
      options: statusOptions,
    },
    colProps,
  },
]