<!-- =============================== -->
<!-- หน้า ผังโครงสร้างลูกจ้าง(Table) ของ โครงสร้างอัตรากำลัง -->
<!-- =============================== -->
<template>
  <div class="toptitle text-dark col-12 row items-center">
    ผังโครงสร้างลูกจ้าง
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
    <div>
      <Table
        :rows="rows"
        :columns="columns"
        :filter="filter"
        :visible-columns="visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="visibleColumns"
        :pagination="initialPagination"
        :nornmalData="true"
        :add="clickAdd"
        :paging="true"
        :titleText="''"
      >
        <template #columns="props">
          <q-tr :props="props" class="cursor-pointer">
            <q-td
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              @click="selectData(props.row)"
            >
              <div class="table_ellipsis">
                {{ col.value }}
              </div>
            </q-td>
            <q-td>
              <q-btn
                dense
                size="12px"
                flat
                round
                color="red"
                @click="clickDelete(props.row.id)"
                icon="mdi-delete"
              >
                <q-tooltip>ลบข้อมูล</q-tooltip>
              </q-btn>
            </q-td>
          </q-tr>
        </template>
      </Table>
    </div>
  </q-card>
  <!-- popup Edit window-->
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 700px">
      <q-form ref="myForm">
        <DialogHeader
          :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}โครงสร้างและกรอบอัตรากำลัง`"
          :close="clickClose"
        />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="overScroll q-py-sm">
            <div class="col-11 row q-col-gutter-xs">
              <div class="col-12">
                {{ "โครงสร้างหน่วยงาน" }}
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationOrganizationId"
                  :options="organizationOrganizationOption"
                  label="หน่วยงาน"
                  class="col-xs-12 col-sm-6 col-md-6"
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '1')
                "
                  option-label="name"
                  option-value="id"
                  map-options
                  emit-value
                  clearable
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
                />
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationAgencyCode"
                  :options="organizationAgencyCodeOption"
                  label="รหัสหน่วยงาน"
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                  filterSelector(inputValue, doneFn, '2')
                "
                  option-label="agencyCode"
                  option-value="agencyCode"
                  map-options
                  emit-value
                  clearable
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสหน่วยงาน'}`]"
                  @update:model-value="(value:any) => updateAgencyCode(value)"
                />
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationGovernmentCode"
                  :options="organizationGovernmentCodeOption"
                  label="รหัสส่วนราชการ"
                  use-input
                  input-debounce="0"
                  @filter="
                    (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '3')
                "
                  option-label="governmentCode"
                  option-value="id"
                  map-options
                  emit-value
                  clearable
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
                  @update:model-value="(value:any) => updateGovernmentCode(value)"
                />
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <q-input
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  readonly
                  outlined
                  :modelValue="organizationShortName"
                  label="ชื่อย่อหน่วยงาน"
                />
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <q-input
                  :class="getClass(true)"
                  dense
                  outlined
                  v-model="agency"
                  label="เลขที่หน่วยงาน"
                />
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <q-input
                  :class="getClass(true)"
                  dense
                  outlined
                  v-model="government"
                  label="เลขที่ส่วนราชการ"
                />
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <q-input
                  :class="getClass(true)"
                  dense
                  outlined
                  v-model="department"
                  label="เลขที่ฝ่าย/ส่วน"
                />
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <q-input
                  :class="getClass(true)"
                  dense
                  outlined
                  v-model="pile"
                  label="เลขที่กอง"
                />
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationTypeId"
                  :options="organizationTypeOption"
                  label="ประเภทหน่วยงาน"
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '6')
                "
                  option-label="name"
                  option-value="id"
                  map-options
                  emit-value
                  clearable
                /><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationLevelId"
                  :options="organizationLevelOption"
                  label="ระดับหน่วยงาน"
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '7')
                "
                  option-label="name"
                  option-value="id"
                  map-options
                  emit-value
                  clearable
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
                />
              </div>
              <div class="col-xs-12 col-sm-4 col-md-4">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationAgencyId"
                  :options="organizationAgencyOption"
                  label="หน่วยงานต้นสังกัด"
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '1')
                "
                  option-label="name"
                  option-value="id"
                  map-options
                  emit-value
                  clearable
                />
              </div>
              <div class="col-xs-12 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationGovernmentAgencyId"
                  :options="organizationGovernmentAgencyOption"
                  label="ส่วนราชการต้นสังกัด"
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '1')
                "
                  option-label="name"
                  option-value="id"
                  map-options
                  emit-value
                  clearable
                />
              </div>
              <div class="col-xs-12 col-sm-2 col-md-2">
                <q-input
                  :class="getClass(true)"
                  dense
                  outlined
                  v-model="organizationOrder"
                  type="number"
                  label="ลำดับผังโครงสร้าง"
                />
              </div>
              <div class="col-xs-12 col-sm-4 col-md-4">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationTelExternalId"
                  :options="organizationTelExternalOption"
                  label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '8')
                "
                  option-label="name"
                  option-value="id"
                  map-options
                  emit-value
                  clearable
                />
              </div>
              <div class="col-xs-12 col-sm-4 col-md-4">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationTelInternalId"
                  :options="organizationTelInternalOption"
                  label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '9')
                "
                  option-label="name"
                  option-value="id"
                  map-options
                  emit-value
                  clearable
                />
              </div>
              <div class="col-xs-12 col-sm-4 col-md-4">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  dense
                  outlined
                  v-model="organizationFaxId"
                  :options="organizationFaxOption"
                  label="หมายเลขโทรสาร"
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '10')
                "
                  option-label="name"
                  option-value="id"
                  map-options
                  emit-value
                  clearable
                />
              </div>
              <div class="col-xs-12 col-sm-12 col-md-12">
                <q-input
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="organizationUserNote"
                  :label="`${'หน้าที่รับผิดชอบ'}`"
                  type="textarea"
                />
              </div>

              <div class="col-12">
                {{ "โครงสร้างตำแหน่ง" }}
              </div>
              <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="positionTypeId"
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
                  :label="`${'ตำแหน่งประเภท'}`"
                  emit-value
                  map-options
                  option-label="name"
                  :options="positionTypeOption"
                  option-value="id"
                  use-input
                  hide-selected
                  fill-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '11')
                "
                />
              </div> -->
              <div class="col-xs-6 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="positionEmployeeLineId"
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกสายงาน'}`]"
                  :label="`${'สายงาน'}`"
                  emit-value
                  map-options
                  option-label="name"
                  :options="positionEmployeeLineOption"
                  option-value="id"
                  use-input
                  hide-selected
                  fill-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '12')
                "
                />
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="positionEmployeePathId"
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
                  :label="`${'ตำแหน่ง'}`"
                  emit-value
                  map-options
                  option-label="name"
                  :options="positionEmployeePathOption"
                  option-value="id"
                  use-input
                  hide-selected
                  fill-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '13')
                "
                />
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  multiple
                  outlined
                  dense
                  lazy-rules
                  v-model="positionEmployeePositionSidesId"
                  :label="`${'ด้าน/สาขา'}`"
                  emit-value
                  map-options
                  option-label="name"
                  :options="positionEmployeePathSideOption"
                  option-value="id"
                  use-input
                  use-chips
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '14')
                "
                  color="primary"
                />
                <!-- :rules="[(val) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
              </div>
              <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="positionExecutiveId"
                  :label="`${'ตำแหน่งทางการบริหาร'}`"
                  emit-value
                  map-options
                  option-label="name"
                  :options="positionExecutiveOption"
                  option-value="id"
                  use-input
                  hide-selected
                  fill-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '15')
                "
                  color="primary"
                />
              </div> -->
              <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  multiple
                  outlined
                  dense
                  lazy-rules
                  v-model="positionExecutiveSideId"
                  :label="`${'ด้านทางการบริหาร'}`"
                  emit-value
                  map-options
                  option-label="name"
                  :options="positionExecutiveSideOption"
                  option-value="id"
                  use-input
                  use-chips
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '16')
                "
                  color="primary"
                />
              </div> -->
              <div class="col-xs-6 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  multiple
                  outlined
                  dense
                  lazy-rules
                  v-model="positionEmployeeLevelId"
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับ'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกระดับ'}`]"
                  :label="`${'ระดับ'}`"
                  emit-value
                  map-options
                  option-label="name"
                  :options="positionEmployeeLevelOption"
                  option-value="id"
                  use-input
                  use-chips
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '17')
                "
                  color="primary"
                />
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6">
                <selector
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="positionEmployeeStatusId"
                  :label="`${'สถานภาพของตำแหน่ง'}`"
                  emit-value
                  map-options
                  option-label="name"
                  :options="positionEmployeeStatusOption"
                  option-value="id"
                  use-input
                  hide-selected
                  fill-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '18')
                "
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกสถานภาพของตำแหน่ง'}`]"
                />
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6">
                <q-input
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="posNo"
                  :label="`${'เลขที่ตำแหน่ง'}`"
                  :rules="[(val:any) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
                />
              </div>
              <div class="col-xs-12 col-sm-12 col-md-12">
                <q-input
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="qualification"
                  :label="`${'คุณวุฒิ'}`"
                  type="textarea"
                />
              </div>
              <div class="col-xs-12 col-sm-12 col-md-12">
                <q-input
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="positionCondition"
                  :label="`${'เงื่อนไขตำแหน่ง'}`"
                  type="textarea"
                />
              </div>
              <div class="col-xs-12 col-sm-12 col-md-12">
                <q-input
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="positionMasterUserNote"
                  :label="`${'หมายเหตุ'}`"
                  type="textarea"
                />
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6 text-grey-9">
                <q-checkbox v-model="isDirector" label="หัวหน้า" />
              </div>
              <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
                <q-toggle v-model="isActive" dense size="34px" color="positive">
                  ปกติ
                </q-toggle>
                <q-toggle
                  v-model="isCondition"
                  dense
                  size="34px"
                  color="positive"
                  class="q-pl-md"
                >
                  ติดเงื่อนไข
                </q-toggle>
              </div>
              <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
                <q-input
                  :class="getClass(true)"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  v-model="conditionNote"
                  :label="`${'รายละเอียดเงื่อนไข'}`"
                  type="textarea"
                />
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <DialogFooter
          :save="clickSave"
          :validate="validateData"
          v-model:editvisible="edit"
          v-model:modalEdit="modalEdit"
        />
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useOrganizationalDataStore } from "@/modules/02_organizational/store";
import Table from "@/modules/03_recruiting/components/Table.vue";
import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
import { useQuasar, QForm } from "quasar";
import type {
  DataOption,
  GovermentOption,
} from "@/modules/02_organizational/interface/index/Main";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";

import type { QTableProps } from "quasar";

const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const { date2Thai, success, modalError, messageError, showLoader, hideLoader } =
  mixin;
const store = useOrganizationalDataStore();
const { organizationalData, changeOrganizationalColumns } = store;
const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
});
const id = ref<string>("");

const organizationOrganizationId = ref<string>();
const organizationAgencyCode = ref<string>();
const organizationGovernmentCode = ref<string>();
const organizationTypeId = ref<string>();
const organizationLevelId = ref<string>();
const organizationAgencyId = ref<string>();
const organizationGovernmentAgencyId = ref<string>();
const organizationTelExternalId = ref<string>();
const organizationTelInternalId = ref<string>();
const organizationFaxId = ref<string>();
// const positionTypeId = ref<string>();
const positionEmployeeLineId = ref<string>();
const positionEmployeePathId = ref<string>();
const positionEmployeePositionSidesId = ref<string[]>([]);
// const positionExecutiveId = ref<string>();
// const positionExecutiveSideId = ref<string[]>([]);
const positionEmployeeLevelId = ref<string[]>([]);
const positionEmployeeStatusId = ref<string>();

const organizationShortName = ref<string>();
const agency = ref<string>();
const government = ref<string>();
const department = ref<string>();
const pile = ref<string>();
const organizationUserNote = ref<string>();
const organizationOrder = ref<string>();
const qualification = ref<string>();
const positionCondition = ref<string>();
const positionMasterUserNote = ref<string>();
const isDirector = ref<boolean>(false);
const isActive = ref<boolean>(false);
const isCondition = ref<boolean>(false);
const conditionNote = ref<string>();
const posNo = ref<string>();

const organizationOrganizationOption = ref<DataOption[]>([]);
const organizationAgencyCodeOption = ref<GovermentOption[]>([]);
const organizationGovernmentCodeOption = ref<GovermentOption[]>([]);
const organizationTypeOption = ref<DataOption[]>([]);
const organizationLevelOption = ref<DataOption[]>([]);
const organizationAgencyOption = ref<DataOption[]>([]);
const organizationGovernmentAgencyOption = ref<DataOption[]>([]);
const organizationTelExternalOption = ref<DataOption[]>([]);
const organizationTelInternalOption = ref<DataOption[]>([]);
const organizationFaxOption = ref<DataOption[]>([]);
// const positionEmployeeTypeOption = ref<DataOption[]>([]);
const positionEmployeeLineOption = ref<DataOption[]>([]);
const positionEmployeePathOption = ref<DataOption[]>([]);
const positionEmployeePathSideOption = ref<DataOption[]>([]);
// const positionEmployeeExecutiveOption = ref<DataOption[]>([]);
// const positionEmployeeExecutiveSideOption = ref<DataOption[]>([]);
const positionEmployeeLevelOption = ref<DataOption[]>([]);
const positionEmployeeStatusOption = ref<DataOption[]>([]);

const organizationOrganizationFilter = ref<DataOption[]>([]);
const organizationAgencyCodeFilter = ref<GovermentOption[]>([]);
const organizationGovernmentCodeFilter = ref<GovermentOption[]>([]);
const organizationTypeFilter = ref<DataOption[]>([]);
const organizationLevelFilter = ref<DataOption[]>([]);
const organizationAgencyFilter = ref<DataOption[]>([]);
const organizationGovernmentAgencyFilter = ref<DataOption[]>([]);
const organizationTelExternalFilter = ref<DataOption[]>([]);
const organizationTelInternalFilter = ref<DataOption[]>([]);
const organizationFaxFilter = ref<DataOption[]>([]);
// const positionEmployeeTypeFilter = ref<DataOption[]>([]);
const positionEmployeeLineFilter = ref<DataOption[]>([]);
const positionEmployeePathFilter = ref<DataOption[]>([]);
const positionEmployeePathSideFilter = ref<DataOption[]>([]);
// const positionEmployeeExecutiveFilter = ref<DataOption[]>([]);
// const positionEmployeeExecutiveSideFilter = ref<DataOption[]>([]);
const positionEmployeeLevelFilter = ref<DataOption[]>([]);
const positionEmployeeStatusFilter = ref<DataOption[]>([]);

const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const statusCode = ref<number>();
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่

const rows = ref<any>([]);
const filter = ref<string>(""); //search data table

const visibleColumns = ref<String[]>([
  "organizationOrganization",
  "organizationAgencyCode",
  "organizationGovernmentAgencyCode",
  "organizationShortName",
  "organizationType",
  "organizationLevel",
  "positionEmployeeLine",
  "positionEmployeePosition",
  "posNo",
]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "organizationOrganization",
    align: "left",
    label: "หน่วยงาน",
    sortable: true,
    field: "organizationOrganization",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "organizationAgencyCode",
    align: "left",
    label: "รหัสหน่วยงาน",
    sortable: true,
    field: "organizationAgencyCode",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "organizationGovernmentAgencyCode",
    align: "left",
    label: "รหัสส่วนราชการ",
    sortable: true,
    field: "organizationGovernmentAgencyCode",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "organizationShortName",
    align: "left",
    label: "ชื่อย่อหน่วยงาน",
    sortable: true,
    field: "organizationShortName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "organizationType",
    align: "left",
    label: "ประเภทหน่วยงาน",
    sortable: true,
    field: "organizationType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "organizationLevel",
    align: "left",
    label: "ระดับหน่วยงาน",
    sortable: true,
    field: "organizationLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionEmployeeLine",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionEmployeeLine",
    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: "posNo",
    align: "left",
    label: "เลขที่ตำแหน่ง",
    sortable: true,
    field: "posNo",
    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 changeOrganizationalColumns("mappingPosition", count);
});

onMounted(async () => {
  hideLoader();
  await fetchOrganization();
  await fetchOrganizationAgency();
  await fetchOrganizationGovernmentAgency();
  await fetchOrganizationAgencyCode();
  await fetchPosition();
  await fetchData();
});

/**
 * ฟังก์ชัน get data ล่าสุด
 */
const fetchData = async () => {
  showLoader();
  await http
    .get(config.API.organizationEmployee)
    .then((res) => {
      let data = res.data.result;
      rows.value = [];
      data.map((r: any) => {
        rows.value.push({
          agency: r.agency,
          conditionNote: r.conditionNote,
          department: r.department,
          government: r.government,
          id: r.id,
          isActive: r.isActive,
          isCondition: r.isCondition,
          isDirector: r.isDirector,
          organizationAgencyId:
            r.organizationAgencyId == "00000000-0000-0000-0000-000000000000"
              ? null
              : r.organizationAgencyId,
          organizationFaxId:
            r.organizationFaxId == "00000000-0000-0000-0000-000000000000"
              ? null
              : r.organizationFaxId,
          organizationFax: r.organizationFax,
          organizationGovernmentAgencyId:
            r.organizationGovernmentAgencyId ==
            "00000000-0000-0000-0000-000000000000"
              ? null
              : r.organizationGovernmentAgencyId,
          organizationLevelId:
            r.organizationLevelId == "00000000-0000-0000-0000-000000000000"
              ? null
              : r.organizationLevelId,
          organizationLevel: r.organizationLevel,
          organizationOrder: r.organizationOrder,
          organizationOrganizationId:
            r.organizationOrganizationId ==
            "00000000-0000-0000-0000-000000000000"
              ? null
              : r.organizationOrganizationId,
          organizationOrganization: r.organizationOrganization,

          organizationGovernmentAgencyCode: r.organizationGovernmentAgencyCode,
          organizationAgencyCode: r.organizationAgencyCode,
          positionEmployeeLevelId: r.positionEmployeeLevels.map(
            (val: any) => val.id
          ),
          positionEmployeePositionSidesId: r.positionEmployeePositionSides.map(
            (val: any) => val.id
          ),
          organizationShortNameId:
            r.organizationShortNameId == "00000000-0000-0000-0000-000000000000"
              ? null
              : r.organizationShortNameId,
          organizationShortName: r.organizationShortName,
          organizationTelExternalId:
            r.organizationTelExternalId ==
            "00000000-0000-0000-0000-000000000000"
              ? null
              : r.organizationTelExternalId,
          organizationTelExternal: r.organizationTelExternal,
          organizationTelInternalId:
            r.organizationTelInternalId ==
            "00000000-0000-0000-0000-000000000000"
              ? null
              : r.organizationTelInternalId,
          organizationTelInternal: r.organizationTelInternal,
          organizationTypeId:
            r.organizationTypeId == "00000000-0000-0000-0000-000000000000"
              ? null
              : r.organizationTypeId,
          organizationType: r.organizationType,
          organizationUserNote: r.organizationUserNote,
          pile: r.pile,
          posNo: r.posNo,
          positionCondition: r.positionCondition,
          positionEmployeeLineId:
            r.positionEmployeeLineId == "00000000-0000-0000-0000-000000000000"
              ? null
              : r.positionEmployeeLineId,
          positionEmployeeLine: r.positionEmployeeLine,
          positionEmployeePathId:
            r.positionEmployeePositionId ==
            "00000000-0000-0000-0000-000000000000"
              ? null
              : r.positionEmployeePositionId,
          positionEmployeePosition: r.positionEmployeePosition,
          positionEmployeeStatusId:
            r.positionEmployeeStatusId == "00000000-0000-0000-0000-000000000000"
              ? null
              : r.positionEmployeeStatusId,
          positionEmployeeStatus: r.positionEmployeeStatus,
          positionMasterUserNote: r.positionMasterUserNote,
          qualification: r.qualification,
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**
 * get รายการ โครงสร้าง
 */
const fetchOrganization = async () => {
  showLoader();
  await http
    .get(config.API.organizationMain)
    .then((res) => {
      const data = res.data.result;
      if (data != null) {
        let OriOption: DataOption[] = [];
        data.organizationOrganizations.map((r: any) => {
          OriOption.push({ id: r.id.toString(), name: r.name.toString() });
        });
        organizationOrganizationOption.value = OriOption;
        organizationOrganizationFilter.value = OriOption;

        let TypeOption: DataOption[] = [];
        data.organizationTypes.map((r: any) => {
          TypeOption.push({ id: r.id.toString(), name: r.name.toString() });
        });
        organizationTypeOption.value = TypeOption;
        organizationTypeFilter.value = TypeOption;

        let LevelOption: DataOption[] = [];
        data.organizationLevels.map((r: any) => {
          LevelOption.push({ id: r.id.toString(), name: r.name.toString() });
        });
        organizationLevelOption.value = LevelOption;
        organizationLevelFilter.value = LevelOption;

        let TelInternalOption: DataOption[] = [];
        data.organizationTelInternals.map((r: any) => {
          TelInternalOption.push({
            id: r.id.toString(),
            name: r.name.toString(),
          });
        });
        organizationTelInternalOption.value = TelInternalOption;
        organizationTelInternalFilter.value = TelInternalOption;

        let TelExternalOption: DataOption[] = [];
        data.organizationTelExternals.map((r: any) => {
          TelExternalOption.push({
            id: r.id.toString(),
            name: r.name.toString(),
          });
        });
        organizationTelExternalOption.value = TelExternalOption;
        organizationTelExternalFilter.value = TelExternalOption;

        let FaxOption: DataOption[] = [];
        data.organizationFaxs.map((r: any) => {
          FaxOption.push({ id: r.id.toString(), name: r.name.toString() });
        });
        organizationFaxOption.value = FaxOption;
        organizationFaxFilter.value = FaxOption;
      }
    })
    .catch((e: any) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**
 *  หน่วยงานต้นสังกัด
 */
const fetchOrganizationAgency = async () => {
  showLoader();
  await http
    .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
    .then((res) => {
      const data = res.data.result;
      let AgencyOption: DataOption[] = [];
      data.map((r: any) => {
        AgencyOption.push({
          id: r.organizationId.toString(),
          name: r.organizationName.toString(),
        });
      });
      organizationAgencyOption.value = AgencyOption;
      organizationAgencyFilter.value = AgencyOption;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**
 *  ส่วนราชการต้นสังกัด
 */
const fetchOrganizationGovernmentAgency = async () => {
  showLoader();
  await http
    .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
    .then((res) => {
      const data = res.data.result;
      let GovernmentAgencyOption: DataOption[] = [];
      data.map((r: any) => {
        GovernmentAgencyOption.push({
          id: r.organizationId.toString(),
          name: r.organizationName.toString(),
        });
      });
      organizationGovernmentAgencyOption.value = GovernmentAgencyOption;
      organizationGovernmentAgencyFilter.value = GovernmentAgencyOption;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**
 *  รหัสหน่วยงาน
 */
const fetchOrganizationAgencyCode = async () => {
  showLoader();
  await http
    .get(config.API.organizationCode)
    .then((res) => {
      const data = res.data.result;
      let option: GovermentOption[] = [];
      data.map((r: any) => {
        option.push({
          id: r.id.toString(),
          governmentCode: r.governmentCode.toString(),
          agencyCode: r.agencyCode.toString(),
          shortName: r.name.toString(),
        });
      });
      organizationAgencyCodeOption.value = option;
      organizationAgencyCodeFilter.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const fetchAgencyCode = async (val: string) => {
  let option: GovermentOption[] = [];
  showLoader();
  await http
    .get(config.API.organizationAgencyCode(val))
    .then((res) => {
      const data = res.data.result;
      data.map((r: any) => {
        option.push({
          id: r.id.toString(),
          governmentCode: r.governmentCode.toString(),
          agencyCode: r.agencyCode.toString(),
          shortName: r.name.toString(),
        });
      });
      organizationGovernmentCodeOption.value = option;
      organizationGovernmentCodeFilter.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
  return option;
};

/**
 * get รายการ ตำแหน่ง
 */
const fetchPosition = async () => {
  showLoader();
  await http
    .get(config.API.positionEmployee)
    .then((res) => {
      const data = res.data.result;

      let optionpositionpaths: DataOption[] = [];
      data.positionEmployeePositions.map((r: any) => {
        optionpositionpaths.push({
          id: r.id.toString(),
          name: r.name.toString(),
          note: r.note.toString(),
        });
      });
      positionEmployeePathOption.value = optionpositionpaths;
      positionEmployeePathFilter.value = optionpositionpaths;

      let optionPositionPathSides: DataOption[] = [];
      data.positionEmployeePositionSides.map((r: any) => {
        optionPositionPathSides.push({
          id: r.id.toString(),
          name: r.name.toString(),
          note: r.note.toString(),
        });
      });
      positionEmployeePathSideOption.value = optionPositionPathSides;
      positionEmployeePathSideFilter.value = optionPositionPathSides;

      //   let optionPositionTypes: DataOption[] = [];
      //   data.positionTypes.map((r: any) => {
      //     optionPositionTypes.push({
      //       id: r.id.toString(),
      //       name: r.name.toString(),
      //     });
      //   });
      //   positionTypeOption.value = optionPositionTypes;
      //   positionTypeFilter.value = optionPositionTypes;

      let optionPositionLines: DataOption[] = [];
      data.positionEmployeeLines.map((r: any) => {
        optionPositionLines.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionEmployeeLineOption.value = optionPositionLines;
      positionEmployeeLineFilter.value = optionPositionLines;

      //   let optionPositionExecutives: DataOption[] = [];
      //   data.positionExecutives.map((r: any) => {
      //     optionPositionExecutives.push({
      //       id: r.id.toString(),
      //       name: r.name.toString(),
      //     });
      //   });
      //   positionExecutiveOption.value = optionPositionExecutives;
      //   positionExecutiveFilter.value = optionPositionExecutives;

      //   let optionPositionExecutiveSides: DataOption[] = [];
      //   data.positionExecutiveSides.map((r: any) => {
      //     optionPositionExecutiveSides.push({
      //       id: r.id.toString(),
      //       name: r.name.toString(),
      //     });
      //   });
      //   positionExecutiveSideOption.value = optionPositionExecutiveSides;
      //   positionExecutiveSideFilter.value = optionPositionExecutiveSides;

      let optionPositionLevels: DataOption[] = [];
      data.positionEmployeeLevels.map((r: any) => {
        optionPositionLevels.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionEmployeeLevelOption.value = optionPositionLevels;
      positionEmployeeLevelFilter.value = optionPositionLevels;

      let optionPositionStatuss: DataOption[] = [];
      data.positionEmployeeStatuss.map((r: any) => {
        optionPositionStatuss.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionEmployeeStatusOption.value = optionPositionStatuss;
      positionEmployeeStatusFilter.value = optionPositionStatuss;
    })
    .catch((e: any) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**
 * กดบันทึกใน dialog
 */
const clickSave = async () => {
  myForm.value!.validate().then(async (result: boolean) => {
    if (result) {
      if (modalEdit.value) {
        await editData();
      } else {
        await saveData();
      }
    }
  });
};

/**
 * บันทึกเพิ่มข้อมูล
 */
const saveData = async () => {
  modal.value = false;
  showLoader();
  await http
    .post(config.API.organizationEmployee, {
      organizationOrganizationId: organizationOrganizationId.value,
      organizationShortNameId: organizationGovernmentCode.value,
      organizationTypeId: organizationTypeId.value,
      organizationLevelId: organizationLevelId.value,
      organizationAgencyId: organizationAgencyId.value,
      organizationGovernmentAgencyId: organizationGovernmentAgencyId.value,
      organizationTelExternalId: organizationTelExternalId.value,
      organizationTelInternalId: organizationTelInternalId.value,
      organizationFaxId: organizationFaxId.value,
      agency: agency.value,
      government: government.value,
      department: department.value,
      pile: pile.value,
      organizationUserNote: organizationUserNote.value,
      organizationOrder: organizationOrder.value,
      //   positionTypeId: positionTypeId.value,
      positionEmployeeLineId: positionEmployeeLineId.value,
      positionEmployeePositionId: positionEmployeePathId.value,
      positionEmployeePositionSidesId: positionEmployeePositionSidesId.value,
      //   positionExecutiveId: positionExecutiveId.value,
      //   positionExecutiveSideId: positionExecutiveSideId.value,
      positionEmployeeLevelsId: positionEmployeeLevelId.value,
      positionEmployeeStatusId: positionEmployeeStatusId.value,
      posNo: posNo.value,
      qualification: qualification.value,
      positionCondition: positionCondition.value,
      positionMasterUserNote: positionMasterUserNote.value,
      isDirector: isDirector.value,
      isActive: isActive.value,
      isCondition: isCondition.value,
      conditionNote: conditionNote.value,
    })
    .then((res) => {
      success($q, "บันทึกข้อมูลร่างสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      modal.value = false;
      await fetchData();
    });
};

/**
 * บันทึกแก้ไขข้อมูล
 */
const editData = async () => {
  modal.value = false;
  showLoader();
  await http
    .put(config.API.organizationEmployeeId(id.value), {
      organizationOrganizationId: organizationOrganizationId.value,
      organizationShortNameId: organizationGovernmentCode.value,
      organizationTypeId: organizationTypeId.value,
      organizationLevelId: organizationLevelId.value,
      organizationAgencyId: organizationAgencyId.value,
      organizationGovernmentAgencyId: organizationGovernmentAgencyId.value,
      organizationTelExternalId: organizationTelExternalId.value,
      organizationTelInternalId: organizationTelInternalId.value,
      organizationFaxId: organizationFaxId.value,
      agency: agency.value,
      government: government.value,
      department: department.value,
      pile: pile.value,
      organizationUserNote: organizationUserNote.value,
      organizationOrder: organizationOrder.value,
      //   positionTypeId: positionTypeId.value,
      positionEmployeeLineId: positionEmployeeLineId.value,
      positionEmployeePositionId: positionEmployeePathId.value,
      positionEmployeePositionSidesId: positionEmployeePositionSidesId.value,
      //   positionExecutiveId: positionExecutiveId.value,
      //   positionExecutiveSideId: positionExecutiveSideId.value,
      positionEmployeeLevelsId: positionEmployeeLevelId.value,
      positionEmployeeStatusId: positionEmployeeStatusId.value,
      posNo: posNo.value,
      qualification: qualification.value,
      positionCondition: positionCondition.value,
      positionMasterUserNote: positionMasterUserNote.value,
      isDirector: isDirector.value,
      isActive: isActive.value,
      isCondition: isCondition.value,
      conditionNote: conditionNote.value,
    })
    .then((res) => {
      success($q, "บันทึกข้อมูลร่างสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      edit.value = false;
      await fetchData();
    });
};

const clickDelete = (id: string) => {
  $q.dialog({
    title: "ยืนยันการลบข้อมูล",
    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(async () => {
      await deleteData(id);
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};

const deleteData = async (id: string) => {
  showLoader();
  await http
    .delete(config.API.organizationEmployeeId(id))
    .then((res) => {
      success($q, "ลบข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
      await fetchData();
    });
};

/**
 * กดปิด dialog
 */
const clickClose = async () => {
  if (editRow.value == true) {
    $q.dialog({
      title: `ข้อมูลมีการแก้ไข`,
      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
      cancel: "ยกเลิก",
      ok: "ยืนยัน",
      persistent: true,
    }).onOk(async () => {
      modal.value = false;
    });
  } else {
    modal.value = false;
  }
};

/**
 * กดเลือกข้อมูลที่จะแก้ไข
 * @param props ค่า props ใน row ที่เลือก
 */
const selectData = async (props: any) => {
  editRow.value = false;
  modalEdit.value = true;
  modal.value = true;
  edit.value = true;
  id.value = props.id;
  organizationOrganizationId.value = props.organizationOrganizationId;
  organizationAgencyCode.value = props.organizationAgencyCode;
  await updateAgencyCode(props.organizationAgencyCode);
  organizationGovernmentCode.value = props.organizationShortNameId;
  await updateGovernmentCode(props.organizationShortNameId);
  organizationTypeId.value = props.organizationTypeId;
  organizationLevelId.value = props.organizationLevelId;
  organizationAgencyId.value = props.organizationAgencyId;
  organizationGovernmentAgencyId.value = props.organizationGovernmentAgencyId;
  organizationTelExternalId.value = props.organizationTelExternalId;
  organizationTelInternalId.value = props.organizationTelInternalId;
  organizationFaxId.value = props.organizationFaxId;
  organizationShortName.value = props.organizationShortName;
  agency.value = props.agency;
  government.value = props.government;
  department.value = props.department;
  pile.value = props.pile;
  organizationUserNote.value = props.organizationUserNote;
  organizationOrder.value = props.organizationOrder;

  //   positionTypeId.value = props.positionTypeId;
  positionEmployeeLineId.value = props.positionEmployeeLineId;
  positionEmployeePathId.value = props.positionEmployeePathId;
  positionEmployeePositionSidesId.value = props.positionEmployeePositionSidesId;
  //   positionExecutiveId.value = props.positionExecutiveId;
  //   positionExecutiveSideId.value = props.positionExecutiveSideId;
  positionEmployeeLevelId.value = props.positionEmployeeLevelId;
  positionEmployeeStatusId.value = props.positionEmployeeStatusId;
  posNo.value = props.posNo;
  qualification.value = props.qualification;
  positionCondition.value = props.positionCondition;
  positionMasterUserNote.value = props.positionMasterUserNote;
  isDirector.value = props.isDirector;
  isActive.value = props.isActive;
  isCondition.value = props.isCondition;
  conditionNote.value = props.conditionNote;
  id.value = props.id;
};

/**
 * กดปุ่มเพิ่มบน table
 */
const clickAdd = () => {
  editRow.value = false;
  modalEdit.value = false;
  modal.value = true;
  edit.value = true;
  id.value = "";
  organizationOrganizationId.value = "";
  organizationAgencyCode.value = "";
  organizationGovernmentCode.value = "";
  organizationTypeId.value = "";
  organizationLevelId.value = "";
  organizationAgencyId.value = "";
  organizationGovernmentAgencyId.value = "";
  organizationTelExternalId.value = "";
  organizationTelInternalId.value = "";
  organizationFaxId.value = "";
  organizationShortName.value = "";
  agency.value = "";
  government.value = "";
  department.value = "";
  pile.value = "";
  organizationUserNote.value = "";
  organizationOrder.value = "";

  //   positionTypeId.value = "";
  positionEmployeeLineId.value = "";
  positionEmployeePathId.value = "";
  positionEmployeePositionSidesId.value = [];
  //   positionExecutiveId.value = "";
  //   positionExecutiveSideId.value = [];
  positionEmployeeLevelId.value = [];
  positionEmployeeStatusId.value = "";
  posNo.value = "";
  qualification.value = "";
  positionCondition.value = "";
  positionMasterUserNote.value = "";
  isDirector.value = false;
  isActive.value = false;
  isCondition.value = false;
  conditionNote.value = "";
};

/**เมื่อเลือกใหม่
 * q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
 * @param val ค่าตัวที่เลือก
 */
const updateAgencyCode = async (val: string) => {
  await fetchAgencyCode(val);
};

/**เมื่อเลือกใหม่
 * q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
 * @param val ค่าตัวที่เลือก
 */
const updateGovernmentCode = async (val: string) => {
  let data = organizationGovernmentCodeFilter.value.find(
    (v: GovermentOption) => v.id.indexOf(val) > -1
  );
  organizationShortName.value = data?.shortName;
  posNo.value = data?.shortName;
};

/**Fuction Filter DropDown
 * q-select ส่งค่ามาให้เองจาก @filter="filterSelector"
 * @param val ค่าตัวพิมพ์ค้นหา
 * @param update ทุกครั้งที่พิมพ์ค่า
 */
const filterSelector = (val: any, update: Function, filtername: string) => {
  switch (filtername) {
    case "1":
      update(() => {
        organizationOrganizationOption.value =
          organizationOrganizationFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "2":
      update(() => {
        organizationAgencyCodeOption.value =
          organizationAgencyCodeFilter.value.filter(
            (v: GovermentOption) => v.agencyCode.indexOf(val) > -1
          );
      });
      break;
    case "3":
      update(() => {
        organizationGovernmentCodeOption.value =
          organizationGovernmentCodeFilter.value.filter(
            (v: GovermentOption) => v.governmentCode.indexOf(val) > -1
          );
      });
    case "4":
      update(() => {
        organizationAgencyOption.value = organizationAgencyFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "5":
      update(() => {
        organizationGovernmentAgencyOption.value =
          organizationGovernmentAgencyFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "6":
      update(() => {
        organizationTypeOption.value = organizationTypeFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "7":
      update(() => {
        organizationLevelOption.value = organizationLevelFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "8":
      update(() => {
        organizationTelExternalOption.value =
          organizationTelExternalFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "9":
      update(() => {
        organizationTelInternalOption.value =
          organizationTelInternalFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "10":
      update(() => {
        organizationFaxOption.value = organizationFaxFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    // case "11":
    //   update(() => {
    //     positionEmployeeTypeOption.value = positionEmployeeTypeFilter.value.filter(
    //       (v: DataOption) => v.name.indexOf(val) > -1
    //     );
    //   });
    //   break;
    case "12":
      update(() => {
        positionEmployeeLineOption.value =
          positionEmployeeLineFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "13":
      update(() => {
        positionEmployeePathOption.value =
          positionEmployeePathFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "14":
      update(() => {
        positionEmployeePathSideOption.value =
          positionEmployeePathSideFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    // case "15":
    //   update(() => {
    //     positionEmployeeExecutiveOption.value = positionEmployeeExecutiveFilter.value.filter(
    //       (v: DataOption) => v.name.indexOf(val) > -1
    //     );
    //   });
    //   break;
    // case "16":
    //   update(() => {
    //     positionEmployeeExecutiveSideOption.value =
    //       positionEmployeeExecutiveSideFilter.value.filter(
    //         (v: DataOption) => v.name.indexOf(val) > -1
    //       );
    //   });
    //   break;
    case "17":
      update(() => {
        positionEmployeeLevelOption.value =
          positionEmployeeLevelFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "18":
      update(() => {
        positionEmployeeStatusOption.value =
          positionEmployeeStatusFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;

    default:
      break;
  }
};

/**
 * validate input ใน dialog
 */
const validateData = async () => {
  checkValidate.value = true;
  await myForm.value!.validate().then((result: boolean) => {
    if (result == false) {
      checkValidate.value = false;
    }
  });
};

/**
 * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
 * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
 */
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
