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

import http from "@/plugins/http";
import config from "@/app.config";
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import avatar from "@/assets/avatar_user.jpg";
import { useStructureTree } from "@/stores/structureTree";

/** importType*/
import type {
  DataNodeData,
  QueryParams,
} from "@/modules/04_registryPerson/interface/request/Main";
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { DataStructureTree } from "@/interface/main";
import type {
  DataPerson,
  DataType,
} from "@/modules/04_registryPerson/interface/response/Main";

/** importComponents*/
import TableView from "@/modules/04_registryPerson/components/TableView.vue";
import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const store = useRegistryNewDataStore();
const { fetchStructureTree } = useStructureTree();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const route = useRoute();

const mode = ref<"table" | "card">("table"); //การแสดงผล
const empType = ref<string>("officer"); // officer / employee / perm
const dataPersonMain = ref<DataPerson[]>([]); //ข้อมูลรายการที่ค้นหาข้อมูลทะเบียนประวัติ
const maxPage = ref<number>(1); //จำนวนหน้า
const total = ref<number>(0); //จำนวนข้อมูล
const isShowBtnFilter = ref<boolean>(false);

const filterMain = ref<string>(""); //หน่วยงาน/ส่วนราชการ
const node = ref<DataStructureTree[]>([]); //รายการโครางสร้าง
const expanded = ref<string[]>([]); //แสดงข้อมูลในโครงสร้าง

const selectNode = ref<boolean>(false); //แสดงโครงสร้าง

const nodeData = reactive<DataNodeData>({
  name: "เลือกหน่วยงาน/ส่วนราชการ",
  nodeId: null,
  node: null,
});

/**
 * function เรียกข้อมูลตำแหน่งประเภท
 */
function fetchType() {
  http
    .get(config.API.orgPosType)
    .then((res) => {
      store.fetchType(res.data.result);
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function เรียกข้อมูลกลุ่มงาน
 */
function fetchOptionGroup() {
  http
    .get(config.API.orgEmployeeType)
    .then((res) => {
      store.fetchType(res.data.result);
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function fetch รายชื่อข้อมูลทะเบียนประวัติ
 */
function fetchDataPerson() {
  showLoader();
  let queryParams: QueryParams = {
    page: store.formFilter.page,
    pageSize: store.formFilter.pageSize,
  };

  if (store.formFilter.keyword) {
    queryParams = Object.assign({}, queryParams, {
      searchField: store.formFilter.searchType,
      searchKeyword: store.formFilter.keyword.trim(),
    });
  }

  if (store.labelOption.posLevel != "ทั้งหมด") {
    queryParams = Object.assign({}, queryParams, {
      posLevel: store.labelOption.posLevel,
    });
  }

  if (store.labelOption.posType != "ทั้งหมด") {
    queryParams = Object.assign({}, queryParams, {
      posType: store.labelOption.posType,
    });
  }

  if (store.formFilter.isProbation != null) {
    queryParams.isProbation = store.formFilter.isProbation;
  }

  if (store.formFilter.isShowRetire != null) {
    queryParams.isRetire = store.formFilter.isShowRetire;
  }

  if (empType.value !== "officer") {
    queryParams.type = empType.value;
  }

  if (store.formFilter.node !== null && store.formFilter.nodeId !== null) {
    queryParams.node = store.formFilter.node;
    queryParams.nodeId = store.formFilter.nodeId;
  }

  if (store.formFilter.nodeId) {
    queryParams.isAll = store.formFilter.isAll;
  }

  http
    .get(
      config.API.registryNew(empType.value !== "officer" ? "-employee" : ""),
      { params: queryParams }
    )
    .then((res) => {
      maxPage.value = Math.ceil(
        res.data.result.total / store.formFilter.pageSize
      );
      dataPersonMain.value = res.data.result.data;
      total.value = res.data.result.total;
      isShowBtnFilter.value = true;
      insertAvatar(res.data.result.data);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function fetch รูปโปรไฟล์
 * @param items ข้อมูลคน
 */
function insertAvatar(items: DataPerson[]) {
  items.map((x: DataPerson, index: number) => {
    if (x.avatarName != null) {
      http
        .get(
          config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", x.id, x.avatarName)
        )
        .then((img) => {
          dataPersonMain.value[index] = {
            ...x,
            avatar: img.data.downloadUrl,
          };
        })
        .catch(() => {
          dataPersonMain.value[index] = {
            ...x,
            avatar: avatar,
          };
        });
    } else {
      dataPersonMain.value[index] = {
        ...x,
        avatar: avatar,
      };
    }
  });
}

/**
 * funciotn ค้นหาข้อมูล
 */
function onclickSearch() {
  store.formFilter.page = 1;
  store.formFilter.keyword =
    store.formFilter.keyword === null ? "" : store.formFilter.keyword;
  fetchDataPerson();
}

/**
 * function เลือกประเภทข้าราชการ
 * @param item ประเภทข้าราชการ
 */
function selectType() {
  empType.value = route.name == "registryNew" ? "officer" : "perm";

  if (empType.value !== "officer") {
    store.formFilter.isShowRetire = null;
    store.formFilter.isProbation = null;
    fetchOptionGroup();
  } else {
    store.formFilter.isShowRetire = false;
    store.formFilter.isProbation = false;
    fetchType();
  }

  // เช็ค store ถ้าเปลี่ยนประเภททะเบียนประวัติ ให้ล่างค่า filter ใหม่
  if (store.formFilter.type != empType.value) {
    store.labelOption.posType = "ทั้งหมด";
    store.labelOption.posLevel = "ทั้งหมด";
    store.formFilter.type = empType.value;
    store.labelOption.node =
      empType.value === "officer"
        ? "เลือกหน่วยงาน/ส่วนราชการ"
        : "เลือกหน่วยงาน";
    store.formFilter.searchType = "fullName";
  } else {
    // แต่ถ้าประเภทเดิมระบบจะใช้ filter เดิมที่เคยค้นหาไว้
    if (
      store.formFilter.keyword != "" ||
      store.labelOption.posType != "ทั้งหมด" ||
      store.labelOption.posLevel != "ทั้งหมด" ||
      store.formFilter.isShowRetire ||
      store.formFilter.isProbation ||
      store.formFilter.nodeId != null
    ) {
      store.formFilter.page = 1;
      fetchDataPerson();
    }
  }
}

/**
 * function เลือกประเภทตำแหน่ง
 * @param item ประเภทตำแหน่ง
 */
function selectPosType(item: DataOption) {
  const dataType = store.posTypeMain.find((e: DataType) => e.id === item.id);
  const shortName =
    empType.value === "officer" ? "" : dataType?.posTypeShortName;

  store.fetchLevel(dataType?.posLevels, shortName);
  store.labelOption.posType = item.name;
  store.labelOption.posLevel = "ทั้งหมด";
  store.formFilter.page = 1;
  fetchDataPerson();
}

/**
 * function เลือกประเภทตำแหน่ง
 * @param item ประเภทระดับ
 */
function selectPosLevel(item: DataOption) {
  store.labelOption.posLevel = item.name;
  store.formFilter.page = 1;
  fetchDataPerson();
}

/**
 * function เคลีย์ตัวเลือก
 * @param t ประเภทตัวเลือก
 */
function clearSelect(t: string) {
  if (t === "posType") {
    store.labelOption.posType = "ทั้งหมด";
    store.labelOption.posLevel = "ทั้งหมด";
  } else if (t === "posLevel") {
    store.labelOption.posLevel = "ทั้งหมด";
  } else if (t === "retireYear") {
    store.labelOption.retireYear = "";
  } else if (t === "rangeYear") {
    store.formFilter.rangeYear.min = 0;
    store.formFilter.rangeYear.max = 60;
  } else if (t === "org") {
    nodeData.node = null;
    nodeData.nodeId = null;
    store.formFilter.node = null;
    store.formFilter.nodeId = null;
    store.labelOption.node =
      empType.value === "officer"
        ? "เลือกหน่วยงาน/ส่วนราชการ"
        : "เลือกหน่วยงาน";
  }
  store.formFilter.page = 1;
  fetchDataPerson();
}

const isLoad = ref<boolean>(false); //โหลดข้อมูลโครงสร้าง
/**
 * ฟังก์ชันดึงข้อโครงสร้าง
 */
async function fetchTree() {
  const data = await fetchStructureTree(route.meta.Key as string);
  if (data) {
    isLoad.value = true;
    node.value = data;
    store.formFilter.node = nodeData.node;
    store.formFilter.nodeId = nodeData.nodeId;
  }
}

/**
 * ค้นหาข้อมูลรายชื่อข้อมูลทะเบียนประวัติตามหน่วยงาน/ส่วนราชการ
 */
function sendNode() {
  nodeData.node = store.formFilter.node;
  nodeData.nodeId = store.formFilter.nodeId;
  store.labelOption.node = nodeData.name;
  selectNode.value = false;
  fetchDataPerson();
}

/**
 * ฟังก์ชันเลือกหน่วยงาน/ส่วนราชการ
 * @param data  ข้อมูลหน่วยงาน/ส่วนราชการที่ต้องการค้นหาร
 *
 * เพื่อค้นหาข้อมูลตามหน่วยงาน/ส่วนราชการ
 */
function updateSelectedTreeMain(data: DataStructureTree) {
  if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
    store.formFilter.node = null;
    store.formFilter.nodeId = null;
    nodeData.name =
      empType.value === "officer"
        ? "เลือกหน่วยงาน/ส่วนราชการ"
        : "เลือกหน่วยงาน";
  } else {
    store.formFilter.node = data.orgLevel;
    store.formFilter.nodeId = data.orgTreeId;
    nodeData.name = data.orgName;
  }
}

/** callback function เมื่อมีการเปิด popup*/
watch(selectNode, () => {
  isLoad.value && hideLoader();
});

/**
 * hook เมื่อมีการเรียกใช้ Components
 */

function getSearch() {
  store.formFilter.page = 1;
  fetchDataPerson();
}
onMounted(async () => {
  await Promise.all([selectType(), fetchTree()]);
});
</script>

<template>
  <q-card class="q-mt-md">
    <q-card-section class="card-img q-pb-lg">
      <div class="text-h5 text-center q-py-md text-weight-medium">
        ค้นหาข้อมูลทะเบียนประวัติ
        {{
          empType === "officer" ? "ข้าราชการ กทม. สามัญ" : "ลูกจ้างประจำ กทม."
        }}
      </div>
      <div class="row justify-center">
        <div
          class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders"
        >
          <q-form @submit="onclickSearch">
            <div class="bg-white row col-12 q-pa-none rounded-borders">
              <div class="row col-11">
                <div class="col-3 row wrap">
                  <q-select
                    borderless
                    bg-color="white"
                    v-model="store.formFilter.searchType"
                    :options="store.searchTypeOption"
                    emit-value
                    dense
                    emit-option
                    option-label="name"
                    option-value="id"
                    map-options
                    class="selectS col-11 q-px-md"
                    color="deep-orange"
                    dropdown-icon="mdi-chevron-down"
                  />
                  <q-separator vertical />
                </div>
                <q-input
                  borderless
                  dense
                  bg-color="white"
                  v-model="store.formFilter.keyword"
                  clearable
                  placeholder="ค้นหา"
                  class="col-9 q-pr-md"
                  @clear="store.formFilter.keyword = ''"
                >
                  <template v-slot:before>
                    <q-icon name="search" color="deep-orange" />
                  </template>
                </q-input>
              </div>
              <div class="row col-1">
                <q-btn
                  class="fit btnSearch"
                  unelevated
                  color="deep-orange"
                  label="ค้นหา"
                  type="submit"
                />
              </div>
            </div>
          </q-form>

          <div class="row q-mt-sm q-gutter-sm justify-center">
            <q-btn-dropdown
              flat
              rounded
              dense
              label-color="white"
              dropdown-icon="mdi-chevron-down"
              class="q-px-sm"
              @click="() => ((selectNode = true), showLoader())"
            >
              <template v-slot:label>
                {{
                  `${
                    store.labelOption.node !== "เลือกหน่วยงาน"
                      ? store.labelOption.node
                      : empType === "officer"
                      ? "เลือกหน่วยงาน/ส่วนราชการ"
                      : "เลือกหน่วยงาน"
                  }`
                }}
                <q-btn
                  v-if="
                    store.labelOption.node !== 'เลือกหน่วยงาน' &&
                    store.labelOption.node !== 'เลือกหน่วยงาน/ส่วนราชการ'
                  "
                  size="10px"
                  flat
                  round
                  color="white"
                  icon="close"
                  @click.stop.prevent="clearSelect('org')"
                />
              </template>
            </q-btn-dropdown>

            <q-separator inset vertical class="lineFil" />

            <q-btn-dropdown
              rounded
              flat
              dense
              label-color="white"
              dropdown-icon="mdi-chevron-down"
              class="q-px-sm"
            >
              <template v-slot:label>
                {{
                  store.labelOption.posType !== "ทั้งหมด"
                    ? store.labelOption.posType
                    : empType === "officer"
                    ? `ตำแหน่งประเภท${store.labelOption.posType}`
                    : `กลุ่มงาน${store.labelOption.posType}`
                }}
                <q-btn
                  v-if="store.labelOption.posType !== 'ทั้งหมด'"
                  size="10px"
                  flat
                  round
                  color="white"
                  icon="close"
                  @click.stop.prevent="clearSelect('posType')"
                />
              </template>
              <q-list>
                <q-item
                  v-for="(item, index) in store.posTypeOps"
                  :key="index"
                  clickable
                  v-close-popup
                  @click="selectPosType(item)"
                >
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>

            <q-separator inset vertical class="lineFil" />
            <q-btn-dropdown
              flat
              dense
              rounded
              label-color="white"
              dropdown-icon="mdi-chevron-down"
              class="q-px-sm"
              :disable="store.labelOption.posType === 'ทั้งหมด' ? true : false"
            >
              <template v-slot:label>
                {{
                  store.labelOption.posLevel !== "ทั้งหมด"
                    ? store.labelOption.posLevel
                    : empType === "officer"
                    ? `ระดับ${store.labelOption.posLevel}`
                    : `ระดับชั้นงาน${store.labelOption.posLevel}`
                }}
                <q-btn
                  size="10px"
                  flat
                  round
                  color="white"
                  icon="close"
                  v-if="store.labelOption.posLevel !== 'ทั้งหมด'"
                  @click.stop.prevent="clearSelect('posLevel')"
                />
              </template>
              <q-list
                :style="store.posLevelOps.length > 9 ? 'height: 450px' : ''"
              >
                <q-item
                  v-for="(item, index) in store.posLevelOps"
                  :key="index"
                  clickable
                  v-close-popup
                  @click="selectPosLevel(item)"
                >
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>

            <q-separator
              inset
              vertical
              class="lineFil"
              v-if="empType !== 'officer' && store.formFilter.nodeId"
            />

            <q-toggle
              v-if="empType !== 'officer' && store.formFilter.nodeId"
              v-model="store.formFilter.isAll"
              color="primary"
              label="แสดงตำแหน่งทั้งหมด"
              @update:model-value="getSearch"
            />
          </div>

          <div
            v-if="empType === 'officer'"
            class="row q-gutter-sm justify-center"
          >
            <q-toggle
              v-model="store.formFilter.isProbation"
              color="primary"
              label="ทดลองปฏิบัติหน้าที่ราชการ"
              @update:model-value="getSearch"
            />
            <q-toggle
              v-model="store.formFilter.isShowRetire"
              color="primary"
              label="แสดงข้อมูลผู้พ้นจากราชการ"
              @update:model-value="getSearch"
            />
            <q-toggle
              v-if="store.formFilter.nodeId"
              v-model="store.formFilter.isAll"
              color="primary"
              label="แสดงตำแหน่งทั้งหมด"
              @update:model-value="getSearch"
            />
          </div>
        </div>
      </div>
    </q-card-section>

    <q-separator />

    <q-card-section>
      <!-- Components รายการข้อมูลทะเบียนประวัติ -->
      <!-- v-model:mode="mode" -->
      <div>
        <TableView
          v-model:form-filter="store.formFilter"
          v-model:max-page="maxPage"
          :rows="dataPersonMain"
          :fetch-data="fetchDataPerson"
          :fetch-type="fetchType"
          :total="total"
          :is-filter="isShowBtnFilter"
          :emp-type="empType"
        />
      </div>
    </q-card-section>
  </q-card>

  <!-- แสดง dialog เลือกหน่วยงาน/ส่วนราชการ -->
  <q-dialog v-model="selectNode" persistent>
    <q-card style="width: 850px; max-width: 80vw">
      <DialogHeader
        tittle="เลือกหน่วยงาน/ส่วนราชการ"
        :close="() => (selectNode = false)"
      />

      <q-separator />

      <q-card-section class="q-pa-sm">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-input dense outlined v-model="filterMain" label="ค้นหา">
              <template v-slot:append>
                <q-icon
                  v-if="filterMain !== ''"
                  name="clear"
                  class="cursor-pointer"
                  @click="filterMain = ''"
                />
                <q-icon v-else name="search" color="grey-5" />
              </template>
            </q-input>
          </div>
          <div class="col-12">
            <q-tree
              class="tree-container"
              dense
              :nodes="node"
              node-key="orgTreeName"
              label-key="labelName"
              v-model:expanded="expanded"
              :filter="filterMain"
              no-results-label="ไม่พบข้อมูลที่ค้นหา"
              no-nodes-label="ไม่มีข้อมูล"
              v-model:selected="nodeData.nodeId"
            >
              <template v-slot:default-header="prop">
                <q-item
                  clickable
                  @click.stop="updateSelectedTreeMain(prop.node)"
                  :active="store.formFilter.nodeId === prop.node.orgTreeId"
                  active-class="my-list-link text-primary text-weight-medium"
                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                >
                  <div>
                    <div class="text-weight-medium">
                      {{ prop.node.orgTreeName }}
                    </div>
                    <div class="text-weight-light text-grey-8">
                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
                      {{
                        prop.node.orgTreeShortName == null
                          ? null
                          : prop.node.orgTreeShortName
                      }}
                    </div>
                  </div>
                </q-item>
              </template>
            </q-tree>
          </div>
        </div>
      </q-card-section>
      <q-separator />

      <q-card-actions align="right">
        <q-btn label="ค้นหา" color="secondary" @click="sendNode">
          <q-tooltip>ค้นหา</q-tooltip></q-btn
        >
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.card-img {
  background: url("@/assets/registry-banner.png");
  background-size: cover;
  color: white;
}

:deep(.custom-select.q-field--outlined .q-field__control) {
  color: white;
  background-color: #36969f;
}
:deep(.custom-select.q-field--outlined .q-field__control::before) {
  border: 1px solid #fff;
}

:deep(.custom-btn.q-btn--outline::before) {
  background-color: #36969f;
}

.btnSearch {
  border-radius: 0px 4px 4px 0px;
}
.bg-Search {
  background: #00000015;
}
.lineFil {
  transform: rotate(30deg);
  height: 20px;
  margin-top: 15px;
  background: #ffffff7b !important;
}
.selectS .q-field__control .q-field__append .q-icon {
  color: #ff5722 !important;
}
.tree-container {
  overflow: auto;
  height: 73vh;
  border: 1px solid #e6e6e7;
  border-radius: 10px;
}
.my-list-link {
  color: rgb(118, 168, 222);
  border-radius: 5px;
  background: #a3d3fb48 !important;
  font-weight: 600;
  border: 1px solid rgba(175, 185, 196, 0.217);
}
</style>
