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

import http from "@/plugins/http";
import config from "@/app.config";
import { useOrganizational } from "@/modules/02_organization/store/organizational";
import { useCounterMixin } from "@/stores/mixin";

/** importType*/
import type { OrgTree } from "@/modules/02_organization/interface/response/organizational";

/** importComponents*/
import TreeMain from "@/modules/21_report/components/01_org/TreeMain.vue";
import TreeTable from "@/modules/21_report/components/01_org/TableMain.vue";
import LoadView from "@/components/LoadView.vue";

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

/** props*/
const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
const count = defineModel<number>("count", { required: true });

const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
const nodeId = ref<string>(""); // id ของ Tree
const orgRootId = ref<string>(""); // id ของ Root
const isLoad = ref<boolean>(false); // loadTable
const selected = ref<string>(""); // selected node

/**
 * function fetch ข้อมูลของ Tree
 * @param id id โครงสร้าง
 */
async function fetchDataTree(id: string) {
  showLoader();
  await http
    .get(config.API.orgByid(id))
    .then((res) => {
      const data = res.data.result;
      nodeTree.value = data.data;
      store.remark = data.remark;
      selected.value = "";
      nodeId.value = "";
      store.treeId = "";
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
watch(
  () => count.value,
  () => {
    fetchDataTree(historyId.value);
  }
);

/** callback function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
watch(
  () => store.typeOrganizational,
  () => {
    nodeTree.value = [];
    const id =
      store.typeOrganizational === "current" ? store.activeId : store.draftId;
    id && store.typeOrganizational !== "old" && fetchDataTree(id);
    nodeId.value = "";
    store.treeId = "";
  }
);

/** callback function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนแปลง activeId */
watch(
  () => store.activeId,
  () => {
    store.activeId && fetchDataTree(store.activeId?.toString());
  }
);

/**
 * lifecycle Hook ทำเมือ่ Components ถูกเรียกใช้งาน
 * ุ และดึงช้อมูลโครงสร้างตาม ID ของประเภทโครงสร้าง ปัจจุบัน,แบบร่าง
 */
onMounted(async () => {
  const id =
    store.typeOrganizational === "current" ? store.activeId : historyId.value;

  id && (await fetchDataTree(id));
});
</script>

<template>
  <div class="col-12">
    <q-card bordered class="col-12 row caedNone">
      <div class="col-xs-12 col-sm-3 row">
        <div class="col-12 row no-wrap bg-grey-1">
          <TreeMain
            v-model:node-tree="nodeTree"
            v-model:node-id="nodeId"
            v-model:org-root-id="orgRootId"
          />

          <div class="col-12 row">
            <q-separator :vertical="!$q.screen.lt.md" />
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-9 q-pa-md row">
        <div class="col-12 row">
          <LoadView v-if="isLoad" />

          <div v-else class="col-12 row">
            <div class="col-12" v-if="nodeId !== ''">
              <!-- summary -->
              <q-card
                bordered
                v-if="nodeId"
                class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
              >
                <div class="row col q-pa-sm item">
                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
                  <q-space />
                  <q-badge
                    color="secondary"
                    :label="store.sumPosition.totalRoot"
                  />
                </div>
                <div class="row col q-pa-sm item">
                  <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
                  <q-space />
                  <q-badge color="primary" :label="store.sumPosition.useRoot" />
                </div>
                <div class="row col q-pa-sm item">
                  <div class="ellipsis">ตำแหน่งว่าง</div>
                  <q-space />
                  <q-badge color="red" :label="store.sumPosition.vacantRoot" />
                </div>
              </q-card>

              <q-card falt bordered class="q-mt-xs q-gutter-xs">
                <div class="q-pa-sm">
                  <TreeTable
                    v-if="nodeId !== ''"
                    v-model:org-root-id="orgRootId"
                  />
                </div>
              </q-card>
            </div>
            <div class="row col-12 items-center" v-else>
              <q-banner class="q-pa-lg col-12 text-center">
                <q-icon
                  name="mdi-hand-pointing-left"
                  size="lg"
                  color="primary"
                />
                <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
              </q-banner>
            </div>
          </div>
        </div>
      </div>
    </q-card>
  </div>
</template>

<style scoped>
.list-summary .item {
  border: 1px solid rgb(231, 231, 231);
  border-radius: 4px;
  background-color: white;
}
</style>
