divdivdivdivdivdiv
<!-- card ตำแหน่ง/ค่าจ้าง -->
<template>
  <q-card flat bordered class="col-12 q-px-lg q-py-md">
    <q-form ref="myForm">
      <ProfileTable
        :rows="rows"
        :columns="columns"
        :filter="filter"
        :visible-columns="visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="visibleColumns"
        :add="clickAdd"
        name="ตำแหน่ง/ค่าจ้าง (ลูกจ้าง)"
        icon="mdi-cash"
        :statusEdit="statusEdit"
      >
        <template #columns="props">
          <q-tr :props="props">
            <q-td
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              @click="selectData(props)"
              class="cursor-pointer"
            >
              <div v-if="col.name == 'date'" class="table_ellipsis">
                {{ date2Thai(col.value) }}
              </div>
              <div
                v-else-if="
                  col.name == 'positionSalaryAmount' ||
                  col.name == 'mouthSalaryAmount' ||
                  col.name == 'amount'
                "
                class="table_ellipsis"
              >
                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
              </div>
              <div v-else class="table_ellipsis">
                {{ col.value }}
              </div>
            </q-td>
            <q-td auto-width>
              <q-btn
                color="info"
                flat
                dense
                round
                size="14px"
                icon="mdi-history"
                @click="clickHistory(props.row)"
              />
            </q-td>
          </q-tr>
        </template>
      </ProfileTable>
    </q-form>
  </q-card>
  <!-- popup Edit window-->
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 60vw; max-width: 80vw">
      <q-form ref="myForm">
        <DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
        <q-separator />
        <q-card-section class="q-pa-sm bg-grey-1">
          <div class="row col-12 q-col-gutter-sm">
            <q-card class="fit q-pa-sm">
              <q-scroll-area visible style="height: 60vh">
                <div class="row col-12 q-col-gutter-xs">
                  <div class="col-xs-6 col-sm-6 col-md-6">
                    <datepicker
                      menu-class-name="modalfix"
                      :readonly="!edit"
                      v-model="date"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      @update:modelValue="clickEditRow"
                      week-start="0"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          :class="getClass(edit)"
                          :outlined="edit"
                          dense
                          lazy-rules
                          :borderless="!edit"
                          :model-value="date2Thai(date)"
                          :rules="[
                                (val:string) =>
                                  !!val ||
                                  `${'กรุณาเลือกวัน เดือน ปี รับตำแหน่ง'}`,
                              ]"
                          :label="`${'วัน เดือน ปี รับตำแหน่ง'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              :style="
                                edit
                                  ? 'color: var(--q-primary)'
                                  : 'color: var(--q-grey)'
                              "
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-xs-6 col-sm-6 col-md-6">
                    <!-- <selector
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="posNoId"
                      :rules="[
                            (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
                          ]"
                      :label="`${'ตำแหน่งเลขที่'}`"
                      @update:modelValue="clickEditRow"
                      emit-value
                      map-options
                      option-label="name"
                      :options="posNoOptions"
                      option-value="id"
                      hide-bottom-space
                      use-input
                      input-debounce="0"
                      @filter="(inputValue:any,
                        doneFn:Function) => filterSelector(inputValue, doneFn,'posNo'
                        ) "
                    /> -->
                    <q-input
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="posNoEmployee"
                      :rules="[
                            (val:string) =>
                              !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`,
                          ]"
                      :label="`${'ตำแหน่งเลขที่'}`"
                      @update:modelValue="clickEditRow"
                      hide-bottom-space
                      autogrow
                    />
                  </div>
                  <div class="col-xs-6 col-sm-6 col-md-6">
                    <selector
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="employeePositionId"
                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
                      :label="`${'ตำแหน่ง'}`"
                      @update:modelValue="clickEditRow"
                      emit-value
                      map-options
                      option-label="name"
                      :options="employeePositionOptions"
                      option-value="id"
                      hide-bottom-space
                      use-input
                      input-debounce="0"
                      @filter="(inputValue:any,
                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
                        ) "
                    />
                  </div>
                  <div class="col-xs-6 col-sm-6 col-md-6">
                    <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
                    <selector
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="employeePositionSideId"
                      :rules="[(val:string) => !!val || `${'กรุณาเลือกด้านของตำแหน่ง'}`]"
                      :label="`${'ด้านของตำแหน่ง'}`"
                      @update:modelValue="clickEditRow"
                      emit-value
                      map-options
                      option-label="name"
                      :options="employeePositionSideOptions"
                      option-value="id"
                      hide-bottom-space
                      use-input
                      input-debounce="0"
                      @filter="(inputValue:any,
                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
                        ) "
                    />
                  </div>
                  <div class="col-xs-6 col-sm-6 col-md-6">
                    <selector
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="employeeLevelId"
                      :rules="[
                            (val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`,
                          ]"
                      :label="`${'ระดับชั้นงาน'}`"
                      @update:modelValue="clickEditRow"
                      emit-value
                      map-options
                      option-label="name"
                      :options="employeeLevelOptions"
                      option-value="id"
                      hide-bottom-space
                      use-input
                      input-debounce="0"
                      @filter="(inputValue:any,
                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
                        ) "
                    />
                  </div>
                  <div class="col-xs-6 col-sm-6 col-md-6">
                    <selector
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="employeeGroupId"
                      :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
                      :label="`${'กลุ่มงาน'}`"
                      @update:modelValue="clickEditRow"
                      emit-value
                      map-options
                      option-label="name"
                      :options="employeeGroupOptions"
                      option-value="id"
                      hide-bottom-space
                      use-input
                      input-debounce="0"
                      @filter="(inputValue:any,
                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
                        ) "
                    />
                  </div>
                  <div class="col-xs-12">
                    <selector
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="agencyId"
                      :rules="[(val:string) => !!val || `${'กรุณาเลือกสังกัด'}`]"
                      :label="`${'สังกัด'}`"
                      @update:model-value="(value:string) => selectAgency(value)"
                      emit-value
                      map-options
                      option-label="name"
                      :options="agencyOptions"
                      option-value="id"
                      hide-bottom-space
                      use-input
                      input-debounce="0"
                      @filter="(inputValue:any,
                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
                        ) "
                    />
                  </div>
                  <div class="col-xs-6 col-sm-6 col-md-6">
                    <q-input
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="amount"
                      :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
                      :label="`${'ค่าจ้าง'}`"
                      @update:modelValue="clickEditRow"
                      type="number"
                      hide-bottom-space
                    />
                  </div>
                  <!-- <div class="col-xs-4 col-sm-4 col-md-4">
                    <q-input
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="positionSalaryAmount"
                      :rules="[
                            (val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                          ]"
                      :label="`${'เงินประจำตำแหน่ง'}`"
                      @update:modelValue="clickEditRow"
                      type="number"
                      hide-bottom-space
                    />
                  </div>
                  <div class="col-xs-4 col-sm-4 col-md-4">
                    <q-input
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="mouthSalaryAmount"
                      :rules="[
                        (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                      ]"
                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
                      @update:modelValue="clickEditRow"
                      type="number"
                      hide-bottom-space
                    />
                  </div> -->
                  <div class="col-xs-6 col-sm-6 col-md-6">
                    <q-input
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="salaryClass"
                      :rules="[
                            (val:string) =>
                              !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
                          ]"
                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
                      @update:modelValue="clickEditRow"
                      hide-bottom-space
                      autogrow
                    >
                      <!-- <template v-slot:append>
                        <q-btn
                          color="info"
                          flat
                          dense
                          round
                          size="14px"
                          icon="mdi-plus"
                          @click="templateDetail"
                          :disable="!edit"
                        />
                      </template> -->
                    </q-input>
                  </div>

                  <div class="row col-xs-12 col-sm-12 col-md-12">
                    <selector
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="refSelected"
                      :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
                      @update:modelValue="clickEditRowRef"
                      option-label="name"
                      :options="refOptions"
                      option-value="id"
                      hide-bottom-space
                      use-input
                      input-debounce="0"
                      @filter="(inputValue:any,
                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
                        ) "
                    />
                  </div>
                  <div class="col-xs-12 col-sm-12 col-md-12">
                    <q-input
                      :class="getClass(edit)"
                      :outlined="edit"
                      dense
                      lazy-rules
                      :readonly="!edit"
                      :borderless="!edit"
                      v-model="salaryRef"
                      :rules="[
                            (val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
                          ]"
                      :label="`${'เอกสารอ้างอิง'}`"
                      @update:modelValue="clickEditRow"
                      type="textarea"
                      hide-bottom-space
                    />
                  </div>
                </div>
              </q-scroll-area>
            </q-card>
          </div>
        </q-card-section>
        <q-separator />
        <DialogFooter
          :cancel="clickCancel"
          :edit="clickEdit"
          :save="clickSave"
          :validate="validateData"
          :clickNext="clickNext"
          :clickPrevious="clickPrevious"
          :clickDelete="clickDelete"
          v-model:editvisible="edit"
          v-model:next="next"
          v-model:previous="previous"
          v-model:modalEdit="modalEdit"
        />
      </q-form>
    </q-card>
  </q-dialog>
  <HistoryTable
    :rows="rowsHistory"
    :columns="columnsHistory"
    :filter="filterHistory"
    :visible-columns="visibleColumnsHistory"
    v-model:modal="modalHistory"
    v-model:inputfilter="filterHistory"
    v-model:inputvisible="visibleColumnsHistory"
    v-model:tittle="tittleHistory"
  >
    <template #columns="props">
      <q-tr :props="props">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div
            v-if="col.name == 'date' || col.name == 'createdAt'"
            class="table_ellipsis"
          >
            {{ date2Thai(col.value) }}
          </div>
          <div
            v-else-if="
              col.name == 'positionSalaryAmount' ||
              col.name == 'mouthSalaryAmount' ||
              col.name == 'amount'
            "
            class="table_ellipsis"
          >
            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
          </div>
          <div v-else class="table_ellipsis">
            {{ col.value }}
          </div>
        </q-td>
      </q-tr>
    </template>
  </HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
  RequestItemsEmployee,
  DataPropsEmployee,
} from "@/modules/04_registry/interface/request/Salary";
import type { ResponseObjectEmployee } from "@/modules/04_registry/interface/response/Salary";
import type {
  DataOption,
  treeTab,
} from "@/modules/04_registry/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";

const props = defineProps({
  statusEdit: {
    type: Boolean,
    required: true,
  },
});

const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
const route = useRoute();
const id = ref<string>("");
const date = ref<Date>(new Date());
const amount = ref<number | null>(null);
const positionSalaryAmount = ref<number | null>(null);
const mouthSalaryAmount = ref<number | null>(null);

const posNoId = ref<string>("");
const posNoEmployee = ref<string>("");
const posNoOptions = ref<DataOption[]>([]);
const posNoOptionsFilter = ref<DataOption[]>([]);

const employeePositionId = ref<string>("");
const employeePositionOptions = ref<DataOption[]>([]);
const employeePositionOptionsFilter = ref<DataOption[]>([]);

const employeePositionSideId = ref<string>("");
const employeePositionSideOptions = ref<DataOption[]>([]);
const employeePositionSideOptionsFilter = ref<DataOption[]>([]);

const employeeLevelId = ref<string>("");
const employeeLevelOptions = ref<DataOption[]>([]);
const employeeLevelOptionsFilter = ref<DataOption[]>([]);

const employeeGroupId = ref<string>("");
const employeeGroupOptions = ref<DataOption[]>([]);
const employeeGroupOptionsFilter = ref<DataOption[]>([]);

const agencyId = ref<string>("");
const agencyOptions = ref<DataOption[]>([]);
const agencyOptionsFilter = ref<DataOption[]>([]);

const refSelected = ref<DataOption | null>(null);
const refOptions = ref<DataOption[]>([
  {
    id: "17",
    name: "****************  ข้าราชการสามัญ  **********************",
    disable: true,
  },
  {
    id: "18",
    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "19",
    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "20",
    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "0",
    name: "****************  ครู  **********************",
    disable: true,
  },
  {
    id: "1",
    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "2",
    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
  {
    id: "4",
    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
  },
  {
    id: "5",
    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
  },
  {
    id: "6",
    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "7",
    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "8",
    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
  },
  {
    id: "9",
    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "10",
    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "11",
    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "12",
    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "13",
    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "14",
    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "15",
    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
  {
    id: "21",
    name: "****************  ลูกจ้าง  **********************",
    disable: true,
  },
  {
    id: "22",
    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "23",
    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "24",
    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "25",
    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "26",
    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "27",
    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "28",
    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
  {
    id: "30",
    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "31",
    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
  },
  {
    id: "32",
    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
  },
  {
    id: "33",
    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
]);
const refOptionsFilter = ref<DataOption[]>([
  {
    id: "17",
    name: "****************  ข้าราชการสามัญ  **********************",
    disable: true,
  },
  {
    id: "18",
    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "19",
    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "20",
    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "0",
    name: "****************  ครู  **********************",
    disable: true,
  },
  {
    id: "1",
    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "2",
    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
  {
    id: "4",
    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
  },
  {
    id: "5",
    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
  },
  {
    id: "6",
    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "7",
    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "8",
    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
  },
  {
    id: "9",
    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "10",
    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "11",
    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "12",
    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "13",
    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "14",
    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "15",
    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
  {
    id: "21",
    name: "****************  ลูกจ้าง  **********************",
    disable: true,
  },
  {
    id: "22",
    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "23",
    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "24",
    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "25",
    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "26",
    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "27",
    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "28",
    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
  {
    id: "30",
    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "31",
    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
  },
  {
    id: "32",
    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
  },
  {
    id: "33",
    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
]);
const salaryClass = ref<string>();
const salaryRef = ref<string>();
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<ResponseObjectEmployee>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<ResponseObjectEmployee[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/ค่าจ้าง"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(route.params.id.toString());
const rows = ref<ResponseObjectEmployee[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.salary.columns.length == 0
  ? (visibleColumns.value = [
      "date",
      "amount",
      "positionSalaryAmount",
      "mouthSalaryAmount",
      "oc",
      "positionEmployeePosition",
      "posNo",
      "positionEmployeePositionSide",
      "positionEmployeeLevel",
      "positionEmployeeGroup",
      "salaryClass",
      "salaryRef",
    ])
  : (visibleColumns.value = profileData.salary.columns);
const columns = ref<QTableProps["columns"]>([
  {
    name: "date",
    align: "left",
    label: "วัน เดือน ปี รับตำแหน่ง",
    sortable: true,
    field: "date",
    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: "positionSalaryAmount",
  //     align: "left",
  //     label: "เงินประจำตำแหน่ง",
  //     sortable: true,
  //     field: "positionSalaryAmount",
  //     headerStyle: "font-size: 14px",
  //     style: "font-size: 14px",
  //     sort: (a: string, b: string) =>
  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  //   },
  //   {
  //     name: "mouthSalaryAmount",
  //     align: "left",
  //     label: "เงินค่าตอบแทนรายเดือน",
  //     sortable: true,
  //     field: "mouthSalaryAmount",
  //     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: "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" }),
  },
  {
    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: "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: "salaryClass",
    align: "left",
    label: "ตำแหน่ง (รายละเอียด)",
    sortable: true,
    field: "salaryClass",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "salaryRef",
    align: "left",
    label: "เอกสารอ้างอิง",
    sortable: true,
    field: "salaryRef",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);
const columnsHistory = ref<QTableProps["columns"]>([
  {
    name: "date",
    align: "left",
    label: "วัน เดือน ปี รับตำแหน่ง",
    sortable: true,
    field: "date",
    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: "positionSalaryAmount",
  //     align: "left",
  //     label: "เงินประจำตำแหน่ง",
  //     sortable: true,
  //     field: "positionSalaryAmount",
  //     headerStyle: "font-size: 14px",
  //     style: "font-size: 14px",
  //     sort: (a: string, b: string) =>
  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  //   },
  //   {
  //     name: "mouthSalaryAmount",
  //     align: "left",
  //     label: "เงินค่าตอบแทนรายเดือน",
  //     sortable: true,
  //     field: "mouthSalaryAmount",
  //     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: "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" }),
  },
  {
    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: "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: "salaryClass",
    align: "left",
    label: "ตำแหน่ง (รายละเอียด)",
    sortable: true,
    field: "salaryClass",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "salaryRef",
    align: "left",
    label: "เอกสารอ้างอิง",
    sortable: true,
    field: "salaryRef",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "createdFullName",
    align: "left",
    label: "ผู้ดำเนินการ",
    sortable: true,
    field: "createdFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    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" }),
  },
]);
const visibleColumnsHistory = ref<String[]>([
  "date",
  "amount",
  "positionSalaryAmount",
  "mouthSalaryAmount",
  "oc",
  "positionEmployeePosition",
  "posNo",
  "positionEmployeePositionSide",
  "positionEmployeeLevel",
  "positionEmployeeGroup",
  "salaryClass",
  "salaryRef",
  "createdFullName",
  "createdAt",
]);

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

onMounted(async () => {
  await fetchData();
  await fetchDataSelector();
});

const fetchDataSelector = async () => {
  loaderPage(true);
  await fetchEmployeePosition();
  await fetchEmployeePositionSide();
  await fetchEmployeeLevel();
  await fetchEmployeeGroup();
  await fetchAgency();
  loaderPage(false);
};
// ตำแหน่ง
const fetchEmployeePosition = async () => {
  await http
    .get(config.API.positionEmployeePosition)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });

      employeePositionOptions.value = option;
      employeePositionOptionsFilter.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    });
};
// ด้านของตำแหน่ง
const fetchEmployeePositionSide = async () => {
  await http
    .get(config.API.positionEmployeePositionSide)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });

      employeePositionSideOptions.value = option;
      employeePositionSideOptionsFilter.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    });
};
// ระดับชั้นงาน
const fetchEmployeeLevel = async () => {
  await http
    .get(config.API.positionEmployeeLevel)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });

      employeeLevelOptions.value = option;
      employeeLevelOptionsFilter.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    });
};
// กลุ่มงาน
const fetchEmployeeGroup = async () => {
  await http
    .get(config.API.positionEmployeeGroup)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });

      employeeGroupOptions.value = option;
      employeeGroupOptionsFilter.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    });
};

// สังกัด
const fetchAgency = async () => {
  await http
    .get(config.API.organizationRoot)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.label.toString() });
      });

      agencyOptions.value = option;
      agencyOptionsFilter.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    });
};

const selectAgency = (val: string) => {
  fetchPositionNumber(val);
  clickEditRow();
};

const filterSelector = (val: any, update: Function, filtername: string) => {
  switch (filtername) {
    case "posNo":
      update(() => {
        posNoOptions.value = posNoOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "employeePosition":
      update(() => {
        employeePositionOptions.value =
          employeePositionOptionsFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "employeePositionSide":
      update(() => {
        employeePositionSideOptions.value =
          employeePositionSideOptionsFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "employeeLevel":
      update(() => {
        employeeLevelOptions.value = employeeLevelOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "employeeGroup":
      update(() => {
        employeeGroupOptions.value = employeeGroupOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "agency":
      update(() => {
        agencyOptions.value = agencyOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "ref":
      update(() => {
        refOptions.value = refOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
};

const fetchData = async () => {
  loaderPage(true);
  await http
    .get(config.API.profileSalaryEmployeeId(profileId.value))
    .then((res) => {
      const data = res.data.result;
      //   console.log(data);
      rows.value = [];
      data.map((e: ResponseObjectEmployee) => {
        rows.value.push({
          id: e.id,
          date: new Date(e.date),
          amount: e.amount,
          positionSalaryAmount: e.positionSalaryAmount,
          mouthSalaryAmount: e.mouthSalaryAmount,
          oc: e.oc,
          ocId: e.ocId,
          posNo: e.posNo,
          posNoId: e.posNoId,
          posNoEmployee: e.posNoEmployee,
          positionEmployeeGroup: e.positionEmployeeGroup,
          positionEmployeeGroupId: e.positionEmployeeGroupId,
          positionEmployeeLevel: e.positionEmployeeLevel,
          positionEmployeeLevelId: e.positionEmployeeLevelId,
          positionEmployeePosition: e.positionEmployeePosition,
          positionEmployeePositionId: e.positionEmployeePositionId,
          positionEmployeePositionSide: e.positionEmployeePositionSide,
          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
          salaryClass: e.salaryClass,
          salaryRef: e.salaryRef,
          createdFullName: e.createdFullName,
          createdAt: new Date(e.createdAt),
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

const fetchPositionNumber = async (id: string) => {
  //   loaderPage(true);
  await http
    .get(config.API.getPositionNumberIdByOcId(id))
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      posNoOptions.value = option;
      posNoOptionsFilter.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

/**
 * กดดูข้อมูลก่อนหน้า
 */
const clickPrevious = async () => {
  edit.value = false;
  rowIndex.value -= 1;
  await getData();
  await checkRowPage();
};

/**
 * กดดูข้อมูลต่อไป
 */
const clickNext = async () => {
  edit.value = false;
  rowIndex.value += 1;
  await getData();
  await checkRowPage();
};

/**
 * กดดูข้อมูลต่อไป
 */
const getData = async () => {
  const row = rows.value[rowIndex.value];
  date.value = row.date;
  amount.value = row.amount;
  positionSalaryAmount.value = row.positionSalaryAmount;
  mouthSalaryAmount.value = row.mouthSalaryAmount;
  //   positionId.value = row.positionId;
  //   posNoId.value = row.posNoId;
  //   positionLineId.value = row.positionLineId;
  //   positionPathSideId.value = row.positionPathSideId;
  //   positionTypeId.value = row.positionTypeId;
  //   positionLevelId.value = row.positionLevelId;
  //   positionExecutiveId.value = row.positionExecutiveId;
  //   positionExecutiveSideId.value = row.positionExecutiveSideId;
  posNoId.value = row.posNoId ?? "";
  posNoEmployee.value = row.posNoEmployee ?? "";
  employeePositionId.value = row.positionEmployeePositionId ?? "";
  employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
  employeeLevelId.value = row.positionEmployeeLevelId ?? "";
  employeeGroupId.value = row.positionEmployeeGroupId ?? "";
  agencyId.value = row.ocId ?? "";

  salaryClass.value = row.salaryClass ?? "";
  salaryRef.value = row.salaryRef ?? "";
  id.value = row.id;
  await fetchPositionNumber(row.ocId ?? "");
};

/**
 * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
 */
const checkRowPage = () => {
  editRow.value = false;
  next.value = true;
  previous.value = true;
  //   console.log(rowIndex.value);
  if (rowIndex.value + 1 >= rows.value.length) {
    next.value = false;
  }
  if (rowIndex.value - 1 < 0) {
    previous.value = false;
  }
};

/**
 * กดปุ่มแก้ไขใน dialog
 */
const clickEdit = () => {
  editRow.value = false;
  next.value = false;
  previous.value = false;
};

/**
 * กดปุ่มเพิ่มด้านบน table
 */
const clickAdd = async () => {
  editRow.value = false;
  await addData();
};

/**
 * gen ตำแหน่ง (รายละเอียด)
 */
const templateDetail = async () => {
  //   salaryClass.value = "";
  //   if (ocId.value != "") {
  //     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
  //   }
  //   const positionF = positionOptions.value.filter(
  //     (r: DataOption) => r.id == positionId.value
  //   );
  //   if (positionF.length > 0) {
  //     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
  //   }
  //   const posNoF = posNoOptions.value.filter(
  //     (r: DataOption) => r.id == posNoId.value
  //   );
  //   if (posNoF.length > 0) {
  //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
  //   }
  //   const positionLineF = positionLineOptions.value.filter(
  //     (r: DataOption) => r.id == positionLineId.value
  //   );
  //   if (positionLineF.length > 0) {
  //     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
  //   }
  //   const positionPathSideF = positionSideOptions.value.filter(
  //     (r: DataOption) => r.id == positionPathSideId.value
  //   );
  //   if (positionPathSideF.length > 0) {
  //     salaryClass.value =
  //       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
  //   }
  //   const positionTypeF = positionTypeOptions.value.filter(
  //     (r: DataOption) => r.id == positionTypeId.value
  //   );
  //   if (positionTypeF.length > 0) {
  //     salaryClass.value =
  //       salaryClass.value + `ประเภทตำแหน่ง${positionTypeF[0].name} `;
  //   }
  //   const positionLevelF = positionLevelOptions.value.filter(
  //     (r: DataOption) => r.id == positionLevelId.value
  //   );
  //   if (positionLevelF.length > 0) {
  //     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
  //   }
  //   const positionExecutiveF = positionExecutiveOptions.value.filter(
  //     (r: DataOption) => r.id == positionExecutiveId.value
  //   );
  //   if (positionExecutiveF.length > 0) {
  //     salaryClass.value =
  //       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
  //   }
};

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

/**
 * บันทึกเพิ่มข้อมูล
 */
const saveData = async () => {
  loaderPage(true);
  await http
    .post(config.API.profileSalaryEmployeeId(profileId.value), {
      amount: amount.value,
      date: dateToISO(date.value),
      positionSalaryAmount: positionSalaryAmount.value,
      mouthSalaryAmount: mouthSalaryAmount.value,
      ocId: agencyId.value,
      //   posNoId: posNoId.value,
      posNoEmployee: posNoEmployee.value,
      positionEmployeeGroupId: employeeGroupId.value,
      positionEmployeeLevelId: employeeLevelId.value,
      positionEmployeePositionId: employeePositionId.value,
      positionEmployeePositionSideId: employeePositionSideId.value,
      salaryClass: salaryClass.value,
      salaryRef: salaryRef.value,
    })
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
      modal.value = false;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      await fetchData();
    });
};

/**
 * บันทึกแก้ไขข้อมูล
 */
const editData = async () => {
  loaderPage(true);
  await http
    .put(config.API.profileSalaryEmployeeId(id.value), {
      amount: amount.value,
      date: dateToISO(date.value),
      positionSalaryAmount: positionSalaryAmount.value,
      mouthSalaryAmount: mouthSalaryAmount.value,
      ocId: agencyId.value,
      //   posNoId: posNoId.value,
      posNoEmployee: posNoEmployee.value,
      positionEmployeeGroupId: employeeGroupId.value,
      positionEmployeeLevelId: employeeLevelId.value,
      positionEmployeePositionId: employeePositionId.value,
      positionEmployeePositionSideId: employeePositionSideId.value,
      salaryClass: salaryClass.value,
      salaryRef: salaryRef.value,
    })
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
      modal.value = false;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      await fetchData();
    });
};

/**
 * ลบข้อมูล
 */
const fetchDataDelete = async () => {
  loaderPage(true);
  await http
    .delete(config.API.profileSalaryId(id.value))
    .then((res) => {
      success($q, "ลบข้อมูลสำเร็จ");
      modal.value = false;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      await fetchData();
    });
};

/**
 *  dialog ลบข้อมูล
 */
const clickDelete = async () => {
  dialogMessage(
    $q,
    "ลบข้อมูล",
    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
    "delete",
    "ยืนยัน",
    "red",
    async () => await fetchDataDelete(),
    async () => await fetchData(),
    false
  );
};

/**
 * กดปิด dialog
 */
const clickClose = async () => {
  if (editRow.value == true) {
    dialogMessage(
      $q,
      "ข้อมูลมีการแก้ไข",
      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
      "info",
      "ยืนยัน",
      "primary",
      async () => {
        modal.value = false;
        next.value = false;
        previous.value = false;
      },
      undefined,
      false
    );
  } else {
    modal.value = false;
    next.value = false;
    previous.value = false;
  }
};

/**
 * กดเลือกข้อมูลที่จะแก้ไข
 * @param props ค่า props ใน row ที่เลือก
 */
const selectData = async (props: DataPropsEmployee) => {
  //   console.log(props.row);
  modalEdit.value = true;
  modal.value = true;
  edit.value = false;
  rawItem.value = props.row;
  rowIndex.value = props.rowIndex;
  date.value = props.row.date;
  amount.value = props.row.amount;
  positionSalaryAmount.value = props.row.positionSalaryAmount;
  mouthSalaryAmount.value = props.row.mouthSalaryAmount;

  posNoId.value = props.row.posNoId ?? "";
  posNoEmployee.value = props.row.posNoEmployee ?? "";
  employeePositionId.value = props.row.positionEmployeePositionId ?? "";
  employeePositionSideId.value = props.row.positionEmployeePositionSideId ?? "";
  employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
  employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
  agencyId.value = props.row.ocId ?? "";

  //   refSelected.value = props.row
  salaryClass.value = props.row.salaryClass ?? "";
  salaryRef.value = props.row.salaryRef ?? "";
  id.value = props.row.id;
  await fetchPositionNumber(props.row.ocId ?? "");
  await checkRowPage();
};

/**
 * กดปุ่มเพิ่มบน table
 */
const addData = () => {
  modalEdit.value = false;
  modal.value = true;
  edit.value = true;
  date.value = new Date();
  amount.value = null;
  positionSalaryAmount.value = null;
  mouthSalaryAmount.value = null;

  posNoId.value = "";
  posNoEmployee.value = "";
  employeePositionId.value = "";
  employeePositionSideId.value = "";
  employeeLevelId.value = "";
  employeeGroupId.value = "";
  agencyId.value = "";
  agencyOptions.value = [];

  salaryClass.value = "";
  refSelected.value = null;
  salaryRef.value = "";
};

/**
 * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
 */
const clickCancel = async () => {
  if (editRow.value == true) {
    dialogMessage(
      $q,
      "ข้อมูลมีการแก้ไข",
      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
      "info",
      "ยืนยัน",
      "primary",
      async () => {
        edit.value = false;
        await checkRowPage();
        await getData();
      },
      undefined,
      false
    );
  } else {
    edit.value = false;
    await checkRowPage();
  }
};

/**
 * เช็คว่ามีการแก้ไขข้อมูล
 */
const clickEditRow = () => {
  editRow.value = true;
};

/**
 * เช็คว่ามีการแก้ไขข้อมูล
 */
const clickEditRowRef = () => {
  editRow.value = true;
  salaryRef.value = refSelected.value?.name;
};

/**
 * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
 * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
 */
const clickHistory = async (row: RequestItemsEmployee) => {
  modalHistory.value = true;
  loaderPage(true);
  await http
    .get(config.API.profileSalaryHisId(row.id))
    .then((res) => {
      const data = res.data.result;
      //   console.log("clickHistory", data);
      rowsHistory.value = [];
      data.map((e: ResponseObjectEmployee) => {
        rowsHistory.value.push({
          id: e.id,
          date: new Date(e.date),
          amount: e.amount,
          positionSalaryAmount: e.positionSalaryAmount,
          mouthSalaryAmount: e.mouthSalaryAmount,
          oc: e.oc,
          ocId: e.ocId,
          posNo: e.posNo,
          posNoId: e.posNoId,
          posNoEmployee: e.posNoEmployee,
          positionEmployeeGroup: e.positionEmployeeGroup,
          positionEmployeeGroupId: e.positionEmployeeGroupId,
          positionEmployeeLevel: e.positionEmployeeLevel,
          positionEmployeeLevelId: e.positionEmployeeLevelId,
          positionEmployeePosition: e.positionEmployeePosition,
          positionEmployeePositionId: e.positionEmployeePositionId,
          positionEmployeePositionSide: e.positionEmployeePositionSide,
          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
          salaryClass: e.salaryClass,
          salaryRef: e.salaryRef,
          createdFullName: e.createdFullName,
          createdAt: new Date(e.createdAt),
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

/**
 * 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>
<style lang="scss">
.modalfix {
  position: fixed !important;
}
</style>