import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';
import { h } from 'vue';

export const querySchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'alarmType',
    label: '视频预警类型',
  },
  {
    component: 'Select',
    componentProps: {
      options: [
        { label: '特大', value: '特大' },
        { label: '重要', value: '重要' },
        { label: '一般', value: '一般' },
      ],
    },
    fieldName: 'level',
    label: '级别',
  },
  {
    component: 'Select',
    componentProps: {
      options: [
        { label: '待分配', value: '待分配' },
        { label: '处理中', value: '处理中' },
        { label: '已完成', value: '已完成' },
      ],
    },
    fieldName: 'processingStatus',
    label: '处理状态',
  },
];

export const columns: VxeGridProps['columns'] = [
  { type: 'checkbox', width: 60 },
  {
    title: '预警编号',
    field: 'alarmId',
    width: 150,
  },
  {
    title: '预警时间',
    field: 'alarmTime',
    width: 150,
  },
  {
    title: '设备名称',
    field: 'deviceName',
    width: 150,
  },
  {
    title: '级别',
    field: 'level',
    width: 100,
    slots: {
      default: ({ row }: any) => {
        const levelColors: Record<string, string> = {
          特大: 'red',
          重要: 'orange',
          一般: 'blue',
        };
        return h(
          'span',
          {
            style: {
              color: levelColors[row.level] || '#666',
              fontWeight: 'bold',
            },
          },
          row.level,
        );
      },
    },
  },
  {
    title: '预警类型',
    field: 'alarmType',
    width: 120,
  },
  {
    title: '描述',
    field: 'description',
    minWidth: 200,
  },
  {
    title: '所在位置',
    field: 'location',
    width: 150,
  },
  {
    title: '处理状态',
    field: 'processingStatus',
    width: 100,
    slots: {
      default: ({ row }: any) => {
        const statusColors: Record<string, string> = {
          待分配: 'red',
          处理中: 'orange',
          已完成: 'green',
        };
        return h(
          'span',
          {
            style: {
              color: statusColors[row.processingStatus] || '#666',
              fontWeight: 'bold',
            },
          },
          row.processingStatus,
        );
      },
    },
  },
  {
    title: '处理情况',
    field: 'processingDetails',
    width: 150,
  },
  {
    title: '预期处理时间',
    field: 'expectedProcessingTime',
    width: 150,
  },
  {
    title: '处理时间',
    field: 'processingTime',
    width: 150,
  },
  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
    width: 380,
  },
];

export const modalSchema: FormSchemaGetter = () => [
  {
    label: '主键',
    fieldName: 'id',
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
  },
  {
    label: '预警编号',
    fieldName: 'alarmId',
    component: 'Input',
    rules: 'required',
    disabled: true,
  },
  {
    label: '预警时间',
    fieldName: 'alarmTime',
    component: 'DatePicker',
    componentProps: {
      format: 'YYYY.MM.DD HH:mm',
      valueFormat: 'YYYY.MM.DD HH:mm',
      showTime: true,
    },
    rules: 'required',
    disabled: true,
  },
  {
    label: '预警类型',
    fieldName: 'alarmType',
    component: 'Input',
    rules: 'required',
    disabled: true,
  },
  {
    label: '描述',
    fieldName: 'description',
    component: 'Input',
    formItemClass: 'col-span-2',
    disabled: true,
  },
  {
    label: '所在位置',
    fieldName: 'location',
    component: 'Input',
    rules: 'required',
    disabled: true,
  },
  {
    label: '设备名称',
    fieldName: 'deviceName',
    component: 'Input',
    rules: 'required',
    disabled: true,
  },
  {
    label: '处理情况',
    fieldName: 'processingDetails',
    component: 'Input',
    componentProps: {
      rows: 3,
    },
    formItemClass: 'col-span-2',
    disabled: true,
  },
  {
    label: '处理时间',
    fieldName: 'processingTime',
    component: 'DatePicker',
    componentProps: {
      format: 'YYYY.MM.DD HH:mm',
      valueFormat: 'YYYY.MM.DD HH:mm',
      showTime: true,
    },
    disabled: true,
  },
  {
    label: '处理图片',
    fieldName: 'imgUrl',
    component: 'Input',
    rules: 'required',
    disabled: true,
  },
  {
    label: '级别',
    fieldName: 'level',
    component: 'Select',
    componentProps: {
      options: [
        { label: '特大', value: '特大' },
        { label: '重要', value: '重要' },
        { label: '一般', value: '一般' },
      ],
    },
    rules: 'selectRequired',
  },
  {
    label: '处理状态',
    fieldName: 'processingStatus',
    component: 'Select',
    componentProps: {
      options: [
        { label: '待分配', value: '待分配' },
        { label: '处理中', value: '处理中' },
        { label: '已完成', value: '已完成' },
      ],
    },
    rules: 'selectRequired',
  },
  {
    label: '预期处理时间',
    fieldName: 'expectedProcessingTime',
    component: 'DatePicker',
    componentProps: {
      format: 'YYYY.MM.DD HH:mm',
      valueFormat: 'YYYY.MM.DD HH:mm',
      showTime: true,
    },
    rules: 'required',
  },
];