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

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

// 入库字段
const columns = [
  { key: 'vehicleId', title: '料箱号' },
  { key: 'origin', title: '起点' },
  { key: 'destination', title: '终点' },
  //{ key: 'taskPriority', title: '优先级' },
  { key: 'taskStatus', title: '状态' },
];

const rows = ref([]);
let timer = null;

function mapStatus(status) {
  const code = Number(status);
  // 对齐后端 WmsStackerTaskStatusEnums
  switch (code) {
    case -2: return '定时器用';
    case -1: return '暂存';
    case 0: return '初始化';
    case 1: return '已解析';
    case 2: return '已下发';
    case 3: return '正在执行';
    case 4: return '执行完成';
    case 98: return '已取消';
    case 99: return '执行异常';
    default: return String(status ?? '');
  }
}

async function load() {
  try {
    const data = await getTaskTypInData({ pageNum: 1, pageSize: 200, standId: 3 });
    const list = data || [];
    rows.value = list.map((t) => ({
      vehicleId: t?.vehicleId ?? '',
      origin: t?.origin ?? t?.startPoint ?? '',
      destination: t?.destination ?? t?.endPoint ?? '',
      taskPriority: (
          t?.task_priority ??
          t?.taskPriority ??
          t?.priority ??
          t?.priorityLevel ??
          ''
      ),
      taskStatus: mapStatus(t?.taskStatus ?? t?.status),
    }));
  } catch (error) {
    console.error('加载入库数据失败:', error);
  }
}

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

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

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

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

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

:deep(tbody td) {
  font-size: 40px; /* 表格内容字体 */
  padding: 16px 12px; /* 同时增加内边距使布局更舒适 */
}
/* 设置第一列（料箱号）宽度为30% */
:deep(th:nth-child(1)),
:deep(td:nth-child(1)) {
  width: 48%;
}

/* 设置第二列（起点）宽度为10% */
:deep(th:nth-child(2)),
:deep(td:nth-child(2)) {
  width: 12%;
}
/* 设置第三列（终点）宽度 */
:deep(th:nth-child(3)),
:deep(td:nth-child(3)) {
  width: 20%;
}

/* 设置第四列（优先级）宽度 */
:deep(th:nth-child(4)),
:deep(td:nth-child(4)) {
  width: 20%;
}


</style>
