<template>
  <div class="disaster-precaution-container">
    <header class="disaster-precaution-container__header">
      <img :src="BackIcon" alt="back" class="back-icon" @click="router.back()" />
      <span class="disaster-precaution-container__title">{{ name }}</span>
    </header>
    <main class="disaster-precaution-container__main">
      <div class="template-container">
        <span class="title">被检查（自查）单位名称：</span>
        <TemplateTableMerge :operation-type="operationType" :main-table="data!" height="62vh" />
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import BackIcon from 'assets/svg/back.svg';
  import { TASK_TEMPLATE_LIST } from './src/constants/template-detail';
  import TemplateTableMerge from './src/components/TemplateTableMerge.vue';

  const route = useRoute();
  const router = useRouter();
  const id = route.params.id;
  const operationType = ref<'view' | 'edit'>('view');
  const name = computed(() => {
    return TASK_TEMPLATE_LIST.find((item) => item.id === Number(id))?.name;
  });
  const data = computed(() => {
    return TASK_TEMPLATE_LIST.find((item) => item.id === Number(id))?.data;
  });
  onMounted(() => {
    operationType.value = route.query.operate as unknown as 'view' | 'edit';
  });
</script>

<style lang="scss" scoped>
    @use '../style/disaster.scss' as *;
  .back-icon {
    width: 16cpx;
    cursor: pointer;
  }
  .disaster-precaution-container__header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8cpx !important;
  }
  .template-container {
    display: flex;
    flex-direction: column;
    gap: 16cpx;
    width: 100%;
    height: 100%;
    .title {
      font-size: 14cpx;
      color: rgba(0, 0, 0, 0.85);
    }
  }
</style>
