<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 {
  checkPermission,
  checkPermissionList,
  checkPermissionCreate,
} 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 TreeView from "@/modules/02_organization/components/MainView.vue";
import StructureView from "@/modules/02_organization/components/StructureMain.vue";
import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue"; //ส่่งไปออกคำสั่ง
import DialogHeader from "@/components/DialogHeader.vue";

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

/** ตัวแปร*/
const modalNewStructure = ref<boolean>(false); // เพิ่มโครงสร้าง
const modalDateTime = ref<boolean>(false); //  ตั้งเวลาเผยแพร่
const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
const typeStructure = ref<string>(""); // ประเภทการเพิ่มโครงสร้าง
/** ประวัติโครงสร้าง*/
const itemHistory = ref<DataOrgRevision[]>([]); // List ประวัติโครงสร้าง
const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
const count = ref<number>(0);

const modalCommand = ref<boolean>(false); //ส่งไปออกคำสั่ง
const modalRemark = ref<boolean>(false); // หมายเหตุ
const isDeputy = ref<boolean>(false); // สำนักงานปลัด

/**
 * function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
 * เก็บข่อมูลใน store
 */
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);
        // ต้องมี id ของแบบร่างถึงจะเช็ค isLock
        if (data.draftId) {
          await fetchCheckIslock(data.draftId);
        } else {
          store.isLock = false;
        }

        if (data.activeName === null && data.draftName === null) {
          isStatusData.value = false;
        } else {
          isStatusData.value = true;
          if (isStatusData.value) {
            if (data.activeName === null) {
              store.typeOrganizational = "draft";
            } else if (data.draftName === null) {
              store.typeOrganizational = "current";
            }
          }
        }
      }
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/** function เรียกข้อมูรายการลประวัติโครงสร้าง*/
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)
            : "",
        })) || [];

      // id ของโครงสร้างสำหรับใช้ในเมนูสืบทอดตำแหน่ง
      store.historyDnaOrgId =
        itemHistory.value.length > 0 ? itemHistory.value[0].id : "";
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function openPopup เพิ่มโครงสร้าง
 * @param type ประเภทการเพิ่มโครงาสร้าง
 */
function ocClickAddStructure(type: string) {
  modalNewStructure.value = !modalNewStructure.value;
  typeStructure.value = type;
}

/** function openPopup ตั้งเวลาเผยแพร่ */
function onClickDateTime() {
  modalDateTime.value = !modalDateTime.value;
}

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

async function workflowSystem() {
  http
    .get(config.API.workflowKeycloakSystem("SYS_ORG"))
    .then((res) => {
      const data = res.data.result;
      store.isOfficer = data.isOfficer;
      store.isStaff = data.isStaff;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

async function fetchCheckIslock(id: string) {
  http
    .get(config.API.orgIsLock + `/${id}`)
    .then((res) => {
      const data = res.data.result;
      store.isLock = data;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

watch(
  () => store.typeOrganizational,
  () => {
    if (
      store.typeOrganizational === "draft" &&
      store.isOfficer === null &&
      store.isStaff === null
    ) {
      workflowSystem();
    } else if (store.typeOrganizational === "draft") {
      store.rootId = "";
    }
  }
);

/**
 * lifecycleHook ทำงานเมื่อมีการเรียกใช้ Components
 * ดึงข้อมูลโครงสร้างและรายการประวัติโครงสร้าง
 */
onMounted(async () => {
  const type = localStorage.getItem("org_type") ?? "current";
  store.typeOrganizational = type;
  localStorage.removeItem("org_type");
  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
      class="toptitle row items-center"
      v-if="store.typeOrganizational === 'draft'"
    >
      <div
        v-if="store.isPublic && store.orgPublishDate"
        class="q-pr-md text-caption"
      >
        วันที่เผยแพร่ :
        <strong>{{ date2Thai(store.orgPublishDate) }}</strong>
      </div>
      <q-btn
        v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
        dense
        class="q-px-md"
        color="indigo-9"
        icon="alarm"
        label="ตั้งเวลาเผยแพร่"
        @click="onClickDateTime"
      >
      </q-btn>
    </div>
  </div>

  <q-card flat bordered>
    <div class="q-pa-xl" v-if="!isStatusData">
      <q-card
        flat
        bordered
        style="
          height: 70vh;
          border: 1px solid rgb(210, 210, 210);
          border-radius: 5px;
        "
      >
        <div
          class="text-center row"
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
          "
        >
          <div>
            <q-btn
              v-if="checkPermission($route)?.attrIsCreate"
              flat
              style="background-color: #d8f5f2"
              round
              color="primary"
              size="lg"
              icon="add"
              @click="ocClickAddStructure('NEW')"
            >
              <q-tooltip>เพิ่มโครงสร้าง </q-tooltip>
            </q-btn>
            <div class="q-mt-sm">เพิ่มโครงสร้าง</div>
          </div>
        </div>
      </q-card>
    </div>

    <div v-else>
      <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
                v-if="checkPermission($route)?.attrIsUpdate"
                dense
                class="q-px-md"
                :outline="store.typeOrganizational === 'draft' ? false : true"
                color="blue"
                label="แบบร่าง"
                :disable="store.draftId == '' || store.draftId == null"
                @click="
                  (store.typeOrganizational = 'draft'),
                    (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-btn
              v-if="store.remark"
              flat
              round
              color="info"
              icon="info"
              @click="modalRemark = true"
            >
              <q-tooltip>หมายเหตุ</q-tooltip>
            </q-btn>

            <q-btn
              v-if="
                checkPermission($route)?.attrOwnership == 'OWNER' &&
                !store.isLock
              "
              color="green-6"
              dense
              unelevated
              label="เพิ่มโครงสร้าง"
              @click="ocClickAddStructure('ADD')"
              class="q-px-md"
            />

            <q-btn
              v-if="
                store.typeOrganizational === 'draft' &&
                (store.isOfficer === true || store.isStaff === true) &&
                checkPermissionList(['COMMAND']) &&
                checkPermissionCreate('COMMAND')
              "
              flat
              round
              dense
              :disable="store.isStaff == true && store.rootId == ''"
              color="primary"
              icon="mdi-account-arrow-right"
              @click.prevent="modalCommand = true"
            >
              <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
            </q-btn>

            <!-- <q-btn-dropdown
              v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
              dense
              unelevated
              class="q-px-md"
              color="green-6"
              label="เพิ่มโครงสร้าง"
            >
              <q-list>
                <q-item
                  dense
                  clickable
                  v-close-popup
                  v-for="(item, index) in itemStructure"
                  :key="index"
                  @click="ocClickAddStructure(item.id)"
                >
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown> -->

            <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">
              <TreeView
                v-if="store.statusView === 'list'"
                v-model:historyId="historyId"
                v-model:count="count"
                v-model:is-deputy="isDeputy"
              />
            </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>
    </div>
  </q-card>

  <!-- เพิ่มโครงสร้าง -->
  <DialogFormNewStructure
    v-model:new-structure="modalNewStructure"
    v-model:status="isStatusData"
    v-model:type="typeStructure"
    :fetchActive="fetchOrganizationActive"
  />

  <!-- ตั้งเวลาเผยแพร่ -->
  <DialogDateTime
    :modal="modalDateTime"
    :close="onClickDateTime"
    :fetch-active="fetchOrganizationActive"
  />

  <!-- dialog ส่งไปออกคำสั่ง -->
  <DialogCreateCommandORG
    v-model:modal="modalCommand"
    command-type-code="C-PM-38"
    :org-publish-date="store.orgPublishDate as Date||undefined"
    v-model:is-officer="store.isOfficer as boolean"
    v-model:is-staff="store.isStaff as boolean"
    v-model:root-id="store.rootId"
    :system-name="'ORGANIZATION'"
    v-model:is-deputy="isDeputy"
  />

  <q-dialog v-model="modalRemark">
    <q-card style="width: 300px">
      <DialogHeader tittle="หมายเหตุ" :close="() => (modalRemark = false)" />

      <q-separator />
      <q-card-section>
        <div class="row">
          <div class="col">
            {{ store.remark }}
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
