<script setup lang="ts">
import { useQuasar } from "quasar";
import { ref, onMounted, defineAsyncComponent } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";

import http from "@/plugins/http";
import config from "@/app.config";

import { useProbationStore } from "@/modules/11_probation/store/probation";

const ResultPage = defineAsyncComponent(
  () => import("@/modules/11_probation/component/editPage/01_result.vue")
);
const evaluate = ref<any>([]);
const store = useProbationStore();
const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const mode = ref<any>($q.screen.gt.xs);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;

const id = ref<string>(route.params.id as string);
const profileId = ref<string>(route.params.profileId as string);

const fullname = ref<string>("");
const dataArrayNumber = ref<number>();
/** get ข้อมูล มอบหมาย
 * @param id person id
 */
async function fecthAssign(id: string) {
  showLoader();
  await http
    .get(config.API.formevaluate(id))
    .then(async (res: any) => {
      await store.fecthdataAssign(res.data.data);
      evaluate.value = res.data.data.evaluate;
      fullname.value = res.data.data.experimentee
        ? res.data.data.experimentee.name
        : "";
      dataArrayNumber.value = 1;
    })
    .catch((e: any) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function addData() {
  router.push(`/probation/detail/addresult/${profileId.value}/${id.value}`);
}

onMounted(async () => {
  await fecthAssign(id.value);
});
</script>
<template>
  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle text-white col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      <div>แบบบันทึกผล (ผู้ดูแล)</div>
    </div>
  </div>
  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
    <div class="col-12 q-gutter-md" v-if="store.tabs.length == 0">
      <div class="flex justify-center items-center q-my-md q-gutter-md">
        <q-btn
          outline
          color="primary"
          label="สร้างแบบบันทึกผล"
          @click="addData"
        />
      </div>
    </div>
    <div v-else>
      <ResultPage
        :fullname="fullname"
        v-model:dataArrayNumber="dataArrayNumber"
        :fecthAssign="fecthAssign"
        :data="evaluate.find((x: any) => x.no === dataArrayNumber)"
      />
    </div>
  </div>
</template>
<style scoped>
.mobileClass {
  background-color: #fff;
  border-radius: 10px;
}
</style>
