<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 {
    // 获取106位置的托盘号
    const response106 = await fetch('http://172.18.222.253:9980/api/upper/pub/getStandCode?standId=106');
    const data106 = await response106.json();
    const containerNo106 = data106.returnData || '';

    // 获取108位置的托盘号
    const response108 = await fetch('http://172.18.222.253:9980/api/upper/pub/getStandCode?standId=108');
    const data108 = await response108.json();
    const containerNo108 = data108.returnData || '';

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

// 获取质检数据
async function getQualityData(containerNos) {
  const qualityData = [];

  for (const containerNo of containerNos) {
    try {
      // 向EWM系统请求数据
      const response = await fetch('http://your-ewm-api-endpoint/data', { // 这里替换为实际的API地址
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Basic ' + btoa('asrs:mom@123456') // Basic Auth认证
        },
        body: JSON.stringify({ containerNo })
      });

      if (response.ok) {
        const data = await response.json();
        // 处理返回的数据
        if (data.grInfoList && Array.isArray(data.grInfoList)) {
          data.grInfoList.forEach(item => {
            qualityData.push({
              vehicleId: data.containerNo,
              matNo: item.matNo,
              inspectStatus: item.inspectStatus ? '是' : '否',
              inspectCode: item.inspectStatus ? (item.firstDemo ? '首样合格' : '质检合格') : '未质检'
            });
          });
        }
      }
    } 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>
