<!-- 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 auto-width>
              <q-btn
                dense
                size="12px"
                flat
                round
                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
                :disable="props.rowIndex + 1 == 1"
                @click="onClicksortPos(props)"
                icon="mdi-arrow-up-bold"
              >
                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
              </q-btn>
            </q-td>
            <q-td auto-width>
              <q-btn
                dense
                size="12px"
                flat
                round
                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
                :disable="rows.length == props.rowIndex + 1"
                @click="onClicksortPos(props, false)"
                icon="mdi-arrow-down-bold"
              >
                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
              </q-btn>
            </q-td>
            <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="
                  props.row.salaryStatus !== 'DEATH' &&
                  (col.name == 'positionSalaryAmount' ||
                    col.name == 'mouthSalaryAmount' ||
                    col.name == 'amount')
                "
                class="table_ellipsis"
              >
                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
              </div>
              <div
                v-else-if="
                  props.row.salaryStatus === 'DEATH' && col.name == 'position'
                "
                class="table_ellipsis"
              >
                ถึงแก่กรรม
              </div>
              <div
                v-else-if="
                  props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'
                "
                class="table_ellipsis"
              >
                -
              </div>
              <div v-else class="table_ellipsis">
                {{ col.value ? 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-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
              </q-btn>
            </q-td>
          </q-tr>
        </template>
      </ProfileTable>
    </q-form>
  </q-card>
  <!-- popup Edit window-->
  <q-dialog v-model="modal" persistent full-width>
    <q-card>
      <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">
            <div class="col-xs-12 col-sm-12">
              <q-card flat bordered class="fit q-pa-sm">
                <q-scroll-area visible style="height: 70vh">
                  <div class="row col-12 q-col-gutter-xs">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <q-input
                        v-if="edit"
                        outlined
                        v-model="inputDate"
                        label="วัน/เดือน/ปี"
                        mask="##/##/####"
                        dense
                        :error="dayChecked"
                        error-message="กรุณากรอก วัน/เดือน/ปี"
                        :rules="[
                          (val) => !!val || `${'กรุณากรอก วัน/เดือน/ปี'}`,
                        ]"
                      />
                      <datepicker
                        v-else
                        menu-class-name="modalfix"
                        :readonly="!edit"
                        v-model="formDataSalary.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
                            ref="dateRef"
                            :class="getClass(edit)"
                            :outlined="edit"
                            dense
                            lazy-rules
                            :borderless="!edit"
                            :model-value="date2Thai(formDataSalary.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">
                      <q-input
                        ref="posNoRef"
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="formDataSalary.posNo"
                        hide-bottom-space
                        :label="`${'เลขที่ตำแหน่ง'}`"
                        :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
                        @update:modelValue="clickEditRow"
                      >
                      </q-input>
                    </div>

                    <div class="row col-xs-12 col-sm-12 col-md-12">
                      <q-select
                        ref="templatePosRef"
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="formDataSalary.templatePos"
                        :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
                        @update:modelValue="updatePos"
                        option-label="name"
                        :options="opPos"
                        option-value="name"
                        hide-bottom-space
                        emit-value
                        use-input
                        input-debounce="0"
                        @filter="(inputValue: any,
                          doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
                          )"
                      />
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                      <q-input
                        ref="positionRef"
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="formDataSalary.position"
                        :label="`${'ตำแหน่ง'}`"
                        @update:modelValue="clickEditRow"
                        type="textarea"
                        hide-bottom-space
                        :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                      />
                    </div>

                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <q-select
                        ref="typePositionRef"
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="formDataSalary.typePosition"
                        :label="`${'ตำแหน่งประเภท'}`"
                        emit-value
                        map-options
                        option-label="name"
                        :options="opType"
                        option-value="name"
                        hide-bottom-space
                        use-input
                        input-debounce="0"
                        @filter="(inputValue: any,
                          doneFn: Function) => filterSelector(inputValue, doneFn, 'typepos'
                          )"
                      />
                    </div>

                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <q-select
                        ref="levelPositionRef"
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="formDataSalary.levelPosition"
                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ หรือหากกรอกเอง กรุณากด enter'}`]"
                        :label="`${'ระดับ'}`"
                        @update:modelValue="clickEditRow"
                        emit-value
                        map-options
                        option-label="name"
                        :options="opLevel"
                        @input-value="inputPositionLevel"
                        @new-value="createValue"
                        @blur.stop="inputPositionLevelBlur"
                        option-value="name"
                        hide-bottom-space
                        use-input
                        input-debounce="0"
                        @filter="(inputValue: any,
                          doneFn: Function) => filterSelector(inputValue, doneFn, 'levelpos'
                          )"
                      />
                    </div>

                    <div class="col-xs-6 col-sm- col-md-6">
                      <CurrencyInput
                        lazy-rules
                        v-model="formDataSalary.salary"
                        :edit="edit"
                        :options="{
                          currency: 'THB',
                        }"
                        :label="`${'เงินเดือน'}`"
                        :rules="[(val: number) => !!val  || `${'กรุณากรอกเงินเดือน'}`]"
                      />
                    </div>

                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <CurrencyInput
                        lazy-rules
                        v-model="formDataSalary.salaryPos"
                        :edit="edit"
                        :options="{
                          currency: 'THB',
                        }"
                        :label="`${'เงินประจำตำแหน่ง'}`"
                      />
                    </div>

                    <div class="row col-xs-12 col-sm-12 col-md-12">
                      <q-select
                        ref="templateDocRef"
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="formDataSalary.templateDoc"
                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
                        @update:modelValue="clickEditRowRef"
                        option-label="name"
                        :options="opDoc"
                        option-value="name"
                        emit-value
                        hide-bottom-space
                        use-input
                        input-debounce="0"
                        @filter="(inputValue: any,
                          doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
                          )"
                      />
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                      <q-input
                        ref="docRef"
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="formDataSalary.doc"
                        :label="`${'เอกสารอ้างอิง'}`"
                        @update:modelValue="clickEditRow"
                        type="textarea"
                        hide-bottom-space
                        :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
                      />
                    </div>
                  </div>
                </q-scroll-area>
              </q-card>
            </div>
          </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"
          :coppy="coppyForm"
          :name="'salary'"
        />
      </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, reactive } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";

import CurrencyInput from "@/components/CurruncyInput.vue";
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 {
  RequestItemsObject,
  DataProps,
  RequestItemsHistory,
} from "@/modules/04_registry/interface/request/Salary";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Salary";
import type {
  DataOption,
  treeTab,
  OptionType,
  OptionLevel,
  FormSalaryNew,
  FormSalaryNewRef,
} 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";

import { useSalaryDataStore } from "@/modules/04_registry/stores/salary";

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

const $q = useQuasar();
const store = useProfileDataStore();
const optionStore = useSalaryDataStore();
const { profileData, changeProfileColumns } = store;

const mixin = useCounterMixin();
const {
  date2Thai,
  success,
  dateToISO,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
  convertDate,
  convertDateDisplay,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const date = ref<Date>(new Date());
const amount = ref<number | undefined>(0);
// const salary = ref<number | null>(null);
const positionSalaryAmount = ref<number | undefined>(0);
const mouthSalaryAmount = ref<number | undefined>(0);
const ocId = ref<string>();

// เพิ่มฟิลด์ใหม่
const orgName = ref<string>();
const agencyName = ref<string>();
const cLevel = ref<string>();

const levelOpsMain = ref<DataOption[]>([]);
const typeOpsMain = ref<DataOption[]>([]);
const dataLevel = ref<any>();
const positionName = ref<string>();
const positionLineName = ref<string>();
const positionPathSideName = ref<string>();
const positionTypeId = ref<string>();
const positionLevelId = ref<string>();
const positionExecutiveName = ref<string>();
const positionExecutiveSideId = ref<string>();
const posNoId = ref<string>();
const posNo = ref<string>();
const refCommandNo = ref<string>();
const refCommandDate = ref<Date>(new Date());
const ocOptions = ref<DataOption[]>([]);
const positionOptions = ref<DataOption[]>([]);
const positionLineOptions = ref<DataOption[]>([]);
const positionSideOptions = ref<DataOption[]>([]);
const positionTypeOptions = ref<DataOption[]>([]);
const positionLevelOptions = ref<DataOption[]>([]);
const positionExecutiveOptions = ref<DataOption[]>([]);
const positionExecutiveSideOptions = ref<DataOption[]>([]);
const posNoOptions = ref<DataOption[]>([]);
const ocOptionsFilter = ref<DataOption[]>([]);
const positionOptionsFilter = ref<DataOption[]>([]);
const positionLineOptionsFilter = ref<DataOption[]>([]);
const positionSideOptionsFilter = ref<DataOption[]>([]);
const positionTypeOptionsFilter = ref<DataOption[]>([]);
const positionLevelOptionsFilter = ref<DataOption[]>([]);
const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
const posNoOptionsFilter = ref<DataOption[]>([]);
const search = ref<string>("");
const expanded = ref<string[]>([]);
const selected = ref<string>("");
const nodesTree = ref<treeTab[]>([]);
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: "21",
    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<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsHistory[]>([]); //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 ? route.params.id.toString() : ""
);
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.salary.columns.length == 0
  ? (visibleColumns.value = [
      "date",
      "amount",
      "positionSalaryAmount",
      "mouthSalaryAmount",
      "oc",
      "position",
      "posNo",
      "positionLine",
      "positionPathSide",
      "postionTypeName",
      "positionLevelName",
      "positionExecutive",
      // "positionExecutiveSide",
      // "salaryClass",
      "salaryRef",
      "refCommandNo",
    ])
  : (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: "orgName",
    align: "left",
    label: "หน่วยงาน",
    sortable: true,
    field: "orgName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "agencyName",
    align: "left",
    label: "ส่วนราชการ",
    sortable: true,
    field: "agencyName",
    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: "positionLine",
  //     align: "left",
  //     label: "สายงาน",
  //     sortable: true,
  //     field: "positionLine",
  //     headerStyle: "font-size: 14px",
  //     style: "font-size: 14px",
  //     sort: (a: string, b: string) =>
  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  //   },
  //   {
  //     name: "positionPathSide",
  //     align: "left",
  //     label: "ด้าน/สาขา",
  //     sortable: true,
  //     field: "positionPathSide",
  //     headerStyle: "font-size: 14px",
  //     style: "font-size: 14px",
  //     sort: (a: string, b: string) =>
  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  //   },
  {
    name: "postionTypeName",
    align: "left",
    label: "ตำแหน่งประเภท",
    sortable: true,
    field: "postionTypeName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionLevelName",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "positionLevelName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  //   {
  //     name: "positionExecutive",
  //     align: "left",
  //     label: "ตำแหน่งทางการบริหาร",
  //     sortable: true,
  //     field: "positionExecutive",
  //     headerStyle: "font-size: 14px",
  //     style: "font-size: 14px",
  //     sort: (a: string, b: string) =>
  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  //   },
  // {
  //   name: "positionExecutiveSide",
  //   align: "left",
  //   label: "ด้านทางการบริหาร",
  //   sortable: true,
  //   field: "positionExecutiveSide",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  //   sort: (a: string, b: string) =>
  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  // },
  // {
  //   name: "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: "refCommandNo",
    align: "left",
    label: "เลขที่คำสั่ง",
    sortable: true,
    field: "refCommandNo",
    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: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "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: "positionLine",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionLine",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionPathSide",
    align: "left",
    label: "ด้าน/สาขา",
    sortable: true,
    field: "positionPathSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionType",
    align: "left",
    label: "ตำแหน่งประเภท",
    sortable: true,
    field: "positionType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionLevel",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "positionLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionExecutive",
    align: "left",
    label: "ตำแหน่งทางการบริหาร",
    sortable: true,
    field: "positionExecutive",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionExecutiveSide",
    align: "left",
    label: "ด้านทางการบริหาร",
    sortable: true,
    field: "positionExecutiveSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "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: "refCommandNo",
    align: "left",
    label: "เลขที่คำสั่ง",
    sortable: true,
    field: "refCommandNo",
    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",
  "orgName",
  "agencyName",
  "posNo",
  "positionLine",
  "positionPathSide",
  "positionType",
  "positionLevel",
  "positionExecutive",
  "positionExecutiveSide",
  "salaryClass",
  "salaryRef",
  "refCommandNo",
  "createdFullName",
  "createdAt",
]);
const inputDate = ref<string>("");
const dayChecked = ref<boolean>(false);
watch(
  () => inputDate.value,
  (value: string) => {
    if (value.length === 10) {
      const dateVal = convertDate(value);
      if (dateVal.isValid) {
        dayChecked.value = false;
        formDataSalary.date = new Date(dateVal.value);
      } else {
        dayChecked.value = true;
        inputDate.value = "";
      }
    }
  }
);
/****************************************** FormDataNew **********************************************/
const formDataSalary = reactive<FormSalaryNew>({
  date: new Date(),
  posNo: "",
  templatePos: "",
  position: "",
  typePosition: "",
  levelPosition: "",
  salary: 0,
  salaryPos: 0,
  templateDoc: "",
  doc: "",
});

const tempPositionLevelInput = ref("");

function inputPositionLevel(v: string) {
  if (!!v) tempPositionLevelInput.value = v;
}

function inputPositionLevelBlur() {
  if (
    !tempPositionLevelInput.value ||
    tempPositionLevelInput.value === formDataSalary.levelPosition
  ) {
    tempPositionLevelInput.value = "";
    return;
  }

  if (
    !optionStore.optipnLevel.some(
      (v) => v.name === tempPositionLevelInput.value
    )
  ) {
    createValue(tempPositionLevelInput.value);
  }

  formDataSalary.levelPosition = tempPositionLevelInput.value;
  tempPositionLevelInput.value = "";
}

const opPos = ref<any>([]);
const opType = ref<any>([]);
const opLevel = ref<any>([]);
const opDoc = ref<any>([]);

/** formRef */
const dateRef = ref<object | null>(null);
const posNoRef = ref<object | null>(null);
const templatePosRef = ref<object | null>(null);
const positionRef = ref<object | null>(null);
const levelPositionRef = ref<object | null>(null);
const salaryNewRef = ref<object | null>(null);
const templateDocRef = ref<object | null>(null);
const docRef = ref<object | null>(null);

const formDataSalaryRef: FormSalaryNewRef = {
  date: dateRef,
  posNo: posNoRef,
  templatePos: templatePosRef,
  position: positionRef,
  levelPosition: levelPositionRef,
  salary: salaryNewRef,
  templateDoc: templateDocRef,
  doc: docRef,
};

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

onMounted(async () => {
  // await fetchPosition();
  // await getPosition();
  // await nodeTree();
  await fetchData();
});

const filterSelector = (val: any, update: Function, filtername: string) => {
  switch (filtername) {
    case "1":
      update(() => {
        posNoOptions.value = posNoOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "2":
      update(() => {
        positionOptions.value = positionOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "3":
      update(() => {
        positionSideOptions.value = positionSideOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "4":
      update(() => {
        positionTypeOptions.value = positionTypeOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "5":
      update(() => {
        positionLineOptions.value = positionLineOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "6":
      update(() => {
        positionLevelOptions.value = positionLevelOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "7":
      update(() => {
        positionExecutiveOptions.value =
          positionExecutiveOptionsFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "8":
      update(() => {
        refOptions.value = refOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "pos":
      update(() => {
        opPos.value = optionStore.optionPos.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "typepos":
      update(() => {
        opType.value = optionStore.optiontype.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "levelpos":
      update(() => {
        opLevel.value = optionStore.optipnLevel.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "doc":
      update(() => {
        opDoc.value = optionStore.optionDoc.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
};

const fetchData = async () => {
  if (profileId.value) {
    showLoader();
    await http
      .get(config.API.profileSalaryId(profileId.value))
      .then((res) => {
        let data = res.data.result;
        console.log(data);

        rows.value = [];
        data.map((e: any) => {
          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,
            position: e.position ?? "-",
            positionName: e.positionName ?? "-",
            positionId:
              e.positionId !== "00000000-0000-0000-0000-000000000000"
                ? e.positionId
                : "",
            posNo: e.posNo ?? "-",
            posNoId:
              e.posNoId !== "00000000-0000-0000-0000-000000000000"
                ? e.posNoId
                : "",
            positionLine: e.positionLine ?? "-",
            positionLineName: e.positionLineName ?? "-",
            positionLineId: e.positionLineId ?? "-",
            positionPathSide: e.positionPathSide ?? "-",
            positionPathSideId: e.positionPathSideId ?? "-",
            positionPathSideName: e.positionPathSideName ?? "-",
            positionType: e.positionType ?? "-",
            positionTypeId: e.positionTypeId ?? "-",
            positionLevelId: e.positionLevelId ?? "-",
            positionLevel: e.positionLevel ?? "-",
            positionExecutive: e.positionExecutive ?? "-",
            positionExecutiveId: e.positionExecutiveId ?? "-",
            positionExecutiveName: e.positionExecutiveName ?? "-",
            positionExecutiveSide: e.positionExecutiveSide ?? "-",
            positionExecutiveSideId: e.positionExecutiveSideId ?? "-",
            salaryClass: e.salaryClass ?? "-",
            salaryRef: e.salaryRef ?? "-",
            salaryStatus: e.salaryStatus ?? "-",
            refCommandNo: e.refCommandNo ?? "-",
            createdFullName: e.createdFullName ?? "-",
            orgName: e.orgName ?? "-",
            agencyName: e.agencyName ?? "-",
            cLevel: e.cLevel ?? "-",
            createdAt: new Date(e.createdAt),
            postionTypeName: e.postionTypeName ?? "-",
            positionLevelName: e.positionLevelName ?? "-",
          });
        });
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        store.isLoad++;
      });
  }
};

/**
 * กดดูข้อมูลก่อนหน้า
 */
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;
  // // await onSelected(row.ocId);
  // selected.value = row.ocId;
  // positionName.value = row.positionName;
  // posNoId.value = row.posNoId;
  // posNo.value = row.posNo;
  // positionLineName.value = row.positionLineName;
  // positionPathSideName.value = row.positionPathSideName;
  // positionTypeId.value = row.positionTypeId;
  // positionLevelId.value = row.positionLevelId;
  // positionExecutiveName.value = row.positionExecutiveName;
  // positionExecutiveSideId.value = row.positionExecutiveSideId;
  // salaryClass.value = row.salaryClass;
  // salaryRef.value = row.salaryRef;
  // refCommandNo.value = row.refCommandNo;
  id.value = row.id;

  formDataSalary.date = row.date;
  formDataSalary.posNo = row.posNo ?? "-";
  formDataSalary.templatePos = "";
  formDataSalary.position = row.positionName ?? "";
  formDataSalary.typePosition = row.postionTypeName ?? "-";
  formDataSalary.levelPosition = row.positionLevelName ?? "-";
  formDataSalary.salary = row.amount ?? 0;
  formDataSalary.salaryPos = row.positionSalaryAmount ?? 0;
  formDataSalary.templateDoc = "";
  formDataSalary.doc = row.salaryRef ?? "";

  // await fetchPositionNumber(row.ocId);
};

/**
 * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
 */
const checkRowPage = () => {
  editRow.value = false;
  next.value = true;
  previous.value = true;
  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();
};

/**
 * กดบันทึกใน dialog
 */
const clickSave = async () => {
  myForm.value.validate().then(async (result: boolean) => {
    if (result) {
      if (modalEdit.value) {
        dialogConfirm(
          $q,
          async () => {
            await editData();
          },
          "ยืนยันการแก้ไขข้อมูล",
          "ต้องการยืนยันการแก้ไขข้อมูลนี้หรือไม่ ?"
        );
      } else {
        dialogConfirm(
          $q,
          async () => {
            await saveData();
          },
          "ยืนยันการเพิ่มข้อมูล",
          "ต้องการยืนยันการเพิ่มข้อมูลนี้หรือไม่ ?"
        );
      }
    }
  });
};

/**
 * บันทึกเพิ่มข้อมูล
 */
const saveData = async () => {
  if (profileId.value) {
    showLoader();
    await http
      .post(config.API.profileSalaryId(profileId.value), {
        date: dateToISO(formDataSalary.date),
        posNo: formDataSalary.posNo,
        positionName: formDataSalary.position,
        positionTypeName: formDataSalary.typePosition,
        positionLevelName: formDataSalary.levelPosition,
        amount: formDataSalary.salary,
        positionSalaryAmount: formDataSalary.salaryPos,
        salaryRef: formDataSalary.doc,
      })
      .then(() => {
        success($q, "บันทึกข้อมูลสำเร็จ");
        modal.value = false;
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(async () => {
        await fetchData();
      });
  }
};

/**
 * บันทึกแก้ไขข้อมูล
 */
const editData = async () => {
  showLoader();
  await http
    .put(config.API.profileSalaryId(id.value), {
      date: dateToISO(formDataSalary.date),
      posNo: formDataSalary.posNo,
      positionName: formDataSalary.position,
      positionTypeName: formDataSalary.typePosition,
      positionLevelName: formDataSalary.levelPosition,
      amount: formDataSalary.salary,
      positionSalaryAmount: formDataSalary.salaryPos,
      salaryRef: formDataSalary.doc,
    })
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
      modal.value = false;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      await fetchData();
    });
};

/**
 * ลบลบข้อมูล
 */
const clickDelete = async () => {
  $q.dialog({
    title: `ลบข้อมูล`,
    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
    cancel: "ยกเลิก",
    ok: "ยืนยัน",
    persistent: true,
  })
    .onOk(async () => {
      showLoader();
      await http
        .delete(config.API.profileSalaryId(id.value))
        .then((res) => {
          success($q, "ลบข้อมูลสำเร็จ");
          modal.value = false;
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(async () => {
          await fetchData();
        });
    })
    .onCancel(async () => {
      await fetchData();
    });
};

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

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

  // date.value = props.row.date;
  // amount.value = props.row.amount;
  // positionSalaryAmount.value = props.row.positionSalaryAmount;
  // mouthSalaryAmount.value = props.row.mouthSalaryAmount;
  //   await onSelected(props.row.ocId);
  // selected.value = props.row.ocId;
  // positionName.value = props.row.positionName;
  // posNoId.value = props.row.posNoId;
  // posNo.value = props.row.posNo;
  // positionLineName.value = props.row.positionLineName;
  // positionPathSideName.value = props.row.positionPathSideName;
  // positionTypeId.value = props.row.positionTypeId;
  // positionLevelId.value = props.row.positionLevelId;
  // positionExecutiveName.value = props.row.positionExecutiveName;
  // positionExecutiveSideId.value = props.row.positionExecutiveSideId;
  // salaryClass.value = props.row.salaryClass;
  // salaryRef.value = props.row.salaryRef;
  // refCommandNo.value = props.row.refCommandNo;
  // orgName.value = props.row.orgName;
  // agencyName.value = props.row.agencyName;
  // cLevel.value = props.row.cLevel;
  inputDate.value = convertDateDisplay(props.row.date);
  formDataSalary.date = props.row.date;
  formDataSalary.posNo = props.row.posNo ?? "-";
  formDataSalary.templatePos = "";
  formDataSalary.position = props.row.positionName ?? "-";
  formDataSalary.typePosition = props.row.postionTypeName ?? "-";
  formDataSalary.levelPosition = props.row.positionLevelName ?? "-";
  formDataSalary.salary = props.row.amount ?? 0;
  formDataSalary.salaryPos = props.row.positionSalaryAmount ?? 0;
  formDataSalary.templateDoc = "";
  formDataSalary.doc = props.row.salaryRef ?? "-";
  await checkRowPage();
};

/**
 * กดปุ่มเพิ่มบน table
 */
const addData = () => {
  inputDate.value = "";
  selected.value = "";
  modalEdit.value = false;
  modal.value = true;
  edit.value = true;

  // เพิ่มใหม่
  orgName.value = "";
  agencyName.value = "";
  cLevel.value = "";

  date.value = new Date();
  amount.value = undefined;
  positionSalaryAmount.value = undefined;
  mouthSalaryAmount.value = undefined;
  ocId.value = "";
  positionName.value = "";
  posNoId.value = "";
  posNo.value = "";
  positionLineName.value = "";
  positionPathSideName.value = "";
  positionTypeId.value = "";
  positionLevelId.value = "";
  positionExecutiveName.value = "";
  positionExecutiveSideId.value = "";
  salaryClass.value = "";
  refSelected.value = null;
  salaryRef.value = "";
  refCommandNo.value = "";

  formDataSalary.date = new Date();
  formDataSalary.posNo = "";
  formDataSalary.templatePos = "";
  formDataSalary.position = "";
  formDataSalary.typePosition = "";
  formDataSalary.levelPosition = "";
  formDataSalary.salary = 0;
  formDataSalary.salaryPos = 0;
  formDataSalary.templateDoc = "";
  formDataSalary.doc = "";
};

/**
 * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
 */
const clickCancel = async () => {
  if (editRow.value == true) {
    $q.dialog({
      title: `ข้อมูลมีการแก้ไข`,
      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
      cancel: "ยกเลิก",
      ok: "ยืนยัน",
      persistent: true,
    }).onOk(async () => {
      edit.value = false;
      await checkRowPage();
      await getData();
    });
  } else {
    edit.value = false;
    await checkRowPage();
  }
};

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

function updateSelectType(val: string) {
  editRow.value = true;

  let optionPositionLevels: DataOption[] = [];

  const listLevel = dataLevel.value.find((e: any) => e.id === val);
  levelOpsMain.value = listLevel.posLevels.map((r: any) => {
    optionPositionLevels.push({
      id: r.id.toString(),
      name: r.posLevelName.toString(),
    });
  });

  positionLevelOptions.value = optionPositionLevels;
  positionLevelOptionsFilter.value = optionPositionLevels;
  positionLevelId.value = "";
}

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

/**
 * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
 * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
 */
const clickHistory = async (row: RequestItemsObject) => {
  modalHistory.value = true;
  filterHistory.value = "";
  showLoader();
  await http
    .get(config.API.profileSalaryHisId(row.id))
    .then((res) => {
      let data = res.data.result;
      rowsHistory.value = [];
      data.map((e: any) => {
        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,
          position: e.position ?? "_",
          positionId: e.positionId,
          positionName: e.positionName ?? "_",
          posNo: e.posNo ?? "_",
          posNoId: e.posNoId,
          positionLine: e.positionLine ?? "_",
          positionLineName: e.positionLineName ?? "_",
          positionLineId: e.positionLineId ?? "_",
          positionPathSide: e.positionPathSide ?? "_",
          positionPathSideId: e.positionPathSideId ?? "_",
          positionPathSideName: e.positionPathSideName ?? "_",
          positionType: e.positionType ?? "_",
          positionTypeId: e.positionTypeId ?? "_",
          positionLevel: e.positionLevel ?? "_",
          positionLevelId: e.positionLevelId ?? "_",
          positionExecutive: e.positionExecutive ?? "_",
          positionExecutiveId: e.positionExecutiveId ?? "_",
          positionExecutiveName: e.positionExecutiveName ?? "_",
          positionExecutiveSide: e.positionExecutiveSide ?? "_",
          positionExecutiveSideId: e.positionExecutiveSideId ?? "_",
          salaryClass: e.salaryClass ?? "_",
          salaryStatus: e.salaryStatus ?? "_",
          salaryRef: e.salaryRef ?? "_",
          refCommandNo: e.refCommandNo ?? "_",
          createdFullName: e.createdFullName ?? "_",
          orgName: e.orgName ?? "_",
          agencyName: e.agencyName ?? "_",
          cLevel: e.cLevel ?? "_",
          createdAt: new Date(e.createdAt),
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

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

  const hasError = [];
  checkValidate.value = true;
  for (const key in formDataSalaryRef) {
    if (Object.prototype.hasOwnProperty.call(formDataSalaryRef, key)) {
      const property = formDataSalaryRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    formDataSalary.salary === 0 ? (formDataSalary.salary = undefined) : null;
    checkValidate.value = false;
  }
};

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

function getPosition() {
  http
    .get(config.API.orgSalaryPosition)
    .then((res) => {
      const dataOp = res.data.result;
      const dataLineOp = res.data.result;

      let optionpositionpaths: DataOption[] = [];
      let optionPositionLines: DataOption[] = [];

      const usedIds = new Set();
      const usedIdsLine = new Set();

      dataOp.forEach((r: any) => {
        const id = r.positionName.toString();
        const name = r.positionName.toString();

        if (!usedIds.has(id)) {
          optionpositionpaths.push({
            id: id,
            name: name,
          });

          usedIds.add(id);
        }
      });

      dataLineOp.forEach((r: any) => {
        const id = r.positionField.toString();
        const name = r.positionField.toString();

        if (!usedIdsLine.has(id)) {
          optionPositionLines.push({
            id: id,
            name: name,
          });

          usedIdsLine.add(id);
        }
      });

      positionOptions.value = optionpositionpaths;
      positionOptionsFilter.value = optionpositionpaths;

      positionLineOptions.value = optionPositionLines;
      positionLineOptionsFilter.value = optionPositionLines;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      store.isLoad++;
    });
}

async function fetchType() {
  showLoader();
  await http
    .get(config.API.orgPosType)
    .then((res) => {
      dataLevel.value = res.data.result;

      let optionPositionTypes: DataOption[] = [];

      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
      positionTypeOptions.value = typeOpsMain.value;

      res.data.result.map((r: any) => {
        optionPositionTypes.push({
          id: r.id.toString(),
          name: r.posTypeName.toString(),
        });
      });
      positionTypeOptions.value = optionPositionTypes;
      positionTypeOptionsFilter.value = optionPositionTypes;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      if (positionTypeId.value) {
        let optionPositionLevels: DataOption[] = [];

        const listLevel = dataLevel.value.find(
          (e: any) => e.id === positionTypeId.value
        );
        levelOpsMain.value = listLevel.posLevels.map((r: any) => {
          optionPositionLevels.push({
            id: r.id.toString(),
            name: r.posLevelName.toString(),
          });
        });

        positionLevelOptions.value = optionPositionLevels;
        positionLevelOptionsFilter.value = optionPositionLevels;
      }
    });
}
watch(
  () => modal.value,
  () => {
    if (modal.value == true) {
      positionTypeOptions.value = [];
      positionLevelOptions.value = [];
      positionLevelOptionsFilter.value = [];
      fetchType();
    }
  }
);

/**
 *  function จัดตำแหน่งเงินเดือน
 * @param value ข้อมูล row
 * @param up สถานะขึ้นลง
 */
async function onClicksortPos(value: any, up: boolean = true) {
  if (up) {
    await swapSalary("up", value.row.id);
  } else {
    await swapSalary("down", value.row.id);
  }
}

/** ปรับรายการเงินเดือนขึ้น */
async function swapSalary(dierction: string, id: string) {
  await http
    .post(config.API.salarySwap(dierction, id))
    .then(() => {
      fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

function updatePos(val: string) {
  editRow.value = true;
  formDataSalary.position = val;
}

function coppyForm() {
  selected.value = "";
  modalEdit.value = false;
  modal.value = true;
  edit.value = true;

  formDataSalary.date = formDataSalary.date;
  formDataSalary.posNo = formDataSalary.posNo;
  formDataSalary.templatePos = formDataSalary.templatePos;
  formDataSalary.position = formDataSalary.position;
  formDataSalary.typePosition = formDataSalary.typePosition;
  formDataSalary.levelPosition = formDataSalary.levelPosition;
  formDataSalary.salary = formDataSalary.salary;
  formDataSalary.salaryPos = formDataSalary.salaryPos;
  formDataSalary.templateDoc = formDataSalary.templateDoc;
  formDataSalary.doc = formDataSalary.doc;
}

function createValue(val: any, done?: any) {
  if (val.length > 0) {
    const maxId = optionStore.optipnLevel.reduce((max: any, item: any) => {
      const itemId = typeof item.id === "number" ? item.id : parseInt(item.id);
      return itemId > max ? itemId : max;
    }, 0);
    const newId = isNaN(maxId) ? 1 : maxId + 1;
    const newObj = {
      id: typeof val === "number" ? val : newId,
      name: val,
    };
    if (!optionStore.optipnLevel.some((item: any) => item.id === newObj.id)) {
      optionStore.optipnLevel.push(newObj);
    }

    done?.(newObj, "toggle");
  }
}
</script>
<style lang="scss">
.modalfix {
  position: fixed !important;
}
</style>
