
<template>
  <div id="scroll-board">
    <!-- 添加加载状态提示 -->
    <div v-if="loading" class="loading-text">数据加载中...</div>
    <!-- 添加数据为空提示 -->
    <div v-if="!loading && config.data.length === 0" class="empty-text">暂无维修工单数据</div>
    <dv-scroll-board v-else :config="config" />
  </div>
</template>

<script>
import { getRepairWorkOrder } from "@/api/kanban/equipment";
import moment from "moment";

export default {
  name: 'ScrollBoard',
  data() {
    return {
      loading: false, // 新增加载状态
      config: {
        header: ['序号', '设备', '故障信息', '计划维修时间'], // 添加序号列
        data: [],
        index: false, // 关闭自动索引，使用自定义序号
        columnWidth: [50, 120, 200, 200], // 调整列宽
        align: ['center'],
        rowNum: 7,
        headerBGC: '#1981f6',
        headerHeight: 45,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      }
    }
  },
  methods: {
    async getdatalist() {
      try {
        this.loading = true;
        const response = await getRepairWorkOrder({
          poolName: "ds_1000"
        });

        if (response.data?.length > 0) {
          // 数据预处理
          const processedData = response.data.map((item, index) => {
            // 确保字段存在并提供默认值
            const deviceName = item.equipmentName || '未知设备';
            const faultInfo = item.workFaultDesc || '无故障描述';

            // 时间格式化（添加容错处理）
            const repairTime = item.workPlanTime ?
              moment(item.workPlanTime).format("YYYY-MM-DD HH:mm:ss") :
              '--';

            // 返回带序号的完整数据行
            return [`${index + 1}`, deviceName, faultInfo, repairTime];
          });

          // 响应式更新配置
          this.config = {
            ...this.config,
            data: processedData
          };
        }
      } catch (error) {
        console.error('数据获取失败:', error);
        // 显示错误数据
        this.config.data = [['-', '数据加载失败', '请稍后重试', '-']];
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.getdatalist();
    // 添加定时刷新（可选）
    this.timer = setInterval(() => {
      this.getdatalist();
    }, 60000); // 60秒刷新
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
  }
}
</script>

<style lang="less">
#scroll-board {
  width: 50%;
  box-sizing: border-box;
  margin-left: 20px;
  height: 100%;
  overflow: hidden;
}
</style>
