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

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

/**
 * importType
 */
import type { QTableProps } from "quasar";
import type {
  OrgTree,
  PosMaster2,
} from "@/modules/02_organization/interface/response/organizational";
import type { NewPagination } from "@/modules/02_organization/interface/index/Main";
import type {
  MovePos,
  FilterMaster,
} from "@/modules/02_organization/interface/request/organizational";
import type { DataTree } from "@/modules/02_organization/interface/index/organizational";

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

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

/**
 * props
 */
const modal = defineModel<boolean>("modal", { required: true });
const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
const totalPage = defineModel<number>("totalPage", { required: true });
const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
const columns = defineModel<QTableProps[]>("columns", {});
const rows = defineModel<PosMaster2[]>("rows", { required: true });
const props = defineProps({
  fetchDataTree: {
    type: Function,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
  rowId: {
    type: String,
    required: true,
  },
  mainTree: {
    type: Object,
    required: true,
  },
  fetchDataTable: Function,
});

const title = ref<string>("ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน"); //title Dialog
const filterTree = ref<string>(""); //ค้นหาหน่วยงาน/ส่วนราชการปลายทาง
const filterRef = ref(); //
const selectedTree = ref<string>(""); //หน่วยงานที่ต้องการย้าย
const levelTree = ref<number>(0); //ระดับหน่วยงานที่ต้องการย้าย
const filterTable = ref<string>(""); //ค้นหาตำแหน่งที่ต้องการย้าย
const selectedFilter = ref<PosMaster2[]>([]); //ตำแหน่งที่ต้องการย้าย

const pagination = ref({
  page: reqMaster.value.page,
  rowsPerPage: reqMaster.value.pageSize,
});

/**
 * ปิดปุ่มย้ายตำแหน่ง
 * เมื่อไม่ได้เลือกตำแหน่งที่ต้องการย้ายและหน่วยงานที่ต้องการย้ายปุ่มย้ายตำแหน่งจะปืด
 */
const isDisable = computed(() => {
  if (selectedTree.value === "" && selectedFilter.value.length === 0) {
    return true;
  } else return false;
});

/** function เลือกข้อมูลหน่วยงาน*/
function updateSelected(data: DataTree) {
  levelTree.value = data.orgLevel;
  selectedTree.value = data.orgTreeId;
}

/** function ยืนยันการย้ายแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน*/
function onClickMovePos() {
  if (selectedTree.value === "" || selectedTree.value === null) {
    dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่จะย้ายไป");
  } else if (selectedFilter.value.length === 0) {
    dialogMessageNotify($q, "กรุณาเลือกตำแห่นงที่จะย้าย");
  } else {
    dialogConfirm(
      $q,
      async () => {
        const position = selectedFilter.value.map((e: PosMaster2) => e.id);
        const body: MovePos = {
          id: selectedTree.value,
          type: levelTree.value,
          positionMaster: position,
        };
        showLoader();
        await http
          .post(config.API.orgPosMove, body)
          .then(async () => {
            await props.fetchDataTree?.(store.draftId);
            await success($q, "ย้ายตำแหน่งสำเร็จ");
            modal.value = false;
          })
          .catch((err) => {
            messageError($q, err);
          })
          .finally(() => {
            hideLoader();
          });
      },
      "ยืนยันการย้ายตำแหน่ง",
      "ต้องการยืนยันการย้ายตำแหน่งนี้หรือไม่ ?"
    );
  }
}

/**
 * function updatePagination
 * @param newPagination ข้อมูล Pagination ใหม่
 */
function updatePagination(newPagination: NewPagination) {
  reqMaster.value.pageSize = newPagination.rowsPerPage;
  reqMaster.value.page = 1;
}

function onSearchData() {
  reqMaster.value.page = 1;
  reqMaster.value.keyword = filterTable.value;
  props.fetchDataTable?.(store.treeId, store.level, false);
}

/** ดูการเปลี่ยนแปลง  modal เมื่อเป็น true*/
watch(
  () => modal.value,
  () => {
    reqMaster.value.page = 1;
    filterTree.value = "";
    filterTable.value = "";
    pagination.value.rowsPerPage = reqMaster.value.pageSize;

    title.value = `ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน ${props.mainTree.orgName}`;
    if (modal.value && props.type === "SINGER") {
      const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
      selectedFilter.value = data;
      selectedTree.value = "";
    } else {
      selectedFilter.value = [];
      selectedTree.value = "";
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" full-width persistent>
    <q-layout
      view="lHh lpr lFf"
      container
      style="height: 90vh"
      class="bg-white"
    >
      <q-header>
        <q-toolbar>
          <HeaderDialog
            :tittle="title"
            :close="() => ((modal = false), (reqMaster.keyword = ''))"
          />
        </q-toolbar>
        <q-separator color="grey-4" />
      </q-header>

      <q-page-container>
        <q-page class="q-pa-md">
          <div class="row">
            <q-card bordered class="col-12 col-sm-8 q-pa-sm">
              <q-toolbar style="padding: 0">
                <q-toolbar-title class="text-subtitle2 text-bold"
                  >เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
                >
                <q-space />

                <div>
                  <q-input
                    outlined
                    dense
                    v-model="filterTable"
                    label="ค้นหา"
                    @keydown.enter.prevent="onSearchData"
                  >
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </div>
              </q-toolbar>

              <div class="col-12">
                <d-table
                  flat
                  bordered
                  :rows="rows"
                  :columns="columns"
                  row-key="id"
                  no-data-label="ไม่มีข้อมูล"
                  selection="multiple"
                  v-model:selected="selectedFilter"
                  :rows-per-page-options="[10, 25, 50, 100]"
                  v-model:pagination="pagination"
                  @update:pagination="updatePagination"
                >
                  <template v-slot:header-selection="scope">
                    <q-checkbox
                      keep-color
                      color="primary"
                      dense
                      v-model="scope.selected"
                    />
                  </template>
                  <template v-slot:body="props">
                    <q-tr :props="props">
                      <q-td>
                        <q-checkbox
                          keep-color
                          color="primary"
                          dense
                          v-model="props.selected"
                        />
                      </q-td>

                      <q-td
                        v-for="col in props.cols"
                        :key="col.name"
                        :props="props"
                      >
                        <div v-if="col.name == 'no'">
                          {{
                            (reqMaster.page - 1) * Number(reqMaster.pageSize) +
                            props.rowIndex +
                            1
                          }}
                        </div>
                        <div v-else-if="col.name == 'posMasterNo'">
                          {{ col.value }}
                          <q-icon
                            name="mdi-star"
                            color="primary"
                            v-if="props.row.isDirector"
                          >
                            <q-tooltip>ผู้อำนวยการ/หัวหน้า</q-tooltip>
                          </q-icon>
                        </div>

                        <div v-else>
                          {{ col.value }}
                        </div>
                      </q-td>
                    </q-tr>
                  </template>
                  <template v-slot:pagination="scope">
                    <q-pagination
                      v-model="reqMaster.page"
                      active-color="primary"
                      color="dark"
                      :max="totalPage"
                      :max-pages="5"
                      size="sm"
                      boundary-links
                      direction-links
                    ></q-pagination>
                  </template>
                </d-table>
              </div>
            </q-card>

            <q-card
              bordered
              class="col-12 col-sm-4 scroll q-pa-sm"
              style="height: 75vh"
            >
              <q-toolbar style="padding: 0">
                <q-toolbar-title class="text-subtitle2 text-bold"
                  >เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
                >
              </q-toolbar>

              <q-input
                ref="filterRef"
                dense
                outlined
                v-model="filterTree"
                label="ค้นหา"
              >
                <template v-slot:append>
                  <q-icon name="search" />
                </template>
              </q-input>
              <q-tree
                class="q-pa-md q-gutter-sm"
                dense
                selected-color="primary"
                :nodes="nodeTree"
                node-key="orgTreeId"
                label-key="labelName"
                :filter="filterTree.trim()"
                no-results-label="ไม่พบข้อมูลที่ค้นหา"
                no-nodes-label="ไม่มีข้อมูล"
              >
                <template v-slot:default-header="prop">
                  <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->

                  <q-item
                    clickable
                    :active="selectedTree == prop.node.orgTreeId"
                    @click.stop="updateSelected(prop.node)"
                    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">
                        {{
                          prop.node.orgCode == null ? null : prop.node.orgCode
                        }}
                        {{
                          prop.node.orgTreeShortName == null
                            ? null
                            : prop.node.orgTreeShortName
                        }}
                      </div>
                    </div>
                  </q-item>
                </template>
              </q-tree>
            </q-card>
          </div>
        </q-page>
      </q-page-container>

      <q-footer>
        <q-separator color="grey-4" />
        <q-toolbar class="fit row wrap justify-end items-start content-start">
          <q-btn
            unelevated
            label="ย้ายตำแหน่ง"
            color="public"
            @click="onClickMovePos"
            class="q-px-md"
            :disable="isDisable"
          >
            <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
          </q-btn>
        </q-toolbar>
      </q-footer>
    </q-layout>
  </q-dialog>
</template>

<style scoped>
.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>
