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: '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,
  },
];

// 4. 查询表单配置（下拉框改为动态options）
export const searchFormSchema: FormSchema[] = [
  {
    field: 'deptId',
    label: '煤矿名称',
    component: 'Input',
    colProps: { span: 6 },
    groupName: '常规查询',
    slot: 'mine-cascader',
  },
  {
    field: 'goafId',
    label: '密闭名称',
    component: 'Input',
    colProps: { span: 6 },
    groupName: '常规查询',
    slot: 'goaf-select',
  },
  // 启用生产状态下拉框（动态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,
  },
];

export const topFormSchema: FormSchema[] = [
  {
    field: 'mineName',
    label: '煤矿名称',
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'devicePos',
    label: '密闭名称',
    component: 'Input',
    componentProps: {},
  },
];

/** 弹框表单配置 */
export const formSchema: FormSchema[] = [
  {
    field: 'queTitle',
    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,
    },
    // componentProps: {
    //   //是否禁用
    //   disabled: false,
    // },
    required: true,
    rules: [
      { required: true, message: '请输入问题描述', trigger: 'blur' },
      { max: 500, message: '问题描述长度不能超过500个字符', trigger: 'blur' },
    ],
  },
  {
    label: '密闭墙问题照片',
    field: 'queFileUrls',
    component: 'JImageUpload',
    componentProps: {
      //按钮显示文字
      text: '图片上传',
      //支持两种基本样式picture和picture-card
      listType: 'picture-card',
      //用于控制文件上传的业务路径,默认temp
      bizPath: 'webfile',
      //是否禁用
      disabled: false,
      //最大上传数量
      fileMax: 9,
    },
    colProps: {
      span: 6,
    },
  },
  {
    label: '密闭墙确认照片',
    field: 'okQueFileUrls',
    component: 'JImageUpload',
    componentProps: {
      //按钮显示文字
      text: '图片上传',
      //支持两种基本样式picture和picture-card
      listType: 'picture-card',
      //用于控制文件上传的业务路径,默认temp
      bizPath: 'webfile',
      //是否禁用
      disabled: false,
      //最大上传数量
      fileMax: 9,
    },
    colProps: {
      span: 6,
    },
  },
  // {
  //   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' }],
  },
];