<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";

import DialogHeader from "@/components/DialogHeader.vue";

import { useCounterMixin } from "@/stores/mixin";

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

const modal = defineModel<boolean>("modal", { required: true });
const numpage = defineModel<number>("numpage", { required: true });
const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
  required: true,
});

const dataAchievement = ref<any[]>([]);

function fetchByid(id: string, type: string) {
  showLoader();
  http
    .get(config.API.kpiAchievement(`${type}`) + `/${id}`)
    .then((res) => {
      const data = res.data.result;
      dataAchievement.value = [
        {
          level: "5",
          val: data.achievement5,
        },
        {
          level: "4",
          val: data.achievement4,
        },
        {
          level: "3",
          val: data.achievement3,
        },
        {
          level: "2",
          val: data.achievement2,
        },
        {
          level: "1",
          val: data.achievement1,
        },
      ];
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function closeDialog() {
  modal.value = false;
}

watch(
  () => modal.value,
  () => {
    if (modal.value) {
      const type =
        numpage.value === 1
          ? "planned"
          : numpage.value === 2
          ? "role"
          : "special";
      fetchByid(kpiUserPlannedId.value, type);
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card
      class="col-12"
      :style="!$q.screen.gt.xs ? 'width: 100%' : 'width: 45%'"
    >
      <DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
      <q-separator />
      <q-card-section>
        <q-card bordered>
          <div class="bg-grey-2 q-pa-sm">
            <div
              class="row text-dark text-body2 text-weight-medium text-weight-bold"
            >
              <div class="text-center col-6">ระดับคะแนน</div>
              <div class="text-center col-6">ผลสำเร็จของงาน</div>
            </div>
          </div>
          <q-separator />
          <div v-for="(item, index) in dataAchievement" :key="item.id">
            <div :class="`row q-pa-sm ${index % 2 !== 0 && 'bg-grey-2'}`">
              <div class="col-6 text-center text-body1">{{ item.level }}</div>
              <div class="col-6 text-center self-center">
                <span>{{ item.val }}</span>
              </div>
            </div>
            <q-separator />
          </div>
        </q-card>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
