<template>
  <div>
    <DataTable :columns="columns" :data="rows" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import DataTable from '../components/DataTable.vue';
import { getStackerData } from '@/services/api';

// 堆垛机状态字段
const columns = [
  { key: 'tunnelId', title: '堆垛机编号' },
  { key: 'plcId', title: '任务号' },
  {
    key: 'stackerStatus',
    title: '设备状态',
    formatter: (value) => value // 添加格式化函数
  },
  { key: 'controlModel', title: '堆垛机控制方式' },
];

const rows = ref([]);

let timer = null;

// 状态码映射
const statusMap = {
  '-1': '未知',
  0: '脱机',
  1: '空闲',
  2: '任务接收',
  3: '取货移动',
  4: '取货中',
  5: '取货完成',
  6: '卸货移动',
  7: '卸货中',
  8: '卸货完成',
  9: '任务完成',
  10: '删除任务',
  11: '盘点中',
  21: '二次预约申请'
};

// 控制模式映射
const controlModeMap = {
  '-1': '未知',
  0: '离线',
  1: '自学习',
  2: '调试',
  3: '手动',
  4: '单机',
  5: '联机'
};

async function load() {
  try {
    const response = await getStackerData({ pageNum: 1, pageSize: 100 });

    // 解析返回的数据结构
    const stackerData = response?.returnData || response?.data || [];

    if (Array.isArray(stackerData)) {
      rows.value = stackerData.map(item => ({
        tunnelId: item?.tunnelId ?? '',
        plcId: item?.plcId ?? '',
        stackerStatus: statusMap[item?.stackerStatus] || item?.stackerStatus || '',
        controlModel: controlModeMap[item?.controlModel] || item?.controlModel || ''
      }));
    } else {
      rows.value = [];
    }
  } catch (error) {
    console.error('加载堆垛机状态数据失败:', error);
    rows.value = [];
  }
}

onMounted(() => {
  load();
  timer = setInterval(load, 5000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped>
.title-center {
  text-align: center;
}

/* 为设备状态添加淡色框包围样式，增大字体 */
:deep(.stacker-status) {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background-color: #f6f8fa;
  color: #24292f;
  font-size: 40px; /* 增大字体 */
  line-height: 1.4;
}

/* 增大表格整体字体 */
:deep(.table-wrapper) {
  font-size: 40px;
}

:deep(thead th) {
  font-size: 40px; /* 表头字体稍大 */
}

:deep(tbody td) {
  font-size: 40px; /* 表格内容字体 */
  padding: 16px 12px; /* 同时增加内边距使布局更舒适 */
}
</style>
