<script setup lang="ts">
import { ref, defineAsyncComponent, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";

import genReport from "@/plugins/genreport";

const probationStore = useProbationDataStore();
const { fecthdataAssign } = probationStore;

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

const router = useRouter();
const route = useRoute();
const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
const mixin = useCounterMixin();
const $q = useQuasar();
const { showLoader, hideLoader, messageError, success } = mixin;
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.personalId.toString());

// const fullname = ref<string>("");
const tab = ref<string>("save1");
const tabs = ref<any>([]);
const dataArrayNumber = ref<number>(1);
const evaluate = ref<any>([]);

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

const fecthAssign = async (id: string) => {
  showLoader();
  await http
    .get(config.API.createformChairman(id))
    .then(async (res: any) => {
      await fecthdataAssign(res.data.result);
      evaluate.value = probationStore.evaluate;
      // fullname.value = res.data.result.person ? res.data.result.person.name : "";
      tabs.value = evaluate.value;
      dataArrayNumber.value = 1;
    })
    .catch((e) => {
      // messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const FileDownload = async (type: string) => {
  let numTab = evaluate.value.find((e: any) => e.no === dataArrayNumber.value);
  showLoader();
  await http
    .get(config.API.reportEvaluateChairman(type, numTab.id))
    .then(async (res) => {
      const data = res.data.result;
      await genReport(
        data,
        `แบบประเมินผล(คณะกรรมการ)_${probationStore.person.name}_ครั้งที่${numTab.no}`,
        type
      );
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {
      hideLoader();
    });
};
const addData = () => {
  router.push(
    `/probation/detail/addevaluascore/${personalId.value}/${assignId.value}`
  );
};

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

<template>
  <Header
    v-if="tabs.length > 0"
    :change-tab="changeTab"
    :loop="tabs.length"
    :add-data="addData"
    :FileDownload="FileDownload"
    :checkPermission="probationStore?.dataPermissions?.tab5?.isEdit as boolean"
    :is-max="tabs.length === 2"
  />

  <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 probationStore.evaluate"
      :name="`save${item.no}`"
      :key="item.no"
    >
      <FormEvaluateScore
        :tab="tab"
        :data="evaluate.find((x: any) => x.no === dataArrayNumber)"
        action="edit"
      />
    </q-tab-panel>
  </q-tab-panels>

  <div class="q-gutter-md" v-if="tabs.length === 0">
    <div class="flex justify-center items-center q-my-md q-gutter-md">
      <q-btn
        v-if="!checkRoutePermisson"
        outline
        color="primary"
        label="สร้างแบบประเมิน"
        @click="addData"
        :disable="probationStore.dataPermissions?.tab5.isEdit == false"
      />
    </div>
  </div>
</template>

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