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

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

// 出库字段（与数据库一致：物料号、需求数量、分配数量、拣选数量、原因）
const columns = [
  { key: 'goodsId', title: '物料号' },
  { key: 'needNum', title: '需求数量' },
  { key: 'distributeNum', title: '分配数量' },
  { key: 'pickNum', title: '拣选数量' },
  { key: 'reason', title: '原因' },
];

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

async function load() {
  try {
    const outsData = await getOutsData({ pageNum: 1, pageSize: 500 });
    const outs = outsData || [];
    rows.value = outs.map((o) => ({
      goodsId: o?.goodsId ?? '',
      needNum: Number(o?.needNum ?? 0),
      distributeNum: Number(o?.distribute_num ?? o?.distributeNum ?? o?.allocNum ?? o?.allocateNum ?? 0),
      pickNum: Number(o?.pick_num ?? o?.pickNum ?? 0),
      reason: o?.reason ?? o?.reasonDesc ?? '',
    }));
  } 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; /* 同时增加内边距使布局更舒适 */
}
</style>
