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

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

import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
import type { FormDataSalary } from "@/modules/04_registryPerson/interface/request/Edit";
import type {
  DataCommandCode,
  DataPosType,
  DataPosLevel,
  DataPosPosition,
  DataPosExecutive,
} from "@/modules/04_registryPerson/interface/response/Position";

import DialogHeader from "@/components/DialogHeader.vue";
import FormPosition from "@/modules/04_registryPerson/views/edit/components/FormPosition.vue";

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

const profileId = ref<string>(route.params.id.toString());

const modal = defineModel<boolean>("modal", { required: true });
const empType = defineModel<string>("empType", { required: true });
const rowData = defineModel<DataPosition[]>("rowData", { required: true });
const rowIndex = defineModel<number>("rowIndex", { required: true });
const isAddPosition = defineModel<boolean>("isAddPosition", { required: true });

const props = defineProps({
  fetchData: { type: Function, required: true },
});

const formData = reactive<FormDataSalary>({
  commandCode: "", //ประเภทคำสั่ง
  commandNo: "", //เลขที่คำสั่ง
  commandYear: null, //ปี
  commandDateAffect: null, //วันที่มีผล
  commandDateSign: null, //วันที่ลงนาม
  posNoAbb: "", //ตัวย่อเลขที่ตำแหน่ง
  posNo: "", //เลขที่ตำแหน่ง
  positionName: "", //ตำแหน่ง
  positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
  positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
  positionCee: "", //ตำแหน่งซี
  positionLine: "", // สายงาน
  positionPathSide: "", //ด้าน/สาขา
  positionExecutive: "", //ตำแหน่งทางการบริหาร
  positionExecutiveField: "", //ด้านทางการบริหาร
  amount: undefined, //เงินเดือน
  amountSpecial: undefined, //เงินค่าตอบแทนพิเศษ
  positionSalaryAmount: undefined, //เงินประจำตำแหน่ง
  mouthSalaryAmount: undefined, //เงินค่าตอบแทนรายเดือน
  orgRoot: "", //หน่วยงาน
  orgChild1: "", //ส่วนราชการระดับ 1
  orgChild2: "", //ส่วนราชการระดับ 2
  orgChild3: "", //ส่วนราชการระดับ 3
  orgChild4: "", //ส่วนราชการระดับ 4
  remark: "", //หมายเหตุ
  posNumCodeSit: "", //หน่วยงานที่ออกคำสั่ง
  posNumCodeSitAbb: "", //ตัวย่อหน่วยงานที่ออกคำสั่ง
});
const formReadonly = reactive<FormDataSalary>({
  commandCode: "", //ประเภทคำสั่ง
  commandNo: "", //เลขที่คำสั่ง
  commandYear: null, //ปี
  commandDateAffect: null, //วันที่มีผล
  commandDateSign: null, //วันที่ลงนาม
  posNoAbb: "", //ตัวย่อเลขที่ตำแหน่ง
  posNo: "", //เลขที่ตำแหน่ง
  positionName: "", //ตำแหน่ง
  positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
  positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
  positionCee: "", //ตำแหน่งซี
  positionLine: "", // สายงาน
  positionPathSide: "", //ด้าน/สาขา
  positionExecutive: "", //ตำแหน่งทางการบริหาร
  positionExecutiveField: "", //ด้านทางการบริหาร
  amount: undefined, //เงินเดือน
  amountSpecial: undefined, //เงินค่าตอบแทนพิเศษ
  positionSalaryAmount: undefined, //เงินประจำตำแหน่ง
  mouthSalaryAmount: undefined, //เงินค่าตอบแทนรายเดือน
  orgRoot: "", //หน่วยงาน
  orgChild1: "", //ส่วนราชการระดับ 1
  orgChild2: "", //ส่วนราชการระดับ 2
  orgChild3: "", //ส่วนราชการระดับ 3
  orgChild4: "", //ส่วนราชการระดับ 4
  remark: "", //หมายเหตุ
  posNumCodeSit: "", //หน่วยงานที่ออกคำสั่ง
  posNumCodeSitAbb: "", //ตัวย่อหน่วยงานที่ออกคำสั่ง
});

const dataLevel = ref<DataPosType[]>([]); //รายการ ตำแหน่งเงินเดือน
const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
const posTypeOptions = ref<DataOption[]>(store.posTypeData); //รายการประเภทตำแหน่ง | กลุ่มงาน
const posLevelOptions = ref<DataOption[]>(store.posLevelData); //รายการระดับตำแหน่ง | ระดับชั้นงาน
const posLineOptions = ref<DataOption[]>(store.posLineData); //รายการสายงาน
const posPathSideOptions = ref<DataOption[]>(store.posPathSideData); //รายการด้าน/สาขา
const posExecutiveOptions = ref<DataOption[]>(store.posExecutiveData); //รายการตำแหน่งทางการบริหาร

const salaryId = ref<string>("");

/** function เรียกข้อมูลตำแหน่ง*/
async function fetchDataPosition() {
  try {
    showLoader();
    const res = await http.get(
      config.API.salaryTemp + `/get/${salaryId.value}`
    );
    return res.data.result;
  } catch (err) {
    messageError($q, err);
  } finally {
    hideLoader();
  }
}

/** function fetch ข้อมูลประเภทคำสั่ง*/
async function fetchDataCommandCode() {
  // เช็ค store.commandCodeData มีค่ามากกว่า 0 รีเทินร์ false
  if (store.commandCodeData.length > 0) return false;
  await http
    .get(config.API.orgCommandCode)
    .then((res) => {
      const data = res.data.result;

      store.commandCodeData = data.map((e: DataCommandCode) => ({
        id: e.code.toString(),
        name: e.name,
      }));

      commandCodeOptions.value = store.commandCodeData;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch ข้อมูลปรเภทตำแหน่งข้าราชการ */
async function fetchType() {
  await http
    .get(config.API.orgPosType)
    .then((res) => {
      dataLevel.value = res.data.result;
      store.posTypeData = res.data.result.map((e: DataPosType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
      posTypeOptions.value = store.posTypeData;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch ข้อมูลปรเภทตำแหน่งลูกจ้าง*/
async function fetchOptionGroup() {
  await http
    .get(config.API.orgEmployeeType)
    .then((res) => {
      dataLevel.value = res.data.result;
      store.posTypeData = res.data.result.map((e: DataPosType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
      posTypeOptions.value = store.posTypeData;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch ข้อมูลสายงาน*/
async function fetchDataOption() {
  if (store.posLineData.length > 0 && store.posPathSideData.length > 0)
    return false;

  await http
    .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
    .then((res) => {
      const data = res.data.result;

      const seen = new Set();
      const seen2 = new Set();

      const listPositionField = data.filter((item: DataPosPosition) => {
        if (seen.has(item.positionField)) {
          return false;
        } else {
          seen.add(item.positionField);
          return true;
        }
      });
      store.posLineData = listPositionField.map((e: DataPosPosition) => ({
        id: e.positionField,
        name: e.positionField,
      }));

      const listPositionArea = data.filter((item: DataPosPosition) => {
        if (
          item.positionArea === null ||
          item.positionArea === "" ||
          item.positionArea === "-" ||
          seen2.has(item.positionArea)
        ) {
          return false;
        } else {
          seen2.add(item.positionArea);
          return true;
        }
      });
      store.posPathSideData = listPositionArea.map((e: DataPosPosition) => ({
        id: e.positionArea,
        name: e.positionArea,
      }));
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch ข้อมูลตำแหน่งข้อมูลทางการบริหาร*/
async function fetchDataOptionExecutive() {
  await http
    .get(config.API.orgPosExecutive)
    .then((res) => {
      const data = res.data.result;
      store.posExecutiveData = data.map((e: DataPosExecutive) => ({
        id: e.posExecutiveName,
        name: e.posExecutiveName,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/**
 * function เลือกประเภทตำแหน่ง
 * @param val id ประเภทตำแหน่ง
 * @param status แก่ไข , เพิ่ม
 */
async function updateSelectType(val: string, status: boolean = false) {
  const listLevel = val
    ? dataLevel.value.find((e: DataPosType) => e.posTypeName === val)
    : null;

  // เช็คประเภทตำแหน่งงาน
  if (listLevel) {
    store.posLevelData = listLevel.posLevels.map((e: DataPosLevel) => ({
      id: e.id,
      name:
        empType.value === "officer"
          ? e.posLevelName
          : `${listLevel.posTypeShortName} ${e.posLevelName}`,
    }));

    formData.positionLevel = !status ? "" : formData.positionLevel;
  }
  // else {
  //   store.posLevelData = [];
  //   // formData.positionLevel = "";
  // }
}

/**
 * function กำหนดข้อมูล
 * @param index รายการที่ต้องการดู
 */
async function onDefineData(index: number) {
  // ดึงข้อมูลจาก rowData ตามตำแหน่ง index ที่รับมา
  const data = rowData.value[index];
  // กำหนดค่า salaryId ให้เป็น id ของข้อมูลตาม Index
  salaryId.value = data.id;

  // เรียก function fetchDataPosition เรียกข้อมูลตำแหน่ง
  const newData = await fetchDataPosition();
  // อัปเดตค่าประเภทตำแหน่งงาน
  updateSelectType(data.positionType);

  if (newData) {
    const salaryNew = newData.salaryNew;
    const salaryOld = newData?.salaryOld;

    formData.commandCode = salaryNew.commandCode;
    formData.commandNo = salaryNew.commandNo;
    formData.commandYear = salaryNew.commandYear;
    formData.commandDateAffect = salaryNew.commandDateAffect;
    formData.commandDateSign = salaryNew.commandDateSign;
    formData.posNoAbb = salaryNew.posNoAbb;
    formData.posNo = salaryNew.posNo;
    formData.positionName = salaryNew.positionName;
    formData.positionType = salaryNew.positionType;
    formData.positionLevel = salaryNew.positionLevel;
    formData.positionCee = salaryNew.positionCee;
    formData.positionLine = salaryNew.positionLine;
    formData.positionPathSide = salaryNew.positionPathSide;
    formData.positionExecutive = salaryNew.positionExecutive;
    formData.positionExecutiveField = salaryNew.positionExecutiveField;
    formData.amount = salaryNew.amount;
    formData.amountSpecial = salaryNew.amountSpecial;
    formData.positionSalaryAmount = salaryNew.positionSalaryAmount;
    formData.mouthSalaryAmount = salaryNew.mouthSalaryAmount;
    formData.orgRoot = salaryNew.orgRoot;
    formData.orgChild1 = salaryNew.orgChild1;
    formData.orgChild2 = salaryNew.orgChild2;
    formData.orgChild3 = salaryNew.orgChild3;
    formData.orgChild4 = salaryNew.orgChild4;
    formData.remark = salaryNew.remark;
    formData.posNumCodeSit = salaryNew.posNumCodeSit;
    formData.posNumCodeSitAbb = salaryNew.posNumCodeSitAbb;

    if (salaryOld) {
      formReadonly.commandCode = salaryOld.commandCode;
      formReadonly.commandNo = salaryOld.commandNo;
      formReadonly.commandYear = salaryOld.commandYear;
      formReadonly.commandDateAffect = salaryOld.commandDateAffect;
      formReadonly.commandDateSign = salaryOld.commandDateSign;
      formReadonly.posNoAbb = salaryOld.posNoAbb;
      formReadonly.posNo = salaryOld.posNo;
      formReadonly.positionName = salaryOld.positionName;
      formReadonly.positionType = salaryOld.positionType;
      formReadonly.positionLevel = salaryOld.positionLevel;
      formReadonly.positionCee = salaryOld.positionCee;
      formReadonly.positionLine = salaryOld.positionLine;
      formReadonly.positionPathSide = salaryOld.positionPathSide;
      formReadonly.positionExecutive = salaryOld.positionExecutive;
      formReadonly.positionExecutiveField = salaryOld.positionExecutiveField;
      formReadonly.amount = salaryOld.amount;
      formReadonly.positionSalaryAmount = salaryOld.positionSalaryAmount;
      formReadonly.mouthSalaryAmount = salaryOld.mouthSalaryAmount;
      formReadonly.orgRoot = salaryOld.orgRoot;
      formReadonly.orgChild1 = salaryOld.orgChild1;
      formReadonly.orgChild2 = salaryOld.orgChild2;
      formReadonly.orgChild3 = salaryOld.orgChild3;
      formReadonly.orgChild4 = salaryOld.orgChild4;
      formReadonly.remark = salaryOld.remark;
      formReadonly.posNumCodeSit = salaryOld.posNumCodeSit;
      formReadonly.posNumCodeSitAbb = salaryOld.posNumCodeSitAbb;
    }
  }
}

async function onNavigateRow(action: string) {
  action === "next" ? (rowIndex.value += 1) : (rowIndex.value -= 1);
  await nextTick();
  onDefineData(rowIndex.value);
}

function onClickCloseDialog() {
  modal.value = false;
  formData.commandCode = "";
  formData.commandNo = "";
  formData.commandYear = null;
  formData.commandDateAffect = null;
  formData.commandDateSign = null;
  formData.posNoAbb = "";
  formData.posNo = "";
  formData.positionName = "";
  formData.positionType = "";
  formData.positionLevel = "";
  formData.positionCee = "";
  formData.positionLine = "";
  formData.positionPathSide = "";
  formData.positionExecutive = "";
  formData.positionExecutiveField = "";
  formData.amount = undefined;
  formData.amountSpecial = undefined;
  formData.positionSalaryAmount = undefined;
  formData.mouthSalaryAmount = undefined;
  formData.orgRoot = "";
  formData.orgChild1 = "";
  formData.orgChild2 = "";
  formData.orgChild3 = "";
  formData.orgChild4 = "";
  formData.remark = "";
  formData.posNumCodeSit = "";
  formData.posNumCodeSitAbb = "";

  formReadonly.commandCode = "";
  formReadonly.commandNo = "";
  formReadonly.commandYear = null;
  formReadonly.commandDateAffect = null;
  formReadonly.commandDateSign = null;
  formReadonly.posNoAbb = "";
  formReadonly.posNo = "";
  formReadonly.positionName = "";
  formReadonly.positionType = "";
  formReadonly.positionLevel = "";
  formReadonly.positionCee = "";
  formReadonly.positionLine = "";
  formReadonly.positionPathSide = "";
  formReadonly.positionExecutive = "";
  formReadonly.positionExecutiveField = "";
  formReadonly.amount = undefined;
  formReadonly.positionSalaryAmount = undefined;
  formReadonly.mouthSalaryAmount = undefined;
  formReadonly.orgRoot = "";
  formReadonly.orgChild1 = "";
  formReadonly.orgChild2 = "";
  formReadonly.orgChild3 = "";
  formReadonly.orgChild4 = "";
  formReadonly.remark = "";
  formReadonly.posNumCodeSit = "";
  formReadonly.posNumCodeSitAbb = "";
}

function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const path = isAddPosition.value
      ? config.API.salaryTemp
      : config.API.salaryTemp + `/${salaryId.value}`;
    const method = isAddPosition.value ? "post" : "patch";
    await http[method](path, {
      ...formData,
      profileId:
        isAddPosition.value && empType.value === "officer"
          ? profileId.value
          : undefined,
      profileEmployeeId:
        isAddPosition.value && empType.value !== "officer"
          ? profileId.value
          : undefined,
      type: empType.value?.toLocaleUpperCase(),
      commandDateAffect: convertDateToAPI(formData.commandDateAffect),
      commandDateSign: convertDateToAPI(formData.commandDateSign),
      amount: formData.amount
        ? Number(String(formData.amount)?.replace(/,/g, ""))
        : null,
      amountSpecial: formData.amountSpecial
        ? Number(String(formData.amountSpecial)?.replace(/,/g, ""))
        : null,
      positionSalaryAmount: formData.positionSalaryAmount
        ? Number(String(formData.positionSalaryAmount)?.replace(/,/g, ""))
        : null,
      mouthSalaryAmount: formData.mouthSalaryAmount
        ? Number(String(formData.mouthSalaryAmount)?.replace(/,/g, ""))
        : null,
    })
      .then(async () => {
        await props.fetchData?.();
        success($q, "บันทึกข้อมูลสำเร็จ");
        onClickCloseDialog();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

watch(modal, async (val) => {
  if (val) {
    showLoader();
    if (empType.value === "officer") {
      await Promise.all([
        fetchType(),
        // fetchDataOption(),
        // fetchDataOptionExecutive(),
      ]);
    } else {
      await fetchOptionGroup();
    }

    commandCodeOptions.value = store.commandCodeData;
    posTypeOptions.value = store.posTypeData;
    posLevelOptions.value = store.posLevelData;
    posLineOptions.value = store.posLineData;
    posPathSideOptions.value = store.posPathSideData;
    posExecutiveOptions.value = store.posExecutiveData;
    !isAddPosition.value && (await onDefineData(rowIndex.value));
    hideLoader();
  }
});

onMounted(async () => {
  await fetchDataCommandCode();
});
</script>

<template>
  <q-dialog v-model="modal" persistent :full-width="!isAddPosition">
    <q-card style="min-width: 50%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="`${
            isAddPosition ? 'เพิ่มตำแหน่ง/เงินเดือน' : 'แก้ไขตำแหน่ง/เงินเดือน'
          }`"
          :close="onClickCloseDialog"
        />
        <q-separator />

        <q-card-section style="padding: 0px">
          <div class="col-12 row" v-if="!isAddPosition">
            <div class="col-xs-12 col-md-6 row no-wrap">
              <div class="col-12 q-pa-md">
                <q-card
                  bordered
                  class="col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                  >
                    ข้อมูลปัจุบัน
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <q-card-section>
                    <FormPosition
                      :is-readonly="true"
                      :form-data="formReadonly"
                      :command-code-options="commandCodeOptions"
                      :pos-type-options="posTypeOptions"
                      :pos-level-options="posLevelOptions"
                      :pos-line-options="posLineOptions"
                      :pos-path-side-options="posPathSideOptions"
                      :pos-executive-options="posExecutiveOptions"
                      :emp-type="empType"
                      :update-select-type="updateSelectType"
                    />
                  </q-card-section>
                </q-card>
              </div>
              <div class="col-12 row">
                <q-separator :vertical="!$q.screen.lt.md" />
              </div>
            </div>

            <div class="col-xs-12 col-md-6 row">
              <div class="col-12 q-pa-md">
                <q-card
                  bordered
                  class="col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                  >
                    ข้อมูลที่แก้ไข
                  </div>
                  <div class="col-12">
                    <q-separator />
                    <q-card-section>
                      <FormPosition
                        :is-readonly="false"
                        v-model:form-data="formData"
                        v-model:command-code-options="commandCodeOptions"
                        v-model:pos-type-options="posTypeOptions"
                        v-model:pos-level-options="posLevelOptions"
                        v-model:pos-line-options="posLineOptions"
                        v-model:pos-path-side-options="posPathSideOptions"
                        v-model:pos-executive-options="posExecutiveOptions"
                        :emp-type="empType"
                        :update-select-type="updateSelectType"
                      />
                    </q-card-section>
                  </div>
                </q-card>
              </div>
            </div>
          </div>

          <div class="col-12 q-pa-md" v-else>
            <FormPosition
              :is-readonly="false"
              v-model:form-data="formData"
              v-model:command-code-options="commandCodeOptions"
              v-model:pos-type-options="posTypeOptions"
              v-model:pos-level-options="posLevelOptions"
              v-model:pos-line-options="posLineOptions"
              v-model:pos-path-side-options="posPathSideOptions"
              v-model:pos-executive-options="posExecutiveOptions"
              :emp-type="empType"
              :update-select-type="updateSelectType"
              :is-add-position="isAddPosition"
            />
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn
            v-if="!isAddPosition"
            flat
            round
            :disable="rowIndex === 0"
            :color="rowIndex === 0 ? 'grey' : 'public'"
            icon="mdi-chevron-left"
            @click.stop.prevent="onNavigateRow('previous')"
          >
            <q-tooltip>ข้อมูลก่อนหน้า</q-tooltip>
          </q-btn>

          <q-btn
            v-if="!isAddPosition"
            flat
            round
            :disable="rowIndex + 1 === rowData.length"
            :color="rowIndex + 1 === rowData.length ? 'grey' : 'public'"
            icon="mdi-chevron-right"
            @click.stop.prevent="onNavigateRow('next')"
          >
            <q-tooltip>ข้อมูลถัดไป</q-tooltip>
          </q-btn>

          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
