<!-- =============================== -->
<!-- page:update add page จัดการบัญชี 2 -->
<!-- =============================== -->
<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="clickBack"
    />
    <label
      >บัญชีจัดข้าราชการกรุงเทพมหานครสามัญเข้าตำแหน่งประเภท สายงาน
      และระดับตำแหน่ง</label
    >
  </div>
  <q-card flat bordered class="col-12 q-my-sm q-pt-sm">
    <q-form ref="myForm">
      <div class="q-pa-md row col-12 q-col-gutter-sm">
        <q-input
          v-model="myData.name"
          label="ชื่อ-สกุล"
          class="col-xs-12 col-sm-6"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />
        <q-input
          v-model="myData.edu"
          label="คุณวุฒิ"
          class="col-xs-12 col-sm-6"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />
        <q-input
          v-model="myData.salary"
          label="เงินเดือน"
          class="col-xs-12 col-sm-4"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />
        <q-input
          v-model="myData.salary2"
          label="เงินประจำตำแหน่ง"
          class="col-xs-12 col-sm-4"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />
        <q-input
          v-model="myData.salary3"
          label="เงินตอบแทนรายเดือน"
          class="col-xs-12 col-sm-4"
          hide-bottom-space
          :outlined="true"
          dense
          lazy-rules
          :readonly="true"
          :borderless="true"
        />
        <!-- <q-card bordered class="col-12 row q-pa-sm">
            <div class="col-12">
              <span class="text-grey-6 q-pr-sm">คุณวุฒิ :</span>
              พยาบาลศาสตรบัณฑิต สาธารณสุขศาสตรบัณฑิต
            </div>
            <span class="text-grey-6 q-pr-sm">เงินเดือน : </span>61,580
            <span class="text-grey-6 q-pr-sm q-pl-lg">เงินประจำตำแหน่ง : </span
            >5,600
            <span class="text-grey-6 q-pr-sm q-pl-lg"
              >เงินตอบแทนรายเดือน : </span
            >5,600
          </q-card> -->
        <div class="row col-12 q-col-gutter-x-sm">
          <div class="col-xs-12 col-sm-6">
            <q-card bordered flat>
              <div
                class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
              >
                กำหนดเดิม
              </div>
              <q-separator />

              <div class="col-12 row q-pa-sm q-col-gutter-xs">
                <q-select
                  class="col-xs-12 col-sm-6"
                  v-model="myData.goverment"
                  label="รหัสส่วนราชการ"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="govermentOP"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="true"
                  :borderless="true"
                  :outlined="false"
                  :hide-dropdown-icon="true"
                />

                <q-select
                  class="col-xs-12 col-sm-6"
                  dense
                  v-model="myData.agency"
                  label="ชื่อหน่วยงาน"
                  emit-value
                  map-options
                  option-label="name"
                  :options="agencyOP"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="true"
                  :borderless="true"
                  :outlined="false"
                  :hide-dropdown-icon="true"
                />
                <q-select
                  class="col-xs-12 col-sm-6"
                  v-model="myData.posiNum"
                  label="ตำแหน่งเลขที่"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="posiNumOP"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="true"
                  :borderless="true"
                  :outlined="false"
                  :hide-dropdown-icon="true"
                />
                <q-select
                  class="col-xs-12 col-sm-6"
                  v-model="myData.category"
                  label="ตำแหน่งประเภท"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="categoryOP"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="true"
                  :borderless="true"
                  :outlined="false"
                  :hide-dropdown-icon="true"
                />
                <q-select
                  class="col-xs-12 col-sm-6"
                  v-model="myData.posiManage"
                  label="ตำแหน่งทางการบริหาร"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="posiManageOP"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="true"
                  :borderless="true"
                  :outlined="false"
                  :hide-dropdown-icon="true"
                />
                <q-select
                  class="col-xs-12 col-sm-6"
                  v-model="myData.sideManage"
                  label="ด้านทางบริหาร"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="sideManageOP"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="true"
                  :borderless="true"
                  :outlined="false"
                  :hide-dropdown-icon="true"
                />
                <q-select
                  class="col-xs-12 col-sm-6"
                  v-model="myData.posiWork"
                  label="ตำแหน่งในสายงาน"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="posiWorkOP"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="true"
                  :borderless="true"
                  :outlined="false"
                  :hide-dropdown-icon="true"
                />
                <q-select
                  class="col-xs-12 col-sm-6"
                  v-model="myData.sideWork"
                  label="ด้าน/สาขา"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="sideWorkOP"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="true"
                  :borderless="true"
                  :outlined="false"
                  :hide-dropdown-icon="true"
                />

                <q-select
                  class="col-xs-12 col-sm-6"
                  v-model="myData.level"
                  label="ระดับตำแหน่ง"
                  dense
                  emit-value
                  map-options
                  option-label="name"
                  :options="levelOP"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :readonly="true"
                  :borderless="true"
                  :outlined="false"
                  :hide-dropdown-icon="true"
                />
              </div>
            </q-card>
          </div>
          <div class="col-xs-12 col-sm-6">
            <q-card bordered flat>
              <div
                class="q-pa-xs bg-grey-2 row flex items-center justify-center text-bold q-py-sm q-px-md"
              >
                กำหนดใหม่
              </div>
              <q-separator />

              <div class="col-12 row q-pa-sm q-col-gutter-xs">
                <q-select
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '1')
                "
                  class="col-xs-12 col-sm-6"
                  outlined
                  dense
                  :options="govermentOP"
                  v-model="myData.goverment2"
                  label="รหัสส่วนราชการ"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  @update:model-value="updateGoverment"
                >
                  <template v-slot:option="scope">
                    <q-item v-bind="scope.itemProps">
                      <q-item-label class="q-my-none q-pt-xs q-mr-none">{{
                        scope.opt.name
                      }}</q-item-label>
                      <q-item-label caption class="q-ml-xs">
                        {{ scope.opt.note }}
                      </q-item-label>
                    </q-item>
                  </template>
                  <template v-slot:selected-item="scope">
                    <q-chip dense square class="q-my-none q-ml-xs q-mr-none">
                      {{ scope.opt.name }}
                    </q-chip>
                    <q-item-label caption class="q-ml-xs">
                      {{ scope.opt.note }}
                    </q-item-label>
                  </template>
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-black">
                        ไม่พบข้อมูลที่ค้นหา
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
                <q-select
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '2')
                "
                  class="col-xs-12 col-sm-6"
                  outlined
                  dense
                  :options="agencyOP"
                  v-model="myData.agency2"
                  label="ชื่อหน่วยงาน"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณาเลือก ชื่อหน่วยงาน'}`]"
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-black">
                        ไม่พบข้อมูลที่ค้นหา
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
                <q-select
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '3')
                "
                  class="col-xs-12 col-sm-6"
                  outlined
                  dense
                  :options="posiNumOP"
                  v-model="myData.posiNum2"
                  label="ตำแหน่งเลขที่"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณาเลือก ตำแหน่งเลขที่'}`]"
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-black">
                        ไม่พบข้อมูลที่ค้นหา
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
                <q-select
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '4')
                "
                  class="col-xs-12 col-sm-6"
                  outlined
                  dense
                  :options="categoryOP"
                  v-model="myData.category2"
                  label="ตำแหน่งประเภท"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณาเลือก ตำแหน่งเลขที่'}`]"
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-black">
                        ไม่พบข้อมูลที่ค้นหา
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
                <q-select
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '5')
                "
                  class="col-xs-12 col-sm-6"
                  outlined
                  dense
                  :options="posiManageOP"
                  v-model="myData.posiManage2"
                  label="ตำแหน่งทางการบริหาร"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  clearable
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-black">
                        ไม่พบข้อมูลที่ค้นหา
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
                <q-select
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '6')
                "
                  class="col-xs-12 col-sm-6"
                  outlined
                  dense
                  :options="sideManageOP"
                  v-model="myData.sideManage2"
                  label="ด้านทางบริหาร"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  clearable
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-black">
                        ไม่พบข้อมูลที่ค้นหา
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
                <!-- :rules="[(val) => !!val || `${'กรุณาเลือก ด้านทางบริหาร'}`]" -->
                <q-select
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '7')
                "
                  class="col-xs-12 col-sm-6"
                  outlined
                  dense
                  :options="posiWorkOP"
                  v-model="myData.posiWork2"
                  label="ตำแหน่งในสายงาน"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณาเลือก ตำแหน่งในสายงาน'}`]"
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-black">
                        ไม่พบข้อมูลที่ค้นหา
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
                <q-select
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '8')
                "
                  class="col-xs-12 col-sm-6"
                  outlined
                  dense
                  :options="sideWorkOP"
                  v-model="myData.sideWork2"
                  label="ด้าน/สาขา"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  clearable
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-black">
                        ไม่พบข้อมูลที่ค้นหา
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>

                <q-select
                  use-input
                  input-debounce="0"
                  @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '9')
                "
                  class="col-xs-12 col-sm-6"
                  outlined
                  dense
                  :options="levelOP"
                  v-model="myData.level2"
                  label="ระดับตำแหน่ง"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณาเลือก ระดับตำแหน่ง'}`]"
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-black">
                        ไม่พบข้อมูลที่ค้นหา
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </div>
            </q-card>
          </div>
        </div>
      </div>
      <q-separator />
      <q-card-actions class="q-py-sm">
        <q-space />
        <q-btn
          flat
          round
          color="public"
          icon="mdi-content-save-outline"
          @click="checkSave"
        >
          <q-tooltip>บันทึก</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-form>
  </q-card>
</template>
<script setup lang="ts">
import { onMounted, computed, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";

import TableReport from "@/modules/02_organizational/components/TableReport.vue";
import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
import type { QForm } from "quasar";
import type { DataOption } from "@/modules/02_organizational/interface/index/Main";
import type { ResponseDetail } from "@/modules/02_organizational/interface/response/Mapping";
import type { RequestReport2 } from "@/modules/02_organizational/interface/request/Mapping";
import http from "@/plugins/http";
import config from "@/app.config";

const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
const id = ref<string>("");
const myForm = ref<QForm | null>(null); //form data input

const mockData = ref<ResponseDetail>({
  report2Id: "1asd12",
  name: "นางสาวเปรี้ยว เข็ดฟัน",
  edu: "ศศ.บ. (รัฐศาสตร์)",
  salary: 31580,
  salary2: 2600,
  salary3: 2600,
  goverment: "0301",
  agency: "กองบริหารทั่วไป",
  posiNum: "กบห.13",
  posiManage: "",
  sideManage: "",
  posiWork: "นักวิชาการเงินและบัญชี",
  sideWork: "วิชาการบัญชี",
  category: "วิชาการ",
  level: "ชำนาญงาน",
  goverment2: "0301",
  agency2: "กองบริหารทั่วไป",
  posiNum2: "กบห.12",
  posiManage2: "",
  sideManage2: "",
  posiWork2: "นักวิชาการเงินและบัญชี",
  sideWork2: "วิชาการบัญชี",
  category2: "วิชาการ",
  level2: "ชำนาญงาน",
});
const myData = ref<ResponseDetail>({
  report2Id: "",
  name: "",
  edu: "",
  salary: 0,
  salary2: 0,
  salary3: 0,
  goverment: "",
  agency: "",
  posiNum: "",
  posiManage: "",
  sideManage: "",
  posiWork: "",
  sideWork: "",
  category: "",
  level: "",
  goverment2: "",
  agency2: "",
  posiNum2: "",
  posiManage2: "",
  sideManage2: "",
  posiWork2: "",
  sideWork2: "",
  category2: "",
  level2: "",
});

const govermentOP = ref<DataOption[]>([]);
const agencyOP = ref<DataOption[]>([]);
const posiNumOP = ref<DataOption[]>([]);
const posiManageOP = ref<DataOption[]>([]);
const sideManageOP = ref<DataOption[]>([]);
const posiWorkOP = ref<DataOption[]>([]);
const categoryOP = ref<DataOption[]>([]);
const sideWorkOP = ref<DataOption[]>([]);
const levelOP = ref<DataOption[]>([]);

const govermentOPfilter = ref<DataOption[]>([]);
const agencyOPfilter = ref<DataOption[]>([]);
const posiNumOPfilter = ref<DataOption[]>([]);
const posiManageOPfilter = ref<DataOption[]>([]);
const sideManageOPfilter = ref<DataOption[]>([]);
const posiWorkOPfilter = ref<DataOption[]>([]);
const categoryOPfilter = ref<DataOption[]>([]);
const sideWorkOPfilter = ref<DataOption[]>([]);
const levelOPfilter = ref<DataOption[]>([]);

onMounted(async () => {
  hideLoader();
  if (route.params.id != undefined) {
    id.value = route.params.id.toString();
    showLoader();

    await fetchGoverment();
    // await fetchAgency();
    // await fetchPositionNum();
    // await fetchCategory();
    // await fetchPositionManage();
    // await fetchSideManage();
    // await fetchPositionWork();
    // await fetchSideWork();
    await fetchLevel();

    await fetchData();
    hideLoader();
  }
});

const fetchData = async () => {
  showLoader();
  await http
    .get(config.API.report2Id(id.value))
    .then(async (res) => {
      const data = res.data.result;
      myData.value.report2Id = data.report2Id ?? "1";
      myData.value.name = data.name ?? "";
      myData.value.edu = data.edu ?? "";
      myData.value.salary = data.salary ?? 0;
      myData.value.salary2 = data.salary2 ?? 0;
      myData.value.salary3 = data.salary3 ?? 0;
      myData.value.goverment = data.goverment ?? "";
      myData.value.agency = data.agency ?? "";
      myData.value.posiNum = data.posiNum ?? "";
      myData.value.posiManage = data.posiManage ?? "";
      myData.value.sideManage = data.sideManage ?? "";
      myData.value.posiWork = data.posiWork ?? "";
      myData.value.sideWork = data.sideWork ?? "";
      myData.value.category = data.category ?? "";
      myData.value.level = data.level ?? "";
      await updateGoverment(data.goverment2);
      myData.value.goverment2 =
        data.goverment2 == "00000000-0000-0000-0000-000000000000"
          ? ""
          : data.goverment2;
      myData.value.agency2 =
        data.agency2 == "00000000-0000-0000-0000-000000000000"
          ? ""
          : data.agency2;
      myData.value.posiNum2 =
        data.posiNum2 == "00000000-0000-0000-0000-000000000000"
          ? ""
          : data.posiNum2;
      myData.value.posiManage2 =
        data.posiManage2 == "00000000-0000-0000-0000-000000000000"
          ? ""
          : data.posiManage2;
      myData.value.sideManage2 =
        data.sideManage2 == "00000000-0000-0000-0000-000000000000"
          ? ""
          : data.sideManage2;
      myData.value.posiWork2 =
        data.posiWork2 == "00000000-0000-0000-0000-000000000000"
          ? ""
          : data.posiWork2;
      myData.value.sideWork2 =
        data.sideWork2 == "00000000-0000-0000-0000-000000000000"
          ? ""
          : data.sideWork2;
      myData.value.category2 =
        data.category2 == "00000000-0000-0000-0000-000000000000"
          ? ""
          : data.category2;
      myData.value.level2 =
        data.level2 == "00000000-0000-0000-0000-000000000000"
          ? ""
          : data.level2;
    })
    .catch((e) => {})
    .finally(() => {
      hideLoader();
    });
};

const checkSave = async () => {
  if (myForm.value !== null) {
    myForm.value.validate().then(async (success) => {
      if (success) {
        await saveData();
      }
    });
  }
};

const saveData = async () => {
  //   console.log(myData.value);
  showLoader();
  const body: RequestReport2 = {
    organizationShortNameId: myData.value.goverment2,
    organizationOrganizationId: myData.value.agency2,
    positionNumId: myData.value.posiNum2,
    positionTypeId: myData.value.category2,
    positionExecutiveId: myData.value.posiManage2,
    positionExecutiveSideId: myData.value.sideManage2,
    positionPathId: myData.value.posiWork2,
    positionPathSideId: myData.value.sideWork2,
    positionLevelId: myData.value.level2,
    status: null,
  };
  await http
    .put(config.API.report2Id(myData.value.report2Id), body)
    .then((res) => {
      success($q, "แก้ไขข้อมูลสำเร็จ");
      clickBack();
    })
    .catch((e) => {})
    .finally(() => {
      hideLoader();
    });
};

const clickBack = () => {
  router.push({ name: "manageReport2" });
};

//รหัสส่วนราชการ
const fetchGoverment = async () => {
  //   showLoader();
  await http
    .get(config.API.organizationShortName)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      //    data.map((r: any) => {
      //     option.push({
      //       id: r.id.toString(),
      //       name: r.governmentCode.toString(),
      //       agencyCode: r.agencyCode.toString(),
      //       shortName: r.name.toString(),
      //     });
      //   });
      data.map((r: any) => {
        option.push({
          id: r.id.toString(),
          name: r.governmentCode.toString(),
          note: r.name.toString(),
        });
      });
      govermentOP.value = option;
      govermentOPfilter.value = option;
    })
    .catch((e) => {})
    .finally(() => {
      //   hideLoader();
    });
};

const updateGoverment = async (id: string) => {
  //   showLoader();
  await http
    .get(config.API.getPositionMasterPositionNumberId(id))
    .then((res) => {
      const data = res.data.result;
      myData.value.agency2 = "";
      myData.value.posiNum2 = "";
      myData.value.posiManage2 = "";
      myData.value.sideManage2 = "";
      myData.value.posiWork2 = "";
      myData.value.sideWork2 = "";
      myData.value.category2 = "";
      myData.value.level2 = "";

      let option1: DataOption[] = [];
      data.organizationOrganizations.map((r: DataOption) => {
        option1.push({ id: r.id.toString(), name: r.name.toString() });
      });
      if (option1.length == 1) {
        myData.value.agency2 = option1[0].id;
      }
      agencyOP.value = option1;
      agencyOPfilter.value = option1;
      let option2: DataOption[] = [];
      data.positionNumbers.map((r: DataOption) => {
        option2.push({ id: r.id.toString(), name: r.name.toString() });
      });
      if (option2.length == 1) {
        myData.value.posiNum2 = option2[0].id;
      }
      posiNumOP.value = option2;
      posiNumOPfilter.value = option2;
      let option3: DataOption[] = [];
      data.positionExecutives.map((r: DataOption) => {
        option3.push({ id: r.id.toString(), name: r.name.toString() });
      });
      if (option3.length == 1) {
        myData.value.posiManage2 = option3[0].id;
      }
      posiManageOP.value = option3;
      posiManageOPfilter.value = option3;
      let option4: DataOption[] = [];
      data.positionExecutiveSides.map((r: DataOption) => {
        option4.push({ id: r.id.toString(), name: r.name.toString() });
      });
      if (option4.length == 1) {
        myData.value.sideManage2 = option4[0].id;
      }
      sideManageOP.value = option4;
      sideManageOPfilter.value = option4;
      let option5: DataOption[] = [];
      data.positionPaths.map((r: DataOption) => {
        option5.push({ id: r.id.toString(), name: r.name.toString() });
      });
      if (option5.length == 1) {
        myData.value.posiWork2 = option5[0].id;
      }
      posiWorkOP.value = option5;
      posiWorkOPfilter.value = option5;
      let option6: DataOption[] = [];
      data.positionTypes.map((r: DataOption) => {
        option6.push({ id: r.id.toString(), name: r.name.toString() });
      });
      if (option6.length == 1) {
        myData.value.category2 = option6[0].id;
      }
      categoryOP.value = option6;
      categoryOPfilter.value = option6;
      let option7: DataOption[] = [];
      data.positionPathSides.map((r: DataOption) => {
        option7.push({ id: r.id.toString(), name: r.name.toString() });
      });
      if (option7.length == 1) {
        myData.value.sideWork2 = option7[0].id;
      }
      sideWorkOP.value = option7;
      sideWorkOPfilter.value = option7;
      //   let option8: DataOption[] = [];
      //   data.map((r: DataOption) => {
      //     option8.push({ id: r.id.toString(), name: r.name.toString() });
      //   });
      //   if(option8.length == 1){
      //     myData.value.level2 = option8[0].id
      //   }
      //   levelOP.value = option8;
      //   levelOPfilter.value = option8;
    })
    .catch((e) => {})
    .finally(() => {
      //   hideLoader();
    });
};

// //ตำแหน่งเลขที่
const fetchPositionNum = async () => {
  //   showLoader();
  await http
    .get(config.API.getPositionMasterPositionNumber)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      posiNumOP.value = option;
      posiNumOPfilter.value = option;
    })
    .catch((e) => {})
    .finally(() => {
      //   hideLoader();
    });
};

//ตำแหน่งประเภท
const fetchCategory = async () => {
  //   showLoader();
  await http
    .get(config.API.positionType)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      categoryOP.value = option;
      categoryOPfilter.value = option;
    })
    .catch((e) => {})
    .finally(() => {
      //   hideLoader();
    });
};

//ตำแหน่งทางการบริหาร
const fetchPositionManage = async () => {
  //   showLoader();
  await http
    .get(config.API.positionExecutive)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      posiManageOP.value = option;
      posiManageOPfilter.value = option;
    })
    .catch((e) => {})
    .finally(() => {
      //   hideLoader();
    });
};

//ด้านทางบริหาร
const fetchSideManage = async () => {
  //   showLoader();
  await http
    .get(config.API.positionExecutiveSide)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      sideManageOP.value = option;
      sideManageOPfilter.value = option;
    })
    .catch((e) => {})
    .finally(() => {
      //   hideLoader();
    });
};

//ตำแหน่งในสายงาน
const fetchPositionWork = async () => {
  //   showLoader();
  await http
    .get(config.API.positionPath)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      posiWorkOP.value = option;
      posiWorkOPfilter.value = option;
    })
    .catch((e) => {})
    .finally(() => {
      //   hideLoader();
    });
};

//ด้าน/สาขา
const fetchSideWork = async () => {
  //   showLoader();
  await http
    .get(config.API.positionSide)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      sideWorkOP.value = option;
      sideWorkOPfilter.value = option;
    })
    .catch((e) => {})
    .finally(() => {
      //   hideLoader();
    });
};

//ระดับตำแหน่ง
const fetchLevel = async () => {
  //   showLoader();
  await http
    .get(config.API.positionLevel)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      levelOP.value = option;
      levelOPfilter.value = option;
    })
    .catch((e) => {})
    .finally(() => {
      //   hideLoader();
    });
};

const filterSelector = (val: any, update: Function, filtername: string) => {
  switch (filtername) {
    case "1":
      update(() => {
        govermentOP.value = govermentOPfilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "2":
      update(() => {
        agencyOP.value = agencyOPfilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "3":
      update(() => {
        posiNumOP.value = posiNumOPfilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "4":
      //ตำแหน่งประเภท
      update(() => {
        categoryOP.value = categoryOPfilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "5":
      //ตำแหน่งทางการบริหาร
      update(() => {
        posiManageOP.value = posiManageOPfilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "6":
      //ด้านทางบริหาร
      update(() => {
        sideManageOP.value = sideManageOPfilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "7":
      //ตำแหน่งในสายงาน
      update(() => {
        posiWorkOP.value = posiWorkOPfilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "8":
      update(() => {
        sideWorkOP.value = sideWorkOPfilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "9":
      update(() => {
        levelOP.value = levelOPfilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
};
</script>

<style>
.expan .q-expansion-item--expanded {
  border: 1px solid #eaeaea;
  border-radius: 2px;
  margin: 5px 0px !important;
  background: #eaeaea4a !important;
}
.expan .q-expansion-item {
  border: 1px solid #eaeaea;
  margin-top: -1px;
  border-radius: 2px;
  background: white;
}
.my-custom-toggle {
  border: 1px solid #02a998;
}
</style>
