<!-- page:main page ทะเบียนประวัติ -->
<template>
  <div class="toptitle text-dark col-12 row items-center">ทะเบียนประวัติ</div>
  <div>
    <q-card flat bordered class="col-12 q-mt-sm">
      <q-layout
        view="hHh Lpr lff"
        container
        class="shadow-2 rounded-borders page-relative"
        style="height: 80vh"
      >
        <q-drawer
          v-model="isDrawer"
          class="bg-grey-1"
          :width="220"
          :breakpoint="400"
          bordered
        >
          <q-btn
            size="13px"
            class="btn-absolute btnShadow"
            color="white"
            dense
            round
            unelevated
            @click="isDrawer = false"
            v-if="isDrawer"
          >
            <q-tooltip>ปิด</q-tooltip>
            <q-icon name="chevron_left" size="20px" color="grey-7" />
          </q-btn>
          <q-scroll-area class="fit">
            <div class="row col-12 text-dark q-pt-sm">
              <div class="col-12 q-pa-sm">
                <q-tree
                  :nodes="nodesTree"
                  dense
                  class="text-subtitle2 text-weight-regular tree-node"
                  node-key="id"
                  v-model:selected="selected"
                  v-model:expanded="expanded"
                  no-selection-unset
                  selected-color="primary"
                  @update:selected="onSelected"
                  @update:expanded="clickTree"
                />
              </div>
            </div>
          </q-scroll-area>
        </q-drawer>
        <q-page-container class="q-ma-sm">
          <ProfileTable
            style="height: 77vh"
            :rows="rows"
            :columns="
              profileType == 'employee' || profileType == 'all'
                ? profileEmployeeType == 'temp'
                  ? columnsEmployeeTemp
                  : columnsEmployee
                : columns
            "
            :filter="filter"
            :visible-columns="visibleColumns"
            v-model:inputfilter="filter"
            v-model:inputvisible="visibleColumns"
            :pagination="initialPagination"
            v-model:profileId="profileId"
            v-model:employeeClass="employeeClass"
            v-model:fullName="fullName"
            v-model:oldFullName="oldFullName"
            v-model:isShowRetire="isShowRetire"
            v-model:retireYear="retireYear"
            v-model:govAge="govAge"
            v-model:isProbation="isProbation"
            v-model:isTab="isDrawer"
            v-model:positionPath="positionPath"
            v-model:positionLevel="positionLevel"
            v-model:positionExecutive="positionExecutive"
            v-model:employeePosition="employeePosition"
            v-model:employeeLevel="employeeLevel"
            v-model:posNo="posNo"
            :doSearch="doSearch"
            :onExport="onExport"
            :onTab="changeTab"
          >
            <template #columns="props">
              <q-tr
                :props="props"
                @click="next(props.row.id)"
                class="cursor-pointer"
              >
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  <div v-if="col.name == 'no'" class="table_ellipsis">
                    {{ props.rowIndex + 1 }}
                  </div>
                  <div v-else-if="col.name == 'fullname'">
                    <div class="row col-12 wrap items-center">
                      <img
                        v-if="props.row.avatar == null"
                        src="@/assets/avatar_user.jpg"
                        class="col-4 img-info"
                      />
                      <img
                        v-else
                        :src="props.row.avatar"
                        class="col-4 img-info"
                      />
                      <div class="col-4">
                        <div class="text-weight-medium">
                          {{ props.row.fullname }}
                        </div>
                        <div class="text-weight-light">
                          {{ props.row.citizenId }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else class="table_ellipsis">
                    {{ col.value ?? "-" }}
                  </div>
                </q-td>
              </q-tr>
            </template>
          </ProfileTable>
        </q-page-container>
      </q-layout>
    </q-card>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";

import { useQuasar } from "quasar";
import type { RequestItemsObject } from "@/modules/04_registry/interface/request/Main";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Main";
import type {
  Pagination,
  treeTab,
} from "@/modules/04_registry/interface/index/Main";
import ProfileTable from "@/modules/04_registry/components/TableProfile.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import { useDataStore } from "@/stores/data";

const dataStore = useDataStore();
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const { changeTreeRegister, selectedRegister, expandedRegister } = dataStore;

const mixin = useCounterMixin();
const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
const router = useRouter();
const isDrawer = ref<boolean>(true);
const filter = ref<string>(""); //search data table
const profileId = ref<string>("");
const employeeClass = ref<string>("officer");
const fullName = ref<string>("");
const oldFullName = ref<string>("");
const isShowRetire = ref<boolean>(false);
const isProbation = ref<boolean>(false);
const profileType = ref<string>("officer");
const profileEmployeeType = ref<string>("temp");
const retireYear = ref<number>();
const govAge = ref<number>();
const positionPath = ref<string>("");
const positionLevel = ref<string>("");
const positionExecutive = ref<string>("");
const employeePosition = ref<string>("");
const employeeLevel = ref<string>("");
const posNo = ref<string>("");
const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
});
const expanded = ref<string[]>([]);
const selected = ref<string>("");
const nodesTree = ref<treeTab[]>([]);
const visibleColumns = ref<String[]>([]);
visibleColumns.value = [
  "no",
  "fullname",
  "fullnameOld",
  "oc",
  "position",
  "positionPathSide",
  "numberPosition",
  "positionLine",
  "positionType",
  "govAge",
  "positionLevel",
  "positionExecutive",
  "positionExecutiveSide",
  "dateAppoint",
  "refSalary",
  "dateStart",
  "createdAt",
  "salaryDate",
  "age",
  "amount",
  "insignia",
  "insigniaLast",
  "isLeave",
  "leaveDateOrder",
];
const visibleColumnsOfficer = ref<String[]>([]);
visibleColumnsOfficer.value = [
  "no",
  "fullname",
  "fullnameOld",
  "oc",
  "position",
  "positionPathSide",
  "numberPosition",
  "positionLine",
  "positionType",
  "govAge",
  "positionLevel",
  "positionExecutive",
  "positionExecutiveSide",
  "dateAppoint",
  "refSalary",
  "dateStart",
  "createdAt",
  "salaryDate",
  "age",
  "amount",
  "insignia",
  "insigniaLast",
  "isLeave",
  "leaveDateOrder",
];
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "fullname",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "fullname",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "numberPosition",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: true,
    field: "numberPosition",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionPathSide",
    align: "left",
    label: "ด้าน/สาขา",
    sortable: true,
    field: "positionPathSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionLine",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionLine",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionType",
    align: "left",
    label: "ประเภท",
    sortable: true,
    field: "positionType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionLevel",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "positionLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionExecutive",
    align: "left",
    label: "ตำแหน่งทางการบริหาร",
    sortable: true,
    field: "positionExecutive",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionExecutiveSide",
    align: "left",
    label: "ด้านทางการบริหาร",
    sortable: true,
    field: "positionExecutiveSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "oc",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "oc",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "amount",
    align: "left",
    label: "เงินเดือน",
    sortable: true,
    field: "amount",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "insignia",
    align: "left",
    label: "เครื่องราชฯ",
    sortable: true,
    field: "insignia",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "insigniaLast",
    align: "left",
    label: "เครื่องราชฯ(เดิม)",
    sortable: true,
    field: "insigniaLast",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "govAge",
    align: "left",
    label: "อายุราชการ(ปี)",
    sortable: true,
    field: "govAge",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "dateAppoint",
    align: "left",
    label: "วันที่บรรจุ",
    sortable: true,
    field: "dateAppoint",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "dateStart",
    align: "left",
    label: "เริ่มปฎิบัติราชการ",
    sortable: true,
    field: "dateStart",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "salaryDate",
    align: "left",
    label: "วันที่เข้าสู่ตำแหน่ง",
    sortable: true,
    field: "salaryDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "refSalary",
    align: "left",
    label: "เอกสารอ้างอิง",
    sortable: true,
    field: "refSalary",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "age",
    align: "left",
    label: "อายุ",
    sortable: true,
    field: "age",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "fullnameOld",
    align: "left",
    label: "ชื่อ-สกุล(เดิม)",
    sortable: true,
    field: "fullnameOld",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "createdAt",
    align: "left",
    label: "วันที่สร้าง",
    sortable: true,
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "isLeave",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "isLeave",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "leaveDateOrder",
    align: "left",
    label: "วันที่พ้นราชการ",
    sortable: true,
    field: "leaveDateOrder",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);
const rows = ref<RequestItemsObject[]>([]);
const visibleColumnsEmployee = ref<String[]>([]);
visibleColumnsEmployee.value = [
  "no",
  "fullname",
  "fullnameOld",
  "oc",
  "positionEmployeePosition",
  "positionEmployeePositionSide",
  "numberPosition",
  "positionLine",
  //   "positionType",
  "govAge",
  "positionEmployeeLevel",
  "positionEmployeeGroup",
  "dateAppoint",
  "refSalary",
  "dateStart",
  "createdAt",
  "salaryDate",
  "age",
  "amount",
  "insignia",
  "insigniaLast",
  "isLeave",
  "leaveDateOrder",
];
const columnsEmployee = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "fullname",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "fullname",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "numberPosition",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: true,
    field: "numberPosition",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionEmployeePosition",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "positionEmployeePosition",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionEmployeePositionSide",
    align: "left",
    label: "ด้านของตำแหน่ง",
    sortable: true,
    field: "positionEmployeePositionSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionLine",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionLine",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionEmployeeLevel",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "positionEmployeeLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionEmployeeGroup",
    align: "left",
    label: "กลุ่มงาน",
    sortable: true,
    field: "positionEmployeeGroup",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "oc",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "oc",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "amount",
    align: "left",
    label: "ค่าจ้าง",
    sortable: true,
    field: "amount",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "insignia",
    align: "left",
    label: "เครื่องราชฯ",
    sortable: true,
    field: "insignia",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "insigniaLast",
    align: "left",
    label: "เครื่องราชฯ(เดิม)",
    sortable: true,
    field: "insigniaLast",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "govAge",
    align: "left",
    label: "อายุราชการ(ปี)",
    sortable: true,
    field: "govAge",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "dateAppoint",
    align: "left",
    label: "วันที่จ้าง",
    sortable: true,
    field: "dateAppoint",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "dateStart",
    align: "left",
    label: "วันที่เริ่มปฎิบัติราชการ",
    sortable: true,
    field: "dateStart",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "salaryDate",
    align: "left",
    label: "วันที่แต่งตั้ง",
    sortable: true,
    field: "salaryDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "refSalary",
    align: "left",
    label: "เอกสารอ้างอิง",
    sortable: true,
    field: "refSalary",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "age",
    align: "left",
    label: "อายุ",
    sortable: true,
    field: "age",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "fullnameOld",
    align: "left",
    label: "ชื่อ-สกุล(เดิม)",
    sortable: true,
    field: "fullnameOld",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "createdAt",
    align: "left",
    label: "วันที่สร้าง",
    sortable: true,
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "isLeave",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "isLeave",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "leaveDateOrder",
    align: "left",
    label: "วันที่พ้นราชการ",
    sortable: true,
    field: "leaveDateOrder",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);
const visibleColumnsEmployeeTemp = ref<String[]>([]);
visibleColumnsEmployeeTemp.value = [
  "no",
  "fullname",
  "fullnameOld",
  "oc",
  "positionEmployeePosition",
  "positionEmployeePositionSide",
  //   "numberPosition",
  "positionLine",
  //   "positionType",
  "govAge",
  //   "positionEmployeeLevel",
  "positionEmployeeGroup",
  "dateAppoint",
  "refSalary",
  "dateStart",
  "createdAt",
  "salaryDate",
  "age",
  "amount",
  //   "insignia",
  //   "insigniaLast",
  "isLeave",
  "leaveDateOrder",
];
const columnsEmployeeTemp = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "fullname",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "fullname",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  //   {
  //     name: "numberPosition",
  //     align: "left",
  //     label: "ตำแหน่งเลขที่",
  //     sortable: true,
  //     field: "numberPosition",
  //     headerStyle: "font-size: 14px",
  //     style: "font-size: 14px",
  //     sort: (a: string, b: string) =>
  //       a.localeCompare(b, undefined, {
  //         numeric: true,
  //         sensitivity: "base",
  //       }),
  //   },
  {
    name: "positionEmployeePosition",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "positionEmployeePosition",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionEmployeePositionSide",
    align: "left",
    label: "ด้านของตำแหน่ง",
    sortable: true,
    field: "positionEmployeePositionSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "positionLine",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionLine",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  //   {
  //     name: "positionEmployeeLevel",
  //     align: "left",
  //     label: "ระดับ",
  //     sortable: true,
  //     field: "positionEmployeeLevel",
  //     headerStyle: "font-size: 14px",
  //     style: "font-size: 14px",
  //     sort: (a: string, b: string) =>
  //       a.localeCompare(b, undefined, {
  //         numeric: true,
  //         sensitivity: "base",
  //       }),
  //   },
  {
    name: "positionEmployeeGroup",
    align: "left",
    label: "กลุ่มงาน",
    sortable: true,
    field: "positionEmployeeGroup",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "oc",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "oc",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "amount",
    align: "left",
    label: "ค่าจ้าง",
    sortable: true,
    field: "amount",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  //   {เอาออกสำหรับลูกจ้างชั่วคราว
  //     name: "insignia",
  //     align: "left",
  //     label: "เครื่องราชฯ",
  //     sortable: true,
  //     field: "insignia",
  //     headerStyle: "font-size: 14px",
  //     style: "font-size: 14px",
  //     sort: (a: string, b: string) =>
  //       a.localeCompare(b, undefined, {
  //         numeric: true,
  //         sensitivity: "base",
  //       }),
  //   },
  //   {
  //     name: "insigniaLast",
  //     align: "left",
  //     label: "เครื่องราชฯ(เดิม)",
  //     sortable: true,
  //     field: "insigniaLast",
  //     headerStyle: "font-size: 14px",
  //     style: "font-size: 14px",
  //     sort: (a: string, b: string) =>
  //       a.localeCompare(b, undefined, {
  //         numeric: true,
  //         sensitivity: "base",
  //       }),
  //   },
  {
    name: "govAge",
    align: "left",
    label: "อายุราชการ(ปี)",
    sortable: true,
    field: "govAge",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "dateAppoint",
    align: "left",
    label: "วันที่จ้าง",
    sortable: true,
    field: "dateAppoint",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "dateStart",
    align: "left",
    label: "วันที่เริ่มปฎิบัติราชการ",
    sortable: true,
    field: "dateStart",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "salaryDate",
    align: "left",
    label: "วันที่แต่งตั้ง",
    sortable: true,
    field: "salaryDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "refSalary",
    align: "left",
    label: "เอกสารอ้างอิง",
    sortable: true,
    field: "refSalary",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "age",
    align: "left",
    label: "อายุ",
    sortable: true,
    field: "age",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, {
        numeric: true,
        sensitivity: "base",
      }),
  },
  {
    name: "fullnameOld",
    align: "left",
    label: "ชื่อ-สกุล(เดิม)",
    sortable: true,
    field: "fullnameOld",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
    name: "createdAt",
    align: "left",
    label: "วันที่สร้าง",
    sortable: true,
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "isLeave",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "isLeave",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "leaveDateOrder",
    align: "left",
    label: "วันที่พ้นราชการ",
    sortable: true,
    field: "leaveDateOrder",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    // sort: (a: string, b: string) =>
    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

watch(visibleColumns, async (count: String[], prevCount: String[]) => {
  await changeProfileColumns("main", count);
});

onMounted(async () => {
  await nodeTree();
});

const changeTab = () => {
  isDrawer.value = !isDrawer.value;
};

const onSelected = async (id: string) => {
  await clickTree();
  await doSearch();
};

const clickTree = () => {
  changeTreeRegister(expanded.value, selected.value);
};

const nodeTree = async () => {
  showLoader();
  await http
    .get(config.API.profileOrganizRoot)
    .then((res: any) => {
      const data = res.data.result;
      nodesTree.value = data;
      if (data.length > 0) {
        selected.value = selectedRegister == "" ? data[0].id : selectedRegister;
        expanded.value =
          expandedRegister.length == 0 ? [data[0].id] : expandedRegister;
      }
    })
    .catch((e: any) => {
      messageError($q, e);
    })
    .finally(async () => {
      await doSearch();
    });
};

const doSearch = async () => {
  let cirteria = [];
  if (profileId.value !== null && profileId.value !== "") {
    cirteria.push({
      criteriaType: "profile_id",
      criteriaValue: profileId.value,
    });
  }

  if (fullName.value !== null && fullName.value !== "") {
    cirteria.push({
      criteriaType: "fullname",
      criteriaValue: fullName.value,
    });
  }

  if (oldFullName.value !== null && oldFullName.value !== "") {
    cirteria.push({
      criteriaType: "old_fullname",
      criteriaValue: oldFullName.value,
    });
  }

  if (isShowRetire.value !== null) {
    cirteria.push({
      criteriaType: "is_retire",
      criteriaValue: isShowRetire.value.toString(),
    });
  }

  if (isProbation.value !== null) {
    cirteria.push({
      criteriaType: "is_probation",
      criteriaValue: isProbation.value.toString(),
    });
  }

  if (retireYear.value !== null && retireYear.value !== undefined) {
    cirteria.push({
      criteriaType: "retire_year",
      criteriaValue: retireYear.value,
    });
  }

  if (govAge.value !== null && govAge.value !== undefined) {
    cirteria.push({
      criteriaType: "gov_age",
      criteriaValue: govAge.value,
    });
  }

  if (employeeClass.value == "officer" || employeeClass.value == "employee") {
    profileType.value = employeeClass.value;
    if (employeeClass.value == "employee") {
      visibleColumns.value = visibleColumnsEmployee.value;
    }
    if (employeeClass.value == "officer") {
      visibleColumns.value = visibleColumnsOfficer.value;
    }
  }

  if (employeeClass.value == "perm" || employeeClass.value == "temp") {
    profileType.value = "all";
    cirteria.push({
      criteriaType: "employee_class",
      criteriaValue: employeeClass.value,
    });
    if (employeeClass.value == "perm") {
      profileEmployeeType.value = "perm";
      visibleColumns.value = visibleColumnsEmployee.value;
    } else {
      profileEmployeeType.value = "temp";
      visibleColumns.value = visibleColumnsEmployeeTemp.value;
    }
  }

  if (positionPath.value !== null && positionPath.value !== "") {
    cirteria.push({
      criteriaType: "position_path",
      criteriaValue: positionPath.value,
    });
  }

  if (positionLevel.value !== null && positionLevel.value !== "") {
    cirteria.push({
      criteriaType: "position_level",
      criteriaValue: positionLevel.value,
    });
  }

  if (positionExecutive.value !== null && positionExecutive.value !== "") {
    cirteria.push({
      criteriaType: "position_executive",
      criteriaValue: positionExecutive.value,
    });
  }

  if (employeePosition.value !== null && employeePosition.value !== "") {
    cirteria.push({
      criteriaType: "employee_position",
      criteriaValue: employeePosition.value,
    });
  }

  if (employeeLevel.value !== null && employeeLevel.value !== "") {
    cirteria.push({
      criteriaType: "employee_level",
      criteriaValue: employeeLevel.value,
    });
  }

  if (posNo.value !== null && posNo.value !== "") {
    cirteria.push({
      criteriaType: "pos_no",
      criteriaValue: posNo.value,
    });
  }

  if (selected.value == null || selected.value == "") return;
  showLoader();
  await http
    .post(config.API.searchProfileByOcId(selected.value, profileType.value), {
      criterias: cirteria,
    })
    .then((res) => {
      let data = res.data.result;
      rows.value = [];
      data.map((e: ResponseObject) => {
        rows.value.push({
          id: e.id,
          fullname: e.fullname,
          fullnameOld: e.fullnameOld,
          avatar: e.avatar,
          citizenId: e.citizenId,
          position: e.position,
          positionPathSide: e.positionPathSide,
          numberPosition:
            profileType.value == "officer" ? e.posNo : e.posNoEmployee,
          positionLine: e.positionLine,
          positionType: e.positionType,
          govAge: e.govAge,
          positionLevel: e.positionLevel,
          positionExecutive: e.positionExecutive,
          positionExecutiveSide: e.positionExecutiveSide,
          positionEmployeePosition: e.positionEmployeePosition,
          positionEmployeePositionSide: e.positionEmployeePositionSide,
          positionEmployeeLevel: e.positionEmployeeLevel,
          positionEmployeeGroup: e.positionEmployeeGroup,
          oc: e.oc,
          dateAppoint:
            e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
          dateStart:
            e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
          createdAt:
            e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
          salaryDate:
            e.salaryDate == null ? null : date2Thai(new Date(e.salaryDate)),
          leaveReason: e.leaveReason,
          age: e.age,
          amount: e.amount == null ? "" : e.amount.toLocaleString(),
          insignia: e.insignia,
          insigniaLast: e.insigniaLast,
          isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
          leaveDateOrder:
            e.leaveDateOrder == null
              ? null
              : date2Thai(new Date(e.leaveDateOrder)),
          refSalary: e.refSalary,
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const onExport = () => {
  const head = [
    "ลำดับ",
    "ชื่อ-สกุล",
    "ตำแหน่ง",
    "สายงาน",
    "ตำแหน่งในสายงาน",
    "ระดับ",
    "ตำแหน่งทางการบริหาร",
    "ตำแหน่งการบริหาร",
    "ตำแหน่งเลขที่",
    "หน่วยงาน/ส่วนราชการ",
  ];
  const data = rows.value.map((val, index) => ({
    no: index + 1,
    // id: val.id ? val.id : "",
    fullname: val.fullname ? val.fullname : "",
    // avatar: val.avatar ? val.avatar : "",
    // citizenId: val.citizenId ? val.citizenId : "",
    position: val.position ? val.position : "",
    // line: val.line ? val.line : "",
    // linePosition: val.linePosition ? val.linePosition : "",
    // level: val.level ? val.level : "",
    // positionFormalManage: val.positionFormalManage
    //   ? val.positionFormalManage
    //   : "",
    // positionManage: val.positionManage ? val.positionManage : "",
    // numberPosition: val.numberPosition ? val.numberPosition : "",
    // government: val.government ? val.government : "",
  }));
  //   jsontoexcel.getXlsx(data, head, "ข้อมูลทะเบียนประวัติ.csv");
};

const next = (id: string) => {
  router.push(`/registry/${id}`);
};
</script>

<style lang="scss" scope>
.btn-absolute {
  z-index: 50;
  position: absolute;
  left: 200px;
  top: 12px;
}
.btnShadow {
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
}
.img-info {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}
.tree-node .q-tree__node-header-content {
  padding: 1px 5px;
  color: #4a4a4a;
}
</style>
