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

// 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 function getColumns(dynamicStatusMap: Ref<ProductionStatusMap>) {
  const columns: BasicColumn[] = [
    {
      title: '煤矿名称',
      dataIndex: 'mineName',
      width: 250,
    },
    {
      title: '煤矿简称',
      dataIndex: 'mineNameAbbr',
      width: 150,
    },
    {
      title: '生产状态',
      dataIndex: 'mineProStatus',
      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,
    },
  ];
  return columns;
}

// 4. 查询表单配置（下拉框改为动态options）
export function getSearchFormSchema(dynamicStatusOptions: Ref<{ label: string; value: string | number }[]>) {
  const searchFormSchema: FormSchema[] = [
    {
      field: 'mineCode',
      label: '煤矿名称',
      component: 'MineCascader',
      colProps: { span: 6 },
      groupName: '常规查询',
    },
    // 启用生产状态下拉框（动态options）
    {
      field: 'productionStatus',
      label: '生产状态',
      component: 'Select',
      componentProps: {
        // 动态绑定下拉选项
        options: dynamicStatusOptions,
      },
      colProps: { span: 6 },
      groupName: '常规查询',
    },
    {
      field: 'mineLinkStatus',
      label: '在线状态',
      component: 'Select',
      componentProps: {
        options: [
          { label: '离线', value: '0' },
          { label: '在线', value: '1' },
        ],
      },
      colProps: { span: 6 },
      groupName: '常规查询',
    },
  ];
  return searchFormSchema;
}
export const topFormSchema: FormSchema[] = [
  {
    field: 'mineCode',
    label: '煤矿名称',
    component: 'MineCascader',
    required: true,
  },
];

/** 弹框表单配置 */
export const formSchema = [
  {
    field: 'goafName',
    label: '工作面名称',
    component: 'Input',
  },
  {
    field: 'queCon',
    label: '问题描述',
    component: 'Input',
  },
  {
    field: 'startTime',
    label: '开始时间',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss',
    },
    required: true,
  },
  {
    field: 'endTime',
    label: '结束时间',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss',
    },
    required: true,
  },
  {
    field: 'param',
    label: '参数',
    component: 'Input',
    required: true,
  },
];