<script setup lang="ts">
import { reactive, watch } from "vue";
import { useQuasar } from "quasar";

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

import type { FormDataAssigned } from "@/modules/14_KPI/interface/request/index";

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

import { useKpiDataStore } from "@/modules/14_KPI/store";
import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const store = useKpiDataStore();

const {
  showLoader,
  hideLoader,
  messageError,
  dialogConfirm,
  success,
} = useCounterMixin();

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

const formData = reactive<FormDataAssigned>({
  including: "", //รหัสตัวชี้วัด
  includingName: "", //ชื่อตัวชี้วัด
  target: "", //ค่าเป้าหมาย
  unit: "", //หน่วยนับ
  weight: null, //น้ำหนัก (ร้อยละ)
  meaning: "", //นิยามหรือความหมายของตัวชี้วัด
  formula: "", //สูตรคำนวณ
  achievement1: "", // ผลสำเร็จของงาน1
  achievement2: "", // ผลสำเร็จของงาน2
  achievement3: "", // ผลสำเร็จของงาน3
  achievement4: "", // ผลสำเร็จของงาน4
  achievement5: "", // ผลสำเร็จของงาน5
  kpiUserEvaluationId: "",
});

function fetchspecialByid(id: string) {
  showLoader();
  http
    .get(config.API.kpiAchievement("special") + `/${id}`)
    .then((res) => {
      const data = res.data.result;
      console.log(data);

      formData.including = data.including;
      formData.includingName = data.includingName;
      formData.target = data.target;
      formData.unit = data.unit;
      formData.achievement1 = data.achievement1;
      formData.achievement2 = data.achievement2;
      formData.achievement3 = data.achievement3;
      formData.achievement4 = data.achievement4;
      formData.achievement5 = data.achievement5;
      formData.weight = data.weight;
      formData.formula = data.formula;
      formData.meaning = data.meaning;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ปิด dialog */
function closeDialog() {
  modal.value = false;
  formData.including = "";
  formData.includingName = "";
  formData.target = "";
  formData.unit = "";
  formData.achievement1 = "";
  formData.achievement2 = "";
  formData.achievement3 = "";
  formData.achievement4 = "";
  formData.achievement5 = "";
  formData.weight = null;
  formData.meaning = "";
  formData.formula = "";
}

function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    formData.weight = Number(formData.weight);
    formData.unit = formData.unit;
    formData.kpiUserEvaluationId = store.dataEvaluation.id;

    try {
      const url = isStatusEdit.value
        ? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
        : config.API.kpiAchievement("special");

      const method = isStatusEdit.value ? "put" : "post";
      await http[method](url, formData);
      success($q, "บันทึกข้อมูลสำเร็จ");
    } catch (err) {
      messageError($q, err);
    } finally {
      hideLoader();
      closeDialog();
    }
  });
}

watch(
  () => modal.value,
  () => {
    if (modal.value) {
      isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
    }
  }
);
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 50%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
          :close="closeDialog"
        />
        <q-separator />

        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-2">
              <q-input
                outlined
                v-model="formData.including"
                label="ลำดับ/รหัสตัวชี้วัด"
                bg-color="white"
                dense
                class="inputgreen"
                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`]"
                hide-bottom-space
                lazy-rules
              />
            </div>
            <div class="col-10">
              <q-input
                v-model="formData.includingName"
                label="ชื่อตัวชี้วัด"
                outlined
                dense
                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
                hide-bottom-space
                class="inputgreen"
                lazy-rules
              />
            </div>
            <div class="col-4">
              <q-input
                v-model="formData.target"
                label="ค่าเป้าหมาย"
                outlined
                dense
                :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
                hide-bottom-space
                class="inputgreen"
                lazy-rules
              />
            </div>
            <div class="col-4">
              <q-input
                v-model="formData.unit"
                label="หน่วยนับ"
                outlined
                dense
                :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
                hide-bottom-space
                class="inputgreen"
                reverse-fill-mask
                lazy-rules
              />
            </div>
            <div class="col-4">
              <q-input
                v-model="formData.weight"
                label="น้ำหนัก (ร้อยละ)"
                outlined
                dense
                :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
                hide-bottom-space
                class="inputgreen"
                mask="#"
                reverse-fill-mask
                lazy-rules
              />
            </div>
            <div class="col-12">
              <q-card bordered>
                <q-card>
                  <q-card-actions class="bg-grey-3 row">
                    <div class="col-4 flex justify-center items-center">
                      <div>ระดับคะแนน</div>
                    </div>
                    <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
                  </q-card-actions>
                </q-card>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>5</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      outlined
                      v-model="formData.achievement5"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
                    />
                  </div>
                </div>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>4</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      outlined
                      v-model="formData.achievement4"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
                    />
                  </div>
                </div>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>3</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      outlined
                      v-model="formData.achievement3"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
                    />
                  </div>
                </div>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>2</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      outlined
                      v-model="formData.achievement2"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
                    />
                  </div>
                </div>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>1</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      outlined
                      v-model="formData.achievement1"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
                    />
                  </div>
                </div>
              </q-card>
            </div>
            <div class="col-12">
              <q-input
                v-model="formData.meaning"
                label="นิยามหรือความหมายของตัวชี้วัด"
                outlined
                dense
                type="textarea"
                :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
                hide-bottom-space
                class="inputgreen"
                lazy-rules
              />
            </div>
            <div class="col-12">
              <q-input
                outlined
                v-model="formData.formula"
                label="สูตรคำนวณ"
                bg-color="white"
                type="textarea"
                dense
                class="inputgreen"
                :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
                hide-bottom-space
                lazy-rules
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.my-menu-link {
  background: #ebf9f7 !important;
  color: #1bb19ab8 !important;
}
</style>
