<template>
  <div class="h-full flex flex-col gap-y-3">
    <n-page-header @back="$router.back">
      <template #title> 数据校验 </template>
    </n-page-header>
    <n-data-table
      remote
      :loading="loading"
      :columns="columns"
      :data="dataList"
      :bordered="false"
      flex-height
      class="flex-1"
    />
  </div>
</template>

<script setup>
import { h } from 'vue';
import { checkTaskData } from '@/api';
import { NTag } from 'naive-ui';

const task = window.sessionStorage.getItem('task')
  ? JSON.parse(window.sessionStorage.getItem('task'))
  : {};

// 查询数据
const queryData = reactive({
  T_task_id: task.T_task_id,
});

// 需要展示的列
const columns = [
  {
    title: '编号',
    key: 'T_id',
  },
  {
    title: 'SN',
    key: 'T_sn',
  },
  {
    title: '数据量',
    key: 'T_unm',
  },
  {
    title: '时间间隔',
    key: 'T_time_interval',
  },
  {
    title: '开始时间',
    key: 'Time_start',
  },
  {
    title: '结束时间',
    key: 'Time_end',
  },
  {
    title: '结果',
    key: 'Result',
    width: 700,
    render(row) {
      return h(
        NTag,
        {
          type: row.Result === 200 ? 'success' : 'error',
          bordered: false,
          size: 'large',
        },
        { default: () => (row.Result === 200 ? 'OK' : row.Result_str) }
      );
    },
  },
];

// 列表
const dataList = ref([]);

// 表格数据是否加载完成
const loading = ref(false);

// 获取列表
const getDataList = async () => {
  try {
    loading.value = true;
    const { data: res } = await checkTaskData(queryData);
    dataList.value = res.Data ? res.Data : [];
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
};

getDataList();
</script>

<style scoped></style>
