import { BasicColumn } from '/@/components/Table';
import { ModuleDataChart } from '/@/views/vent/deviceManager/configurationTable/types';

import { h } from 'vue'; // 引入vue的h函数用于创建VNode

// 导入图片资源（关键步骤）
import rank1 from '@/assets/images/dataCenter/infoCenter/rank-1.png';
import rank2 from '@/assets/images/dataCenter/infoCenter/rank-2.png';
import rank3 from '@/assets/images/dataCenter/infoCenter/rank-3.png';
import rank4 from '@/assets/images/dataCenter/infoCenter/rank-4.png';
// 系统数据排名
export const sysDataColumn: BasicColumn[] = [
  {
    title: '',
    align: 'center',
    width: 60,
    // 修正customRender的类型和返回值
    customRender: ({ index }: { index: number }) => {
      // 确保index是数字类型，避免算术运算错误
      const numIndex = Number(index);
      let rankImg = '';
      if (numIndex === 0) {
        rankImg = rank1;
      } else if (numIndex === 1) {
        rankImg = rank2;
      } else if (numIndex === 2) {
        rankImg = rank3;
      } else {
        rankImg = rank4;
      }
      return h(
        'div',
        {
          style: {
            width: '80px',
            height: '35px',
            backgroundImage: `url(${rankImg})`,
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat',
            position: 'relative',
            margin: '0 15px',
          },
        },
        [
          // 排名文字
          h(
            'span',
            {
              style: {
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                color: '#fff',
                fontSize: '14px',
                fontWeight: 'bold',
              },
            },
            `NO.${index + 1}`
          ), // 显示NO.1、NO.2等
        ]
      );
    },
  },
  {
    title: '设备类别',
    dataIndex: 'devKind',
    align: 'center',
  },
  {
    title: '设备数量',
    dataIndex: 'devNum',
    align: 'center',
  },
  {
    title: '数据采集量',
    dataIndex: 'dataCount',
    align: 'center',
  },
];

//系统接入情况
export const accessStatusColumn: BasicColumn[] = [
  {
    title: '序号',
    align: 'center',
    customRender: ({ index }: { index: number }) => `${index + 1}`,
  },
  {
    title: '设备名称',
    dataIndex: 'devicekind_dictText',
    align: 'center',
  },
  {
    title: '设备接入时间',
    dataIndex: 'createTime',
    align: 'center',
  },
  {
    title: '点位数量',
    dataIndex: 'monitorPointNum',
    align: 'center',
  },
  {
    title: '网络状态',
    dataIndex: 'netStatus',
    align: 'center',
    // 添加状态转换逻辑
    customRender: ({ record }) => {
      // 将状态值转为数字进行判断
      const status = Number(record.netStatus);
      return status === 1 ? '正常' : '断开';
    },
  },
  {
    title: '数据更新时间',
    dataIndex: 'dataUpdateTime',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 200,
    align: 'center',
    slots: { customRender: 'action' },
  },
];
// 每日采集数据表格属性
export const dailyNumOption: ModuleDataChart = {
  type: 'bar',
  readFrom: '',
  legend: { show: false },
  grid: {
    left: 100,
  },
  xAxis: [
    {
      show: true,
      axisLabel: {
        rotate: 45, // 在这里配置旋转角度
        interval: 0,
      },
    },
  ],
  yAxis: [
    {
      show: true,
      name: '',
      position: 'left',
    },
  ],
  series: [{ readFrom: 'collectDataByDayList', xprop: 'day', yprop: 'total_count', label: '' }],
  dataZoom: [
    {
      type: 'slider' as any,
      show: true,
      xAxisIndex: 0,
      height: 10,
      bottom: 10,
      start: 0,
      handleStyle: { color: '#66ffff' },
      backgroundColor: 'rgba(102, 255, 255, 0.1)', // 滚动条背景色，适配UI
    },
    {
      type: 'inside' as any, // 支持鼠标滚轮缩放柱子
      xAxisIndex: 0,
      zoomOnMouseWheel: true,
    },
  ] as any[],
};