<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 { useCounterMixin } from "@/stores/mixin";
import { useActingStore } from "@/modules/17_acting/store/Main";
import { useStructureTree } from "@/stores/structureTree";

/** importType*/
import type { QTableProps } from "quasar";
import type {
  DataTree,
  PosMaster,
  ListPerson,
} from "@/modules/17_acting/interface/response/Main";

import LoadView from "@/components/LoadView.vue";
import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue";

/** use*/
const $q = useQuasar();
const { fetchTreeActing } = useStructureTree();
const storeTree = useStructureTree();
const storeActing = useActingStore();
const { showLoader, hideLoader, messageError, dialogRemove } =
  useCounterMixin();

/** โครงสร้าง*/
const expanded = ref<Array<string>>([]);
const filter = ref<string>("");
const nodeTree = ref<DataTree[]>([]);
const posmasterId = ref<string>("");
const isAll = ref<boolean>(false);
const modalCommand = ref<boolean>(false);
/**
 * function เรียกข้อมูลโครงสร้าง แบบปัจุบัน
 */
async function fetchOrganizationActive() {
  if (storeTree.dataActing.length > 0) {
    nodeTree.value = await fetchTreeActing("");
  } else {
    showLoader();
    http
      .get(config.API.activeOrganization)
      .then(async (res) => {
        const data = res.data.result;
        if (data) {
          nodeTree.value = await fetchTreeActing(data.activeId);
        }
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

const isLaod = ref<boolean>(false);

/**
 * function เลือกตำแหน่งที่จะให้ษาการ
 * @param data ข้อมูลตำแหน่ง
 */
async function updateSelected(data: PosMaster) {
  posmasterId.value = data.posmasterId;
  storeActing.rootId = data.orgTreeId;
  isLaod.value = true;
  // เรียกใช้ function  fetch รายชื่อ ,fetch รายชื่อรักษาการ
  await Promise.all([fetchPosMaster(), fetchListAct()]).finally(() => {
    isLaod.value = false;
  });
}

/** ตำแหน่ง*/
const rowPosition = ref<ListPerson[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    sortable: false,
    field: "citizenId",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-นามสกุล",
    field(row) {
      return `${row.prefix}${row.firstName}  ${row.lastName}`;
    },
    sortable: false,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posNo",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: false,
    field: "posNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: false,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posType",
    align: "left",
    label: "ตำแหน่งประเภท",
    sortable: false,
    field: "posType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevel",
    align: "left",
    label: "ระดับ",
    sortable: false,
    field: "posLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const keyword = ref<string>("");

/**
 * function fetch รายชื่อ
 */
async function fetchPosMaster() {
  await http
    .post(config.API.orgPosAct + `/search`, {
      posmasterId: posmasterId.value,
      isAll: isAll.value,
    })
    .then((res) => {
      const data = res.data.result;
      rowPosition.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function แสดงตำแหน่งทั้งหมด
 * @param val  แสดงตำแหน่งทั้งหมด
 */
function updateIsAll(val: boolean) {
  isAll.value = val;
  fetchPosMaster();
}

/**
 * function เลือกราชชื่อรักษาการ
 * @param data ข้อมูลรายชื่อ
 */
function selectPosition(data: ListPerson) {
  showLoader();
  http
    .post(config.API.orgPosAct, {
      posMasterId: posmasterId.value,
      posMasterChildId: data.id,
    })
    .then(async () => {
      await Promise.all([fetchPosMaster(), fetchListAct()]);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/********** รายชื่อคนรักษาการ **************/
const rowListPerson = ref<ListPerson[]>([]);
const keywordAct = ref<string>("");

/**
 *  function fetch รายชื่อรักษาการ
 */
async function fetchListAct() {
  await http
    .get(config.API.orgPosAct + `/${posmasterId.value}`)
    .then((res) => {
      const data = res.data.result;
      rowListPerson.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * funcion เลือกลำดับรายชื่อรักษาการ
 * @param type up,down
 * @param id รายชื่อรักษาการ
 */
function onSwapPerson(type: string, id: string) {
  showLoader();
  http
    .get(config.API.orgPosAct + `/swap/${type}/${id}`)
    .then(async () => {
      await fetchListAct();
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function ลบรายชื่อรักษาการ
 * @param id ชื่อรักษาการ
 */
function onDelete(id: string) {
  dialogRemove($q, () => {
    showLoader();
    http
      .delete(config.API.orgPosAct + `/${id}`)
      .then(async () => {
        // เรียกใช้ function  fetch รายชื่อ ,fetch รายชื่อรักษาการ
        await Promise.all([fetchPosMaster(), fetchListAct()]);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

function getWorkFlow() {
  showLoader();
  http
    .get(config.API.workflowKeycloakSystem("SYS_ACTING"))
    .then((res) => {
      const data = res.data.result;
      storeActing.isOfficer = data.isOfficer;
      storeActing.isStaff = data.isStaff;
      hideLoader();
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    })
    .finally(() => {});
}

onMounted(() => {
  fetchOrganizationActive();
  if (storeActing.isOfficer == null && storeActing.isStaff == null) {
    getWorkFlow();
  }
});
</script>

<template>
  <div
    class="toptitle text-dark col-12 row items-center"
    style="margin-bottom: 0"
  >
    รักษาการในตำแหน่ง
    <q-space />
    <q-btn
      class="q-px-sm"
      v-if="storeActing.isOfficer === true"
      dense
      flat
      round
      color="add"
      icon="mdi-account-arrow-right"
      @click.prevent="modalCommand = true"
    >
      <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
    </q-btn>
  </div>

  <q-card style="height: 100%">
    <q-card-section :horizontal="$q.screen.gt.sm">
      <!-- โครงสร้าง -->
      <q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm">
        <div>
          <q-input dense outlined v-model="filter" label="ค้นหา">
            <template v-slot:append>
              <q-icon
                v-if="filter !== ''"
                name="clear"
                class="cursor-pointer"
                @click="filter = ''"
              />
              <q-icon name="search" color="grey-5" />
            </template>
          </q-input>
        </div>
        <div class="bg-white tree-container q-pa-xs">
          <q-tree
            class="q-pa-sm q-gutter-sm"
            dense
            :nodes="nodeTree"
            node-key="orgTreeId"
            label-key="labelName"
            :filter="filter"
            no-results-label="ไม่พบข้อมูลที่ค้นหา"
            no-nodes-label="ไม่มีข้อมูล"
            v-model:expanded="expanded"
          >
            <template v-slot:default-header="prop">
              <q-item
                clickable
                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>

            <template v-slot:default-body="prop">
              <div v-if="prop.node.posMaster">
                <q-list dense v-for="col in prop.node.posMaster">
                  <q-item
                    :clickable="checkPermission($route)?.attrIsGet"
                    :active="posmasterId == col.posmasterId"
                    :class="posmasterId !== col.posmasterId ? 'text-info' : ''"
                    active-class="my-list-link text-primary text-weight-medium"
                    @click.stop="updateSelected(col)"
                  >
                    <q-item-section>
                      {{
                        `${col.posNo} ${
                          col.fullNameCurrentHolder
                            ? " (" + col.fullNameCurrentHolder + ")"
                            : ""
                        }`
                      }}
                    </q-item-section>
                  </q-item>
                </q-list>
                <div></div>
              </div>
            </template>
          </q-tree>
        </div>
      </q-card-section>

      <q-separator :vertical="$q.screen.gt.xs" />

      <!-- รายชื่อ -->
      <q-card-section
        v-if="posmasterId"
        class="col-lg-9 col-md-8 col-xs-12 scroll"
        style="height: 80vh"
      >
        <LoadView v-if="isLaod" />
        <div class="column q-col-gutter-sm" v-else>
          <div class="col">
            <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
                รายชื่อ
              </div>
              <div class="col-12"><q-separator /></div>
              <div class="row q-pa-md">
                <div class="col-12">
                  <q-toolbar style="padding: 0">
                    <q-space />
                    <div class="row q-gutter-md">
                      <div>
                        <q-checkbox
                          @update:model-value="updateIsAll"
                          keep-color
                          v-model="isAll"
                          label="แสดงตำแหน่งทั้งหมด"
                          color="primary"
                        >
                          <q-tooltip>แสดงตำแหน่งทั้งหมด</q-tooltip>
                        </q-checkbox>
                      </div>
                      <div>
                        <q-input outlined dense v-model="keyword" label="ค้นหา">
                          <template v-slot:append>
                            <q-icon name="search" color="grey-5" />
                          </template>
                        </q-input>
                      </div>
                    </div>
                  </q-toolbar>
                </div>
                <div class="col-12">
                  <d-table
                    ref="table"
                    :columns="columns"
                    :rows="rowPosition"
                    :paging="true"
                    :filter="keyword"
                    row-key="id"
                    flat
                    bordered
                    dense
                    :rows-per-page-options="[10, 25, 50, 100]"
                  >
                    <template v-slot:header="props">
                      <q-tr :props="props">
                        <q-th
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <span class="text-weight-medium">{{
                            col.label
                          }}</span>
                        </q-th>
                      </q-tr>
                    </template>
                    <template v-slot:body="props">
                      <q-tr
                        :props="props"
                        :class="
                          checkPermission($route)?.attrIsUpdate &&
                          'cursor-pointer'
                        "
                      >
                        <q-td
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                          @click="
                            checkPermission($route)?.attrIsUpdate &&
                              selectPosition(props.row)
                          "
                        >
                          <div v-if="col.name === 'no'">
                            {{ props.rowIndex + 1 }}
                          </div>
                          <div v-else>
                            {{ col.value ? col.value : "-" }}
                          </div>
                        </q-td>
                      </q-tr>
                    </template>
                  </d-table>
                </div>
              </div>
            </q-card>
          </div>
          <div class="col">
            <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
                รายชื่อรักษาการ
              </div>

              <div class="col-12"><q-separator /></div>
              <div class="row q-pa-md">
                <div class="col-12">
                  <q-toolbar style="padding: 0">
                    <q-space />
                    <div class="row q-gutter-md">
                      <div>
                        <q-input
                          outlined
                          dense
                          v-model="keywordAct"
                          label="ค้นหา"
                        >
                          <template v-slot:append>
                            <q-icon name="search" color="grey-5" />
                          </template>
                        </q-input>
                      </div>
                    </div>
                  </q-toolbar>
                </div>
                <div class="col-12">
                  <d-table
                    ref="table"
                    :columns="columns"
                    :rows="rowListPerson"
                    :paging="true"
                    :filter="keywordAct"
                    row-key="id"
                    flat
                    bordered
                    dense
                    :rows-per-page-options="[10, 25, 50, 100]"
                  >
                    <template v-slot:header="props">
                      <q-tr :props="props">
                        <q-th
                          auto-width
                          v-if="
                            rowListPerson.length !== 1 &&
                            checkPermission($route)?.attrIsUpdate
                          "
                        />
                        <q-th
                          auto-width
                          v-if="
                            rowListPerson.length !== 1 &&
                            checkPermission($route)?.attrIsUpdate
                          "
                        />
                        <q-th auto-width />
                        <q-th
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <span class="text-weight-medium">{{
                            col.label
                          }}</span>
                        </q-th>
                      </q-tr>
                    </template>
                    <template v-slot:body="props">
                      <q-tr :props="props">
                        <q-td
                          auto-width
                          v-if="
                            rowListPerson.length !== 1 &&
                            checkPermission($route)?.attrIsUpdate
                          "
                        >
                          <q-btn
                            dense
                            flat
                            round
                            :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
                            :disable="props.rowIndex + 1 == 1"
                            icon="mdi-arrow-up-bold"
                            @click="onSwapPerson('up', props.row.id)"
                          >
                          </q-btn>
                        </q-td>
                        <q-td
                          auto-width
                          v-if="
                            rowListPerson.length !== 1 &&
                            checkPermission($route)?.attrIsUpdate
                          "
                        >
                          <q-btn
                            dense
                            flat
                            round
                            :color="
                              rowListPerson.length == props.rowIndex + 1
                                ? 'grey'
                                : 'red'
                            "
                            :disable="
                              rowListPerson.length == props.rowIndex + 1
                            "
                            icon="mdi-arrow-down-bold"
                            @click="onSwapPerson('down', props.row.id)"
                          >
                          </q-btn>
                        </q-td>
                        <q-td auto-width>
                          <q-btn
                            v-if="checkPermission($route)?.attrIsDelete"
                            dense
                            flat
                            round
                            color="red"
                            icon="delete"
                            @click="onDelete(props.row.id)"
                          >
                          </q-btn>
                        </q-td>
                        <q-td
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <div v-if="col.name === 'no'">
                            {{ props.rowIndex + 1 }}
                          </div>
                          <div v-else>
                            {{ col.value ? col.value : "-" }}
                          </div>
                        </q-td>
                      </q-tr>
                    </template>
                  </d-table>
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </q-card-section>
    </q-card-section>
  </q-card>

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

<style scoped>
.tree-container {
  overflow: auto;
  height: 74vh;
  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>
