import dayjs from 'dayjs';
import { BasicColumn, FormSchema } from '/@/components/Table';
// import { h } from 'vue';
// import { Ref } from 'vue';
// import dayjs from 'dayjs';

// 1. 颜色映射（固定规则，可根据业务调整）
export const colorHexMap: Record<string, string> = {
  blue: '#1890ff',
  green: '#208840',
  gold: '#faad14',
  red: '#f5222d',
  gray: '#8c8c8c',
  black: '#000000',
};

// 2. 定义动态映射的类型（供外部传入）
export type ProductionStatusMap = Record<
  string | number,
  {
    label: string;
    value: number | string;
    color: string;
  }
>;

// 3. 生成表格列（支持传入动态映射）
export const columns: BasicColumn[] = [
  {
    title: '煤矿名称',
    dataIndex: 'mineName',
    width: 250,
  },
  {
    title: '煤矿简称',
    dataIndex: 'mineNameAbbr',
    width: 150,
    // ifShow: false,
  },
  {
    title: '生产状态',
    dataIndex: 'gjMineStatus',
    width: 120,
    // customRender: ({ record }) => {
    //   // 空值/异常值处理
    //   const status = record.mineProStatus;
    //   // 从动态映射中取值，兜底未知状态
    //   const { label, color } = dynamicStatusMap.value[status] || {
    //     label: '-',
    //   };
    //   return h(
    //     'span',
    //     {
    //       style: { color: colorHexMap[color] },
    //     },
    //     label
    //   );
    // },
  },
  {
    title: '定义数据错误',
    dataIndex: 'cddyError',
    width: 200,
  },
  {
    title: '最近定义数据错误时间',
    dataIndex: 'lastCddyTime',
    width: 200,
  },
  {
    title: '实时数据错误',
    dataIndex: 'cdssError',
    width: 200,
  },
  {
    title: '最近实时数据错误时间',
    dataIndex: 'lastCdssTime',
    width: 200,
  },
  // {
  //   title: '在线状态',
  //   dataIndex: 'mineLinkStatus',
  //   width: 100,
  //   customRender: ({ record }) => {
  //     const status = record.mineLinkStatus;
  //     if (status === undefined || status === null) {
  //       return h('span', { style: { color: colorHexMap.black } }, '-');
  //     }
  //     const text = status === 1 ? '在线' : '离线';
  //     const textColor = status === 1 ? colorHexMap.green : colorHexMap.red;
  //     return h('span', { style: { color: textColor } }, text);
  //   },
  // },
  // {
  //   title: '质量问题详情',
  //   dataIndex: 'queJson',
  //   width: 400,
  //   ellipsis: true,
  //   slots: { customRender: 'queJson' },
  // },
  // {
  //   title: '当前状态',
  //   dataIndex: 'isOk',
  //   width: 100,
  //   customRender: ({ record }) => {
  //     const status = record.isOk;
  //     const text = status ? '已解决' : '未解决';
  //     const textColor = status ? colorHexMap.green : colorHexMap.red;
  //     return h('span', { style: { color: textColor } }, text);
  //   },
  // },
  // {
  //   title: '处理时间',
  //   dataIndex: 'updateTime',
  //   width: 180,
  // },
];

// 3. 生成表格列（支持传入动态映射）
export const historyColumns: BasicColumn[] = [
  {
    title: '煤矿名称',
    dataIndex: 'mineName',
    width: 250,
  },
  {
    title: '错误信息',
    dataIndex: 'errorContent',
    width: 200,
  },
  {
    title: '起始时间',
    dataIndex: 'startTime',
    width: 200,
  },
  {
    title: '结束时间',
    dataIndex: 'endTime',
    width: 200,
  },
];

// 4. 查询表单配置（下拉框改为动态options）
export const searchFormSchema: FormSchema[] = [
  {
    field: 'deptId',
    label: '煤矿名称',
    component: 'MineCascader',
    colProps: { span: 6 },
    groupName: '常规查询',
  },
  // 启用生产状态下拉框（动态options）
  {
    field: 'gjMineStatus',
    label: '生产状态',
    component: 'JDictSelectTag',
    componentProps: {
      dictCode: 'mineProStatus',
      placeholder: '请选择生产状态',
    },
    colProps: { span: 6 },
  },
  {
    field: 'mineLinkStatus',
    label: '在线状态',
    component: 'Select',
    componentProps: {
      options: [
        { label: '离线', value: '0' },
        { label: '在线', value: '1' },
      ],
    },
    colProps: { span: 6 },
    groupName: '常规查询',
    show: false,
  },
];

// 4. 查询表单配置（下拉框改为动态options）
export const historySearchFormSchema: FormSchema[] = [
  {
    field: 'deptId',
    label: '煤矿名称',
    component: 'MineCascader',
    colProps: { span: 6 },
    groupName: '常规查询',
  },
  {
    field: 'startTime',
    label: '起始日期',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      //日期格式化，页面上显示的值
      format: 'YYYY-MM-DD HH:mm:ss',
      //返回值格式化（绑定值的格式）
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
    },
    defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD 00:00:00'),
    colProps: { span: 6 },
  },
  {
    field: 'endTime',
    label: '结束日期',
    component: 'DatePicker',
    componentProps: {
      //日期格式化，页面上显示的值
      format: 'YYYY-MM-DD HH:mm:ss',
      //返回值格式化（绑定值的格式）
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
    },
    defaultValue: dayjs().format('YYYY-MM-DD 23:59:59'),
    colProps: { span: 6 },
  },
];

export const topFormSchema: FormSchema[] = [
  {
    field: 'deptId',
    label: '煤矿名称',
    component: 'MineCascader',
    componentProps: {
      changeOnSelect: false,
      initFromStore: true,
      syncToStore: false,
    },
    required: true,
    rules: [{ required: true, message: '请选择煤矿名称', trigger: 'change' }],
  },
];

/** 弹框表单配置 */
export const formSchema: FormSchema[] = [
  {
    field: 'goafName',
    label: '工作面名称',
    component: 'Input',
    required: true,
    rules: [
      { required: true, message: '请输入工作面名称', trigger: 'blur' },
      { max: 100, message: '工作面名称长度不能超过100个字符', trigger: 'blur' },
    ],
  },
  {
    field: 'startTime',
    label: '开始时间',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss',
    },
    required: true,
    rules: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
  },
  {
    field: 'endTime',
    label: '结束时间',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss',
    },
    required: true,
    rules: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
  },
  {
    field: 'queCon',
    label: '问题描述',
    component: 'InputTextArea',
    componentProps: {
      rows: 4,
      maxlength: 500,
      showCount: true,
    },
    required: true,
    rules: [
      { required: true, message: '请输入问题描述', trigger: 'blur' },
      { max: 500, message: '问题描述长度不能超过500个字符', trigger: 'blur' },
    ],
  },
  // {
  //   field: 'param',
  //   label: '参数',
  //   component: 'Input',
  //   required: true,
  //   rules: [
  //     { required: true, message: '请输入参数', trigger: 'blur' },
  //     { max: 200, message: '参数长度不能超过200个字符', trigger: 'blur' },
  //   ],
  // },
];

export const exportFormSchema: FormSchema[] = [
  {
    field: 'startTime',
    label: '开始时间',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss',
    },
    required: true,
    rules: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
  },
  {
    field: 'endTime',
    label: '结束时间',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss',
    },
    required: true,
    rules: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
  },
];
