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

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

/** importType*/
import type { DataOrgRevision } from "@/modules/02_organization/interface/index/Main";
import type { OrgRevision } from "@/modules/02_organization/interface/response/organizational";

/** importComponents*/
import MainReport from "@/modules/21_report/components/01_org/MainReport.vue";
import TreeView from "@/modules/21_report/components/01_org/Main.vue";
import StructureView from "@/modules/02_organization/components/StructureMain.vue";
import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";

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

/** ประวัติโครงสร้าง*/
const itemHistory = ref<DataOrgRevision[]>([]); // List ประวัติโครงสร้าง
const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
const count = ref<number>(0);

/** ฟังก์ชันเรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
async function fetchOrganizationActive() {
  showLoader();
  await http
    .get(config.API.activeOrganization)
    .then(async (res) => {
      const data = await res.data.result;
      if (data) {
        await store.fetchDataActive(data);
      }
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/** ฟังก์ชันเรียกข้อมูลรายการประวัติโครงสร้าง*/
async function fetchHistory() {
  await http
    .get(config.API.organizationHistoryNew)
    .then(async (res) => {
      const data = await res.data.result;
      const filterData = data.filter(
        (e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
      );

      itemHistory.value = filterData.map((e: OrgRevision) => ({
        id: e.orgRevisionId,
        name: e.orgRevisionName,
        orgRevisionCreatedAt: e.orgRevisionCreatedAt
          ? date2Thai(e.orgRevisionCreatedAt)
          : "",
      }));
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function เปิดประวัติโครงสร้าง
 * @param id id โครงสร้าง
 * @param name ชื่อโครงสร้าง
 */
function onClickHistory(id: string, name: string) {
  historyId.value = id;
  store.historyId = id;
  labelHistory.value = name;
  count.value++;
}

/**
 * lifecycleHook ทำงานเมื่อมีการเรียกใช้ Components
 * ดึงข้อมูลโครงสร้างและรายการประวัติโครงสร้าง
 */
onMounted(async () => {
  store.typeOrganizational = "current";
  await Promise.all([fetchOrganizationActive(), fetchHistory()]);
});
</script>
<template>
  <div class="row items-center">
    <div class="toptitle text-dark row items-center q-py-xs">
      รายงานโครงสร้างและกรอบอัตรากำลัง
    </div>
    <q-space />
  </div>

  <q-card flat bordered>
    <q-card class="my-card">
      <q-card-section class="q-pa-sm">
        <q-toolbar class="q-gutter-md items-center" style="padding: 0px">
          <q-btn-group outline>
            <q-btn
              dense
              class="q-px-md"
              :outline="store.typeOrganizational === 'current' ? false : true"
              color="blue"
              label="ปัจจุบัน"
              :disable="store.activeId == '' || store.activeId == null"
              @click="
                (store.typeOrganizational = 'current'),
                  (labelHistory = 'ประวัติโครงสร้าง')
              "
            />

            <q-btn-dropdown
              v-if="
                checkPermission($route)?.attrOwnership == 'OWNER' &&
                itemHistory.length > 0
              "
              dense
              class="q-px-md"
              color="blue"
              :label="labelHistory"
              @click="store.typeOrganizational = 'old'"
              :outline="store.typeOrganizational === 'old' ? false : true"
            >
              <q-list>
                <q-item
                  dense
                  clickable
                  v-close-popup
                  v-for="(item, index) in itemHistory"
                  :key="index"
                  @click="onClickHistory(item.id, item.name)"
                >
                  <q-item-section>
                    <q-item-label
                      >{{ item.orgRevisionCreatedAt }}
                      {{ item.name }}</q-item-label
                    >
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </q-btn-group>

          <q-space />
          <q-btn
            flat
            dense
            :color="store.statusView === 'list' ? 'grey-7' : 'grey-4'"
            icon="mdi-file-tree"
            @click="store.statusView = 'list'"
          />
          <q-separator inset vertical />
          <q-btn
            flat
            dense
            icon="mdi-sitemap"
            :color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
            @click="store.statusView = 'tree'"
          />
          <q-separator inset vertical />
          <q-btn
            flat
            dense
            icon="mdi-account-group"
            :color="store.statusView === 'org' ? 'grey-7' : 'grey-4'"
            @click="store.statusView = 'org'"
          />
        </q-toolbar>
      </q-card-section>
      <q-separator />
      <q-card-section style="padding: 0px">
        <q-tab-panels v-model="store.statusView" animated>
          <q-tab-panel name="list" style="padding: 0px">
            <MainReport
              v-if="store.statusView === 'list'"
              v-model:historyId="historyId"
              v-model:count="count"
            />
            <!-- <TreeView
              v-if="store.statusView === 'list'"
              v-model:historyId="historyId"
              v-model:count="count"
            /> -->
          </q-tab-panel>

          <q-tab-panel name="tree" style="padding: 0px">
            <StructureView v-if="store.statusView === 'tree'" />
          </q-tab-panel>

          <q-tab-panel name="org" style="padding: 0px">
            <StructureOrgMain v-if="store.statusView === 'org'" />
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
    </q-card>
  </q-card>
</template>

<style scoped></style>
