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

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

// 拣选字段
const columns = [
  { key: 'vehicleId', title: '料箱号', width: 200 },
  { key: 'pickStand', title: '拣选站台' },
  { key: 'pickStatus', title: '状态' },
];

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

function mapStatus(status) {
  const code = Number(status);
  // 对齐后端 WmsPickTaskStatusEnum
  switch (code) {
    case -2: return '入库用';
    case -1: return '暂存中';
    case 0: return '待下发';
    case 1: return '已下发';
    case 2: return '执行中';
    case 3: return '已到达';
    case 4: return '已离开';
    case 5: return '已取消';
    default: return String(status ?? '');
  }
}

async function load() {
  try {
    const tasksData = await getPickTaskDataP2({ pageNum: 1, pageSize: 1000 });
    const tasks = tasksData || [];
    rows.value = tasks.map((t) => ({
      vehicleId: t?.vehicleId ?? '',
      pickStand: t?.pickStand ?? t?.pick_stand ?? t?.pickStation ?? t?.station ?? '',
      createTime: t?.createTime ?? t?.gmtCreate ?? '',
      arriveTime: t?.arriveTime ?? t?.reachTime ?? '',
      pickStatus: mapStatus(t?.pickStatus ?? t?.pick_status ?? 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: 50%;
}

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