<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <BreadcrumbBack />
      <span class="breadcrumb-title">{{ name }}</span>
    </header>
    <main class="safety-platform-container__main">
      <div class="template-table-merge-container">
        <TemplateTableMerge
          :operation-type="'template'"
          :main-table="templateDetail"
          :opinion-data="opinionData"
          :result-data="resultData"
        />
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router';
  import { ref, computed, onMounted } from 'vue';
  import TemplateTableMerge from './src/components/TemplateTableMerge.vue';
  import type { SpanTableData } from '@/views/disaster/disaster-precaution/src/type';
  import type { ContentItem } from '@/types/disaster-precaution';
  import { getTaskTemplateDetail } from '@/api/disaster-precaution';
  import { TASK_TEMPLATE_LIST } from './src/constants/template-detail';

  const resultData = ref<ContentItem>({} as ContentItem);
  const opinionData = ref<ContentItem>({} as ContentItem);

  const route = useRoute();
  const id = Number(route.params.id);
  const name = computed(() => {
    return TASK_TEMPLATE_LIST.find((item) => item.id === Number(id))?.name;
  });
  const templateDetail = ref<SpanTableData[]>([]);
  onMounted(async () => {
    const res = await getTaskTemplateDetail(id);
    templateDetail.value = res;
  });
</script>

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