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

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

// 入库字段
const columns = [
  { key: 'vehicleId', title: '托盘号' },
  { key: 'matNo', title: '物料号' },
  { key: 'inspectStatus', title: '是否质检' },
  { key: 'inspectCode', title: '质检结果' },
];

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

// 获取托盘号
async function getContainerNos() {
  try {
    // 获取114位置的托盘号
    const response114 = await fetch('http://172.18.222.253:9980/api/upper/pub/getStandCode?standId=114');
    const data114 = await response114.json();
    const containerNo114 = data114.returnData || '';

    // 获取116位置的托盘号
    const response116 = await fetch('http://172.18.222.253:9980/api/upper/pub/getStandCode?standId=116');
    const data116 = await response116.json();
    const containerNo116 = data116.returnData || '';

    return [containerNo114, containerNo116].filter(no => no !== '');
  } catch (error) {
    console.error('获取托盘号失败:', error);
    return [];
  }
}

// 获取质检数据（模拟实现，根据实际需求调整）
async function getQualityData(containerNos) {
  const qualityData = [];

  for (const containerNo of containerNos) {
    try {
      // 模拟数据结构，实际应根据接口文档调整
      qualityData.push({
        vehicleId: containerNo,
        matNo: 'MAT-' + Math.floor(Math.random() * 10000),
        inspectStatus: Math.random() > 0.5 ? '是' : '否',
        inspectCode: Math.random() > 0.5 ? '合格' : '不合格'
      });
    } catch (error) {
      console.error(`处理托盘${containerNo}数据失败:`, error);
    }
  }

  return qualityData;
}

async function load() {
  try {
    // 获取托盘号
    const containerNos = await getContainerNos();

    if (containerNos.length > 0) {
      // 获取质检数据
      const qualityData = await getQualityData(containerNos);
      rows.value = qualityData;
    } 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(.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: 40%;
}

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

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