<template>
  <div class="search-table-container">
    <p class="title">
      任务名称：<span class="content">{{ taskName }}</span>
    </p>
    <p class="title">
      被检查（自查）所/部/中心：<span class="content">{{ deptName }}</span>
    </p>
    <div class="export-file" @click="exportTaskDetailToPDF(id, taskName)" v-if="taskState === TASK_STAGE.COMPLETED">
      <el-button type="primary">
        <template #icon>
          <img :src="ExportIcon" />
        </template>
        导出预防检查任务单
      </el-button>
    </div>
    <div class="template-table-merge-container">
      <TemplateTableMerge
        :operation-type="operateType"
        :main-table="templateDetail"
        :opinion-data="opinionData"
        :result-data="resultData"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { ref, onMounted } from 'vue';
  import TemplateTableMerge from './TemplateTableMerge.vue';
  import { exportTaskDetailToPDF } from '../utils';
  import type { SpanTableData } from '@/views/disaster/disaster-precaution/src/type';
  import type { TemplateDetailResponse, ContentItem } from '@/types/disaster-precaution';
  import { getTaskExecutionDetail, getTaskTemplateDetail } from '@/api/disaster-precaution';
  import { TASK_STAGE } from '../constants/task-execution';
  import ExportIcon from 'assets/svg/export.svg';

  const route = useRoute();
  const id = Number(route.query.id);
  const taskName = String(route.query.name);
  const deptName = String(route.query.deptName);
  const taskState = Number(route.query.taskState);
  const operateType = ref<'view' | 'template'>('view');
  const inspectType = Number(route.query.inspectType);
  const opinionData = ref<ContentItem>({} as ContentItem);
  const resultData = ref<ContentItem>({} as ContentItem);

  const templateDetail = ref<SpanTableData[]>([]);
  // 带审核和已完成调用后端查询任务执行详情接口
  const getTaskExecutionDetailList_Task = async () => {
    const res = await getTaskExecutionDetail(id);
    const templateDetailList = JSON.parse(res.detail) as TemplateDetailResponse;
    templateDetail.value = templateDetailList.inspectTemplateDetailVOs;
    opinionData.value = templateDetailList.deptOpinion || ({} as ContentItem);
    resultData.value = templateDetailList.inspectResult || ({} as ContentItem);
  };
  // 其他状态调用后端模板接口
  const getTaskExecutionDetailList_Template = async () => {
    const res = await getTaskTemplateDetail(inspectType);
    templateDetail.value = res;
  };
  const getTaskExecutionDetailList = async () => {
    if (taskState === TASK_STAGE.COMPLETED || taskState === TASK_STAGE.PENDING_APPROVAL) {
      operateType.value = 'view';
      getTaskExecutionDetailList_Task();
    } else {
      operateType.value = 'template';
      getTaskExecutionDetailList_Template();
    }
  };
  onMounted(() => {
    getTaskExecutionDetailList();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-main-layout.scss' as *;
  @use '../style/common.scss' as *;
  @use '../style/task-template.scss' as *;
</style>
