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

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

/** importType*/
// import type { DataProfile } from "@/modules/04_registryPerson/interface/index/Edit";

import Table from "@/modules/10_registry/components/PositionReview/Table.vue";
// import DialogEdit from "@/modules/04_registryPerson/views/edit/components/DialogEdit.vue";

// const dataStore = useDataStore();
// const $q = useQuasar();
// const { showLoader, hideLoader, messageError, dialogConfirm, success } =
//   useCounterMixin();
// const route = useRoute();
const router = useRouter();

const tabs = ref<string>("CHECKED");
const statusCheckEdit = ref<string>("");
// const empType = ref<string>(dataStore.officerType);
// const profileId = ref<string>(dataStore.profileId);
const isConfirmEdit = ref<boolean>(false); //สิทธิ์การแก้ไขข้อมูล
// const isConfirmDone = ref<boolean>(false); //สิทธิ์การยืนยันข้อมูล
// const modalEdit = ref<boolean>(false);
// const modalHistory = ref<boolean>(false);

/** function ยืนยันเสร็จสิ้นการแก้ไข*/
// function onConfirmEdit() {
//   dialogConfirm(
//     $q,
//     () => {
//       showLoader();
//       http
//         .post(config.API.salaryTemp + `/confirm-edit`, {
//           profileId: profileId.value,
//           type: empType.value?.toLocaleUpperCase(),
//         })
//         .then(async () => {
//           success($q, "ยืนยันเสร็จสิ้นการแก้ไขสำเร็จ");
//         })
//         .catch((err) => {
//           messageError($q, err);
//         })
//         .finally(() => {
//           hideLoader();
//         });
//     },
//     "ยืนยันเสร็จสิ้นการแก้ไข",
//     "ต้องการยืนยันเสร็จสิ้นการแก้ไขใช่หรือไม่?",
//   );
// }

/** function ยืนยันข้อมูลถูกต้อง*/
// function onConfirmDone() {
//   dialogConfirm(
//     $q,
//     () => {
//       showLoader();
//       http
//         .post(config.API.salaryTemp + `/confirm-done`, {
//           profileId: profileId.value,
//           type: empType.value?.toLocaleUpperCase(),
//         })
//         .then(async () => {
//           success($q, "ยืนยันข้อมูลถูกต้องสำเร็จ");
//         })
//         .catch((err) => {
//           messageError($q, err);
//         })
//         .finally(() => {
//           hideLoader();
//         });
//     },
//     "ยืนยันข้อมูลถูกต้อง",
//     "ต้องการยืนยันข้อมูลถูกต้องใช่หรือไม่",
//   );
// }
</script>

<template>
  <div class="row items-center q-gutter-sm q-mb-xs">
    <div class="toptitle text-white row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      รายการประวัติตำแหน่ง/เงินเดือน
    </div>
  </div>

  <q-card flat bordered>
    <!-- <q-separator v-if="isConfirmEdit || isConfirmDone" />

    <q-card-section v-if="isConfirmEdit || isConfirmDone">
      <div class="row q-col-gutter-sm justify-center">
        <div class="row items-center" v-if="isConfirmEdit">
          <q-btn
            :disable="
              statusCheckEdit === 'EDITED' || statusCheckEdit === 'CHECKED'
            "
            :color="
              statusCheckEdit === 'EDITED' || statusCheckEdit === 'CHECKED'
                ? 'grey'
                : 'public'
            "
            outline
            label="ยืนยันการแก้ไขสำเร็จ"
            @click.stop.prevent="onConfirmEdit"
          />
          <q-btn
            flat
            label="ประวัติการดำเนินการ"
            class="q-ml-md"
            color="blue"
            @click="modalHistory = true"
          />
        </div>
        <div
          class="row items-center"
          v-if="isConfirmDone && statusCheckEdit === 'EDITED'"
        >
          <q-btn
            color="public"
            outline
            label="ยืนยันข้อมูลถูกต้อง"
            @click.stop.prevent="onConfirmDone"
          />
          <q-btn
            flat
            label="ตีกลับให้แก้ไข"
            class="q-ml-md"
            color="blue"
            @click="modalEdit = true"
          />
        </div>
      </div>
    </q-card-section> -->

    <q-separator />

    <q-card-section>
      <!-- <q-tabs
        v-model="tabs"
        dense
        align="left"
        inline-label
        class="bg-white text-grey"
        active-color="primary"
        indicator-color="primary"
      >
        <q-tab name="PENDING" label="รายการตำแหน่ง/เงินเดือนที่กำลังแก้ไข" />
        <q-tab
          name="CHECKED"
          label="แสดงรายการตำแหน่ง/เงินเดือนหลังจากแก้ไขแล้ว"
        />
      </q-tabs>
      <q-separator />

      <q-tab-panels v-model="tabs" animated>
        <q-tab-panel name="PENDING">
          <Table
            :tabs="tabs"
            :status-check-edit="statusCheckEdit"
            :is-confirm-edit="isConfirmEdit"
          />
        </q-tab-panel>
        <q-tab-panel name="CHECKED"> -->
      <Table
        :tabs="tabs"
        :status-check-edit="statusCheckEdit"
        :is-confirm-edit="isConfirmEdit"
      />
      <!-- </q-tab-panel>
      </q-tab-panels> -->
    </q-card-section>
  </q-card>

  <!-- <DialogEdit
    v-model:modal="modalEdit"
    :emp-type="empType"
    :fetch-data="fetchDataProfile"
  /> -->
</template>

<style scoped></style>
