<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";

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

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

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

const dataProfile = ref<DataProfile>();
const tabs = ref<string>("PENDING");
const statusCheckEdit = ref<string>("");
const empType = ref<string>(route.params.type.toString());
const profileId = ref<string>(route.params.id.toString());
const isConfirmEdit = ref<boolean>(false); //สิทธิ์การแก้ไขข้อมูล
const isConfirmDone = ref<boolean>(false); //สิทธิ์การยืนยันข้อมูล
const modalEdit = ref<boolean>(false);
const modalHistory = ref<boolean>(false);

/** funtion fetch ข้อมูลส่วนตัว*/
async function fetchDataProfile() {
  await http
    .get(
      config.API.profileidPosition(
        empType.value === "officer" ? "" : "-employee"
      ) + `/${profileId.value}`
    )
    .then(async (res) => {
      const data = res.data.result;
      statusCheckEdit.value = data.statusCheckEdit;
      fetchPromission(data.rootId);
      dataProfile.value = {
        fullName: `${data.prefix}${data.firstName} ${data.lastName}`,
        position: data.position,
        citizenId: data.citizenId,
        posNo: data.posNo,
        posType: data.posTypeName,
        posLevel: data.posLevelName,
        org: findOrgNameHtml(data),
      };
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function fetchPromission(rootId: string) {
  http
    .get(config.API.profilePermission(rootId))
    .then((res) => {
      const data = res.data.result;
      isConfirmEdit.value = data.isEdit;
      isConfirmDone.value = data.isCheck;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

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

/** hook เมื่อมีการเรียกใช้ Components*/
onMounted(async () => {
  try {
    showLoader();
    await fetchDataProfile();
  } catch (err) {
    messageError($q, err);
  } finally {
    hideLoader();
  }
});
</script>

<template>
  <div class="row items-center q-gutter-sm q-mb-xs">
    <div class="toptitle text-dark 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-card-section class="bg-primary text-white">
      <div class="row items-center q-col-gutter-md">
        <div class="col-auto">
          <q-icon name="person" size="lg" />
        </div>
        <div class="col">
          <div class="text-h6">
            {{ dataProfile?.fullName }}
          </div>
          <div class="text-subtitle2">{{ dataProfile?.position }}</div>
        </div>
      </div>
    </q-card-section>

    <q-card-section>
      <q-list dense separator>
        <q-item>
          <q-item-section class="col-2 text-bold"
            >เลขประจำตัวประชาชน:</q-item-section
          >
          <q-item-section>{{ dataProfile?.citizenId }}</q-item-section>
        </q-item>

        <q-item>
          <q-item-section class="col-2 text-bold">
            {{ empType === "officer" ? "เลขที่ตำแหน่ง:" : "ตำแหน่งเลขที่:" }}
          </q-item-section>
          <q-item-section>
            {{ dataProfile?.posNo }}
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section class="col-2 text-bold">
            {{ empType === "officer" ? "ตำแหน่งประเภท:" : "กลุ่มงาน:" }}
          </q-item-section>
          <q-item-section>
            {{ dataProfile?.posType }}
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section class="col-2 text-bold">
            {{ empType === "officer" ? "ระดับ:" : "ระดับชั้นงาน:" }}
          </q-item-section>
          <q-item-section>
            {{ dataProfile?.posLevel }}
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section top class="col-2 text-bold"> สังกัด: </q-item-section>
          <q-item-section class="text-html">
            {{ dataProfile?.org }}
          </q-item-section>
        </q-item>
      </q-list>
    </q-card-section>

    <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 style="padding: 0px">
      <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"
  />

  <DialogHistory v-model:modal="modalHistory" :emp-type="empType" />
</template>

<style scoped></style>
