<script setup lang="ts">
import { ref } from "vue";

/** importComponts*/
import DialogHeader from "@/components/DialogHeader.vue";
import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";

/** importStore*/
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

/** use*/
const store = useEvaluateDetailStore();
const modalPerview = ref<boolean>(false);  //แสดง Popup เอกสาร
</script>

<template>
  <q-card bordered class="col-12 row shadow-0">
    <div class="col-12 row items-center q-pa-sm q-gutter-sm">
      <div class="q-pl-sm text-weight-medium">เอกสารที่อัปโหลด</div>
      <q-space />
      <q-btn
        flat
        dense
        color="primary"
        icon="mdi-download"
        target="_blank"
        :href="store.urlDownloadFile"
      >
        <q-tooltip>ดาวน์โหลด</q-tooltip>
      </q-btn>
      <q-btn
        flat
        dense
        color="primary"
        icon="mdi-fullscreen"
        @click="modalPerview = true"
        ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
      >
    </div>
    <div class="col-12"><q-separator /></div>
    <q-tab-panels
      v-model="store.tabPanels"
      animated
      swipeable
      vertical
      class="col-12 row"
    >
      <q-tab-panel name="1" class="col-12">
        <ViewPDF />
      </q-tab-panel>

      <q-tab-panel name="2" class="col-12">
        <ViewPDF />
      </q-tab-panel>

      <q-tab-panel name="3" class="col-12">
        <ViewPDF />
      </q-tab-panel>
      <q-tab-panel name="4" class="col-12">
        <ViewPDF />
      </q-tab-panel>
      <q-tab-panel name="5" class="col-12">
        <ViewPDF />
      </q-tab-panel>
      <q-tab-panel name="6" class="col-12">
        <ViewPDF />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>

  <q-dialog v-model="modalPerview" full-width fullHeight persistent>
    <q-card>
      <q-card-section>
        <DialogHeader :close="() => (modalPerview = false)" />
      </q-card-section>

      <q-card-section class="q-pt-none">
        <ViewPDF :type="'popup'" />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style>
.q-tab-panel {
  padding: 0px;
}
</style>
