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

import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import type { PropType } from "vue";
import type { Property } from "@/modules/05_placement/interface/index/Main";

import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";

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

const props = defineProps({
  statusEdit: {
    type: Boolean,
    required: true,
  },
  data: {
    type: Array as PropType<Property[]>,
    default: [],
  },
  fetch: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const emit = defineEmits(["update:statusEdit", "update:data"]);

const edit = ref<boolean>(false); //การแก้ไขข้อมูล
const onEdit = ref<boolean>(false); //การแก้ไขข้อมูล

/**
 * ฟังก์ชันบันทึกการแก้ไขข้อมูล
 */
const saveData = async () => {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .put(
        config.API.placementPropertyId(route.params.personalId.toString()),
        props.data
      )
      .then(async () => {
        await props.fetch("Qualification");
        await success($q, "แก้ไขข้อมูลสำเร็จ");
        changeBtn();
        onEdit.value = false;
        edit.value = false;
      })
      .catch((e: any) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
};

/**
 * ฟังก์ชันการแก้ไขข้อมูล
 */
const changeBtn = async () => {
  if (edit.value == true) {
    if (props.statusEdit === true) {
    } else {
      emit("update:statusEdit", true);
    }
  } else {
    emit("update:statusEdit", false);
  }
};

const onCancel = async () => {
  if (onEdit.value) {
    dialogConfirm(
      $q,
      async () => {
        emit("update:statusEdit", false);
        await props.fetch("Qualification");
        edit.value = false;
        onEdit.value = false;
      },
      `ข้อมูลมีการแก้ไข`,
      `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
    );
  } else {
    edit.value = false;
  }
};

/**
 * ฟังก์ชันแก้ไขข้อมูล
 */
function checkEdit() {
  onEdit.value = true;
}

/**
 * ทำงานเมื่อมีการเรียกใช้ Components
 */
onMounted(() => {
  emit("update:statusEdit", false);
});
</script>
<template>
  <q-form ref="myform" greedy @submit.prevent @validation-success="saveData">
    <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
      <HeaderTop
        v-model:edit="edit"
        header="การคัดกรองคุณสมบัติ"
        icon="mdi-account-search"
        :history="false"
        :changeBtn="changeBtn"
        :disable="statusEdit"
        :cancel="onCancel"
      />
    </div>
    <div class="row q-px-lg">
      <div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
        <q-checkbox
          size="xs"
          v-model="item.value"
          :label="item.name"
          keep-color
          @update:modelValue="checkEdit"
          color="gray-5"
          :disable="!statusEdit"
        />
        <q-separator />
      </div>
    </div>
  </q-form>
</template>
