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

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

/** importType*/
import type {
  PosMaster,
  CommandSysAssign,
} from "@/modules/02_users/interface/response/Main";

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

/** use*/
const $q = useQuasar();
const { showLoader, hideLoader, dialogConfirm, messageError, success } =
  useCounterMixin();

/**  props*/
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  fetchDataTable: {
    type: Function,
    required: true,
  },
  dataPosMaster: {
    type: Object,
    required: true,
  },
  reqMaster: {
    type: Object,
    required: true,
  },
});

const posMasterId = ref<string>(""); //id รายการตำแหน่งที่ต้องการกำหนดหน้าที่ความรับผิดชอบ
const sysType = ref<string[]>([]); //รายการหน้าที่ความรับผิดชอบที่เลือก
const isChangData = ref<boolean>(false); //การเปลี่ยนแปลงของข้อมูล
const sysTypeOptions = ref<CommandSysAssign[]>([]); //ข้อมูลรายการหน้าที่ความรับผิดชอบ
const totalSysAssign = ref<number>(0);

/** ฟังก์ชันเรียกข้อมูลรายการหน้าที่ความรับผิดชอบ*/
async function fetchCommandSysAssign() {
  if (sysTypeOptions.value.length === 0) {
    showLoader();
    await http
      .get(config.API.commandSysAssign)
      .then(async (res) => {
        const data = await res.data.result;
        sysTypeOptions.value = data;
        totalSysAssign.value = data.flatMap(
          (e: CommandSysAssign) => e.assgins
        ).length;
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/** ฟังก์ชันปิด popup */
function closeDialog() {
  modal.value = false;
  sysType.value = [];
}

/** ฟังก์ชันยืนยันการบันทึกข้อมูลกำหนดหน้าที่ความรับผิดชอบ*/
function onSubmit() {
  dialogConfirm($q, async () => {
    const body = {
      posMasterId: posMasterId.value,
      assignIds: sysType.value,
    };
    showLoader();
    await http
      .post(config.API.posAssign, body)
      .then(async () => {
        await props.fetchDataTable(
          props.reqMaster.id,
          props.reqMaster.revisionId,
          props.reqMaster.type
        );
        closeDialog();
        success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

const isPromiss = ref<boolean | null>(null);

function onSelectAll(val: boolean) {
  isChangData.value = true;
  switch (val) {
    case true:
      const allAssginsIds = sysTypeOptions.value.reduce((acc, item) => {
        const ids = item.assgins.map((assign) => assign.id); // ดึง id ใน assgins
        return acc.concat(ids); // รวม id เข้ากับอาร์เรย์สะสม
      }, [] as string[]);
      sysType.value = allAssginsIds;
      break;
    case false:
      sysType.value = [];
      break;
  }
}

/**
 * ดูการเปลี่ยนแปลงของ modal
 * และเมื่อ modal เป็น true เรียก ฟังก์ชัน fetchCommandSysAssign เพื่อเรียกข้อมูลรายการหน้าที่ความรับผิดชอบ
 * และเกำหนด posMasterId เป็น ID ข้อมูลที่ต้องการกำหนดหน้าที่ความรับผิดชอบ
 * และเกำหนด sysType เป็น รายการหน้าที่ความรับผิดชอบที่เลือก
 */
watch(
  () => modal.value,
  async () => {
    if (modal.value) {
      await fetchCommandSysAssign();
      posMasterId.value = props.dataPosMaster.id;
      // กำหนดรายการหน้าที่ความรับผิดชอบที่เลือก
      const assignId = props.dataPosMaster.posMasterAssigns.map(
        (r: PosMaster) => r.assignId
      );

      sysType.value = assignId;

      isChangData.value = false;
      //เช็คเลือกสิทธิ์ทั้งหมด
      isPromiss.value =
        sysType.value.length === 0
          ? false
          : totalSysAssign.value === sysType.value.length
          ? true
          : null;
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="min-width: 550px">
      <q-form greedy @submit.prevent="onSubmit">
        <DialogHeader tittle="กำหนดหน้าที่ความรับผิดชอบ" :close="closeDialog" />
        <q-separator />

        <q-card-section style="max-height: 80vh" class="scroll">
          <div class="row q-gutter-sm">
            <q-checkbox
              color="primary"
              keep-color
              v-model="isPromiss"
              label="เลือกสิทธิ์ทั้งหมด"
              @update:model-value="onSelectAll"
            />
            <!-- <q-btn
              color="primary"
              label="เลือกสิทธิ์ทั้งหมด"
              @click="onSelectAll('in')"
            />
            <q-btn
              color="secondary"
              label="สิทธิ์ออกทั้งหมด"
              @click="onSelectAll('out')"
            /> -->
          </div>
          <div
            v-for="(item, index) in sysTypeOptions"
            :key="index"
            class="col-12"
          >
            <q-card
              bordered
              class="row col-12 text-dark q-mt-sm"
              v-if="item.assgins.length !== 0"
            >
              <div
                class="bg-grey-1 q-pa-xs col-12 row items-center text-weight-bold"
              >
                {{ item.sysName }}
              </div>
              <div class="col-12"><q-separator /></div>
              <div class="col-12">
                <q-list class="q-mt-none">
                  <q-item
                    dense
                    v-for="(op, index) in item.assgins"
                    :key="index"
                  >
                    <q-item-section avatar>
                      <q-checkbox
                        keep-color
                        color="primary"
                        dense
                        v-model="sysType"
                        :val="op.id"
                        @update:model-value="
                          (isChangData = true), (isPromiss = null)
                        "
                      />
                    </q-item-section>

                    <q-item-section>
                      <q-item-label>{{ op.name }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </div>
            </q-card>
          </div>
        </q-card-section>

        <q-separator />
        <q-card-actions align="right">
          <q-btn
            :disable="!isChangData"
            label="บันทึก"
            color="secondary"
            type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
