<template>
  <div class="h-full flex flex-col gap-y-3">
    <n-page-header @back="$router.back">
      <template #title> 报告审核 </template>
      <template #extra>
        <n-button type="primary" @click="handleCheck">审核</n-button>
      </template>
    </n-page-header>
    <n-descriptions bordered>
      <n-descriptions-item label="报告名称">
        {{ taskInfo.T_name }}
      </n-descriptions-item>
      <n-descriptions-item label="创建时间">
        {{ taskInfo.CreateTime }}
      </n-descriptions-item>
      <n-descriptions-item label="修改时间">
        {{ taskInfo.UpdateTime }}
      </n-descriptions-item>
    </n-descriptions>
    <n-tabs class="flex-1" type="segment" animated size="large">
      <n-tab-pane
        class="h-full flex flex-col gap-y-3"
        name="1"
        tab="验证方案"
        display-directive="show:lazy"
      >
        <n-space justify="end">
          <n-button text style="font-size: 24px" @click="onPrint">
            <n-icon>
              <printer-icon />
            </n-icon>
          </n-button>
        </n-space>
        <n-scrollbar :style="{ maxHeight: `${height - 350}px` }" trigger="none">
          <vue-pdf-embed ref="pdfRef" :source="state.pdf1" />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane
        class="h-full flex flex-col gap-y-3"
        name="2"
        tab="验证报告"
        display-directive="show:lazy"
      >
        <n-space justify="end">
          <n-button text style="font-size: 24px" @click="onPrint">
            <n-icon>
              <printer-icon />
            </n-icon>
          </n-button>
        </n-space>
        <n-scrollbar :style="{ maxHeight: `${height - 350}px` }" trigger="none">
          <vue-pdf-embed ref="pdfRef" :source="state.pdf2" />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane
        class="h-full flex flex-col gap-y-3"
        name="3"
        tab="校准证书"
        display-directive="show:lazy"
      >
        <TabThree :task="task" :height="height" />
      </n-tab-pane>
      <n-tab-pane
        class="h-full flex flex-col gap-y-3"
        name="4"
        tab="验证数据"
        display-directive="show:lazy"
      >
        <TabFour :task="task" />
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script setup>
import VuePdfEmbed from 'vue-pdf-embed';
import { getTask, updateTaskData } from '@/api';
import { PrinterOutlined as PrinterIcon } from '@vicons/antd';
import TabThree from './TabThree.vue';
import TabFour from './TabFour.vue';
import { useWindowSize } from '@vueuse/core';

const { height } = useWindowSize();

const dialog = useDialog();

const message = useMessage();

const state = reactive({
  pdf1: '',
  pdf2: '',
});

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

const pdfRef = ref(null);

// 任务信息
const taskInfo = ref({});

// 打印pdf
const onPrint = () => {
  pdfRef.value.print();
};

//
const handleCheck = () => {
  dialog.info({
    title: '审核',
    content: '请仔细检查报告内容、报告证书、报告数据都是否有误？',
    positiveText: '确定都没有问题',
    negativeText: '取消',
    maskClosable: false,
    onPositiveClick: updateTask,
  });
};

// 更新线上数据
const updateTask = async () => {
  const { data: res } = await updateTaskData({
    T_task_id: task.T_task_id,
  });
  if (res.Code === 200) {
    message.success(res.Msg);
  }
};

// 任务（获取）
const getTaskInfo = async () => {
  const { data: res } = await getTask({
    T_task_id: task.T_task_id,
  });
  taskInfo.value = res.Data || {};
  state.pdf1 = taskInfo.value.T_pdf1;
  state.pdf2 = taskInfo.value.T_pdf2;
};

getTaskInfo();
</script>

<style scoped lang="scss">
:deep(.n-tabs-pane-wrapper) {
  flex: 1;
}
</style>
