<script setup lang="ts">
import { ref, defineAsyncComponent, onMounted } from "vue";
import { useQuasar } from "quasar";

import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";

const DataStore = useProbationDataStore();

const Header = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
    )
);
const FormReport = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/FormReport.vue"
    )
);

const $q = useQuasar();
const route = useRoute();
const { messageError, showLoader, hideLoader } = useCounterMixin();

const tab = ref<string>("save1");
const tabs = ref<any[]>([]);
const dataArrayNumber = ref<number>(1);
const assignId = ref<string>(route.params.form.toString());
const isLoad = ref<boolean>(false);
const fullName = ref<string>("");

const dataResult = ref<any>();

/**
 * @param id assignId
 */
async function fecthAssign(id: string) {
  isLoad.value = false;
  showLoader();
  await http
    .get(config.API.evaluateReportcreate(id))
    .then((res) => {
      dataResult.value = res.data.result;
      fullName.value = res.data.result.person.name;
      tabs.value = res.data.result.result.map((e: any, index: number) => {
        return { no: index + 1, ...e };
      });

      const report1 = tabs.value.find((e) => e.evaluate_no === 1);
      const report2 = tabs.value.find((e) => e.evaluate_no === 2);

      DataStore.isCheckFormReport1 = report1?.isResult ?? false;
      DataStore.isCheckFormReport2 = report2?.isResult ?? false;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
      isLoad.value = true;
    });
}

/**
 * download file
 * @param type type
 */
async function onDownloadFile(type: string) {
  const noNumber = tab.value ? Number(tab.value.charAt(4)) : "";
  showLoader();
  await http
    .get(config.API.reportEvaluateResult(type, assignId.value) + `/${noNumber}`)
    .then(async (res) => {
      const data = res.data.result;
      await genReport(
        data,
        `แบบรายงานการประเมินฯ${fullName.value}.${type}`,
        type
      );
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {
      hideLoader();
    });
}

const changeTab = (tabVal: string) => {
  tab.value = tabVal;
  dataArrayNumber.value = Number(tabVal.charAt(4));
};

/** ไปหน้า page add */
function addData() {
  tabs.value.push({ no: 2 });
}

onMounted(() => {
  fecthAssign(assignId.value);
});
</script>

<template>
  <Header
    v-if="tabs.length > 0"
    :change-tab="changeTab"
    :add-data="addData"
    :loop="tabs.length"
    :FileDownload="onDownloadFile"
    :checkPermission="false"
  />

  <q-tab-panels
    v-model="tab"
    animated
    swipeable
    vertical
    transition-prev="jump-up"
    transition-next="jump-up"
    v-if="tabs.length > 0"
    class="mt"
  >
    <q-tab-panel v-for="item in tabs" :name="`save${item.no}`" :key="item.no">
      <FormReport
        :tab="tab"
        :data="dataResult"
        :fetch-data="fecthAssign"
        action="edit"
        v-if="isLoad"
      />
    </q-tab-panel>
  </q-tab-panels>

  <div class="q-gutter-md" v-else>
    <div class="flex justify-center items-center q-my-md q-gutter-md">
      ยังไม่ได้ดำเนินการแบบประเมินผล
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mt {
  margin-top: 25px;
}
</style>
