<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";

import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { FormDataSalary } from "@/modules/04_registryPerson/interface/request/Edit";

import CurruncyInput from "@/components/CurruncyInput.vue";

const { date2Thai } = useCounterMixin();
const store = useEditPosDataStore();

const isReadonly = defineModel<boolean>("isReadonly", { required: true });
const isAddPosition = defineModel<boolean>("isAddPosition", { default: false });
const empType = defineModel<string>("empType", { required: true });
const formData = defineModel<FormDataSalary>("formData", { required: true });
const commandCodeOptions = defineModel<DataOption[]>("commandCodeOptions", {
  required: true,
});
const posTypeOptions = defineModel<DataOption[]>("posTypeOptions", {
  required: true,
});
const posLevelOptions = defineModel<DataOption[]>("posLevelOptions", {
  required: true,
});
const posLineOptions = defineModel<DataOption[]>("posLineOptions", {
  required: true,
});
const posPathSideOptions = defineModel<DataOption[]>("posPathSideOptions", {
  required: true,
});
const posExecutiveOptions = defineModel<DataOption[]>("posExecutiveOptions", {
  required: true,
});

const props = defineProps<{
  updateSelectType?: (value: any) => void;
}>();

/**
 * ฟิลเตอร์ข้อมูลจาก input
 * @param val ค่าที่ป้อนให้ input
 * @param update function จาก quasar
 * @param filtername type ที่กำหนด ของ input นั้นๆ
 */
function filterSelector(val: string, update: Function, filtername: string) {
  switch (filtername) {
    case "commandCode":
      update(() => {
        commandCodeOptions.value = store.commandCodeData.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "posType":
      update(() => {
        posTypeOptions.value = store.posTypeData.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "posLevel":
      update(() => {
        posLevelOptions.value = store.posLevelData.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "posLine":
      update(() => {
        posLineOptions.value = store.posLineData.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "posPathSide":
      update(() => {
        posPathSideOptions.value = store.posPathSideData.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "posExecutive":
      update(() => {
        posExecutiveOptions.value = store.posExecutiveData.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
}

function classInput(val: boolean) {
  return {
    "full-width  cursor-pointer": val,
    "full-width  inputgreen cursor-pointer": !val,
  };
}
</script>

<template>
  <div class="row col-12 q-col-gutter-sm">
    <div class="col-xs-12 col-sm-6 col-md-8">
      <q-select
        outlined
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        dense
        lazy-rules
        borderless
        v-model="formData.commandCode"
        :label="`${'ประเภทคำสั่ง'}`"
        emit-value
        map-options
        option-label="name"
        :options="commandCodeOptions"
        :rules="isAddPosition ? [(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง'] : []"
        option-value="id"
        hide-bottom-space
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        @update:model-value="props.updateSelectType"
        @filter="(inputValue: string,
                doneFn: Function) => filterSelector(inputValue, doneFn, 'commandCode'
                )"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4">
      <datepicker
        menu-class-name="modalfix"
        :readonly="isReadonly"
        v-model="formData.commandDateAffect"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
        week-start="0"
        :class="classInput(isReadonly)"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            :readonly="isReadonly"
            outlined
            dense
            borderless
            :model-value="
              formData.commandDateAffect
                ? date2Thai(formData.commandDateAffect)
                : null
            "
            :label="`${'วันที่คำสั่งมีผล'}`"
            :rules="isAddPosition ? [ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ] : []"
            hide-bottom-space
            clearable
            @clear="formData.commandDateAffect = null"
          >
            <template v-slot:prepend>
              <q-icon name="event" color="primary" class="cursor-pointer">
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-8">
      <q-input
        :readonly="isReadonly"
        :class="classInput(isReadonly)"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.posNumCodeSit"
        hide-bottom-space
        :label="`${'หน่วยงานที่ออกคำสั่ง'}`"
        hint="*ชื่อเต็มหน่วยงานที่ออกคำสั่ง"
      />
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4">
      <q-input
        :readonly="isReadonly"
        :class="classInput(isReadonly)"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.posNumCodeSitAbb"
        hide-bottom-space
        :label="`${'ตัวย่อหน่วยงานที่ออกคำสั่ง'}`"
      />
    </div>

    <div class="col-xs-6 col-sm-12 col-md-8">
      <div class="row q-col-gutter-sm">
        <div class="col-6">
          <q-input
            :readonly="isReadonly"
            :class="classInput(isReadonly)"
            outlined
            dense
            lazy-rules
            borderless
            v-model="formData.commandNo"
            hide-bottom-space
            :label="`${'เลขที่คำสั่ง'}`"
            :rules="isAddPosition ? [ (val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`, ] : []"
          />
        </div>
        <label class="col-1 flex justify-center items-center">/</label>
        <div class="col-5">
          <datepicker
            menu-class-name="modalfix"
            v-model="formData.commandYear"
            :locale="'th'"
            autoApply
            year-picker
            :enableTimePicker="false"
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
          >
            <template #year="{ year }">{{ year + 543 }}</template>
            <template #year-overlay-value="{ value }">{{
              parseInt(value + 543)
            }}</template>
            <template #trigger>
              <q-input
                :readonly="isReadonly"
                dense
                outlined
                hide-bottom-space
                :model-value="
                  formData.commandYear == null
                    ? null
                    : formData.commandYear + 543
                "
                label="ปี พ.ศ."
                :rules="isAddPosition ? [(val:string) => !!val || 'กรุณากรอกปี พ.ศ.'] : []"
                clearable
                @clear="formData.commandYear = null"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
      </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4">
      <datepicker
        menu-class-name="modalfix"
        v-model="formData.commandDateSign"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
        week-start="0"
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            :readonly="isReadonly"
            outlined
            dense
            borderless
            :model-value="
              formData.commandDateSign
                ? date2Thai(formData.commandDateSign)
                : null
            "
            :label="`${'วันที่ลงนาม'}`"
            :rules="isAddPosition ? [ (val: string) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`, ] : []"
            hide-bottom-space
            clearable
            @clear="formData.commandDateSign = null"
          >
            <template v-slot:prepend>
              <q-icon name="event" color="primary" class="cursor-pointer">
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
    </div>

    <div class="col-12">
      <q-separator />
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4">
      <q-input
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.posNoAbb"
        hide-bottom-space
        :label="`${'ตัวย่อ'}`"
      >
      </q-input>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4">
      <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]" -->
      <q-input
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.posNo"
        hide-bottom-space
        :label="empType === 'officer' ? 'เลขที่ตำแหน่ง' : 'ตำแหน่งเลขที่'"
      >
      </q-input>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4">
      <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']" -->
      <q-input
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.positionName"
        :label="empType === 'officer' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
        :rules="isAddPosition ? [(val: string) => !!val || `${empType === 'officer' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'}` ] :[]"
        hide-bottom-space
        autocomplete="on"
        name="positionName"
      />
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4">
      <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]" -->
      <q-select
        outlined
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        dense
        lazy-rules
        borderless
        v-model="formData.positionType"
        :label="empType === 'officer' ? 'ตำแหน่งประเภท' : 'กลุ่มงาน'"
        emit-value
        map-options
        option-label="name"
        :options="posTypeOptions"
        option-value="name"
        hide-bottom-space
        use-input
        hide-selected
        fill-input
        clearable
        @clear="formData.positionLevel = ''"
        input-debounce="0"
        @update:model-value="props.updateSelectType"
        @filter="(inputValue: string,
                  doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                  )"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4">
      <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']" -->
      <q-select
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        :disable="!formData.positionType"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.positionLevel"
        :label="empType === 'officer' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
        emit-value
        map-options
        option-label="name"
        :options="posLevelOptions"
        option-value="name"
        hide-bottom-space
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        @filter="(inputValue: string,
                    doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
                    )"
        ><template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
      <q-input
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.positionCee"
        hide-bottom-space
        :label="`${'ระดับซี'}`"
      >
      </q-input>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
      <q-input
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.positionLine"
        hide-bottom-space
        :label="`${'สายงาน'}`"
        autocomplete="on"
        name="positionLine"
      />
      <!-- <q-select
        outlined
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        dense
        lazy-rules
        borderless
        v-model="formData.positionLine"
        :label="`${'สายงาน'}`"
        emit-value
        map-options
        option-label="name"
        :options="posLineOptions"
        option-value="id"
        hide-bottom-space
        use-input
        hide-selected
        fill-input
        clearable
        input-debounce="0"
        @filter="(inputValue: string,
                  doneFn: Function) => filterSelector(inputValue, doneFn, 'posLine'
                  )"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template></q-select
      > -->
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
      <q-input
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.positionPathSide"
        hide-bottom-space
        :label="`${'ด้าน/สาขา'}`"
        autocomplete="on"
        name="positionPathSide"
      />
      <!-- <q-select
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.positionPathSide"
        :label="`${'ด้าน/สาขา'}`"
        emit-value
        map-options
        option-label="name"
        :options="posPathSideOptions"
        option-value="id"
        hide-bottom-space
        use-input
        hide-selected
        fill-input
        clearable
        input-debounce="0"
        @filter="(inputValue: string,
                  doneFn: Function) => filterSelector(inputValue, doneFn, 'posPathSide'
                  )"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
      </q-select> -->
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
      <q-input
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.positionExecutive"
        hide-bottom-space
        :label="`${'ตำแหน่งทางการบริหาร'}`"
        autocomplete="on"
        name="positionExecutive"
      />
      <!-- <q-select
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.positionExecutive"
        :label="`${'ตำแหน่งทางการบริหาร'}`"
        emit-value
        map-options
        option-label="name"
        :options="posExecutiveOptions"
        option-value="id"
        hide-bottom-space
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        clearable
        @filter="(inputValue: string,
                doneFn: Function) => filterSelector(inputValue, doneFn, 'posExecutive'
                )"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
      </q-select> -->
    </div>

    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
      <q-input
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        outlined
        dense
        lazy-rules
        borderless
        v-model="formData.positionExecutiveField"
        hide-bottom-space
        :label="`${'ด้านทางการบริหาร'}`"
        autocomplete="on"
        name="positionExecutiveField"
      />
    </div>

    <div class="col-12">
      <div class="row q-col-gutter-sm">
        <div class="col-xs-6 col-sm-6 col-md-4">
          <CurruncyInput
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
            ref="salaryRef"
            dense
            outlined
            v-model="formData.amount"
            label="เงินเดือน"
            lazy-rules
            hide-bottom-space
            :rules="[ 
                            (val:number) => {
                              if (!val) return true;
                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
                              return numVal <= 10000000 || 'เงินเดือนต้องไม่เกิน 10,000,000 บาท';
                            }
                          ]"
          />
        </div>

        <div class="col-xs-6 col-sm-6 col-md-4">
          <CurruncyInput
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
            ref="amountSpecialRef"
            dense
            outlined
            v-model="formData.amountSpecial"
            label="เงินค่าตอบแทนพิเศษ"
            hide-bottom-space
            :rules="[ 
                            (val:number) => {
                              if (!val) return true;
                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
                              return numVal <= 10000000 || 'เงินค่าตอบแทนพิเศษต้องไม่เกิน 10,000,000 บาท';
                            }
                          ]"
          />
        </div>

        <div class="col-xs-6 col-sm-6 col-md-4">
          <CurruncyInput
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
            dense
            outlined
            v-model="formData.positionSalaryAmount"
            label="เงินประจำตำแหน่ง"
            hide-bottom-space
            lazy-rules
            :rules="[ 
                            (val:number) => {
                              if (!val) return true;
                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
                              return numVal <= 10000000 || 'เงินประจำตำแหน่งต้องไม่เกิน 10,000,000 บาท';
                            }
                          ]"
          />
        </div>

        <div class="col-xs-6 col-sm-6 col-md-4">
          <CurruncyInput
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
            dense
            outlined
            v-model="formData.mouthSalaryAmount"
            label="เงินค่าตอบแทนรายเดือน"
            lazy-rules
            hide-bottom-space
            :rules="[ 
                            (val:number) => {
                              if (!val) return true;
                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
                              return numVal <= 10000000 || 'เงินค่าตอบแทนรายเดือนต้องไม่เกิน 10,000,000 บาท';
                            }
                          ]"
          />
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12">
      <div class="row q-col-gutter-sm">
        <div class="col-xs-12 col-sm-4 col-md-4">
          <q-input
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
            outlined
            dense
            lazy-rules
            borderless
            v-model="formData.orgRoot"
            hide-bottom-space
            autocomplete="on"
            name="organization"
          />
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4">
          <q-input
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
            outlined
            dense
            lazy-rules
            borderless
            v-model="formData.orgChild1"
            hide-bottom-space
            :label="`${'ส่วนราชการระดับ 1'}`"
            autocomplete="on"
            name="organization"
          />
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4">
          <q-input
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
            outlined
            dense
            lazy-rules
            borderless
            v-model="formData.orgChild2"
            hide-bottom-space
            :label="`${'ส่วนราชการระดับ 2'}`"
            autocomplete="on"
            name="organization"
          />
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4">
          <q-input
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
            outlined
            dense
            lazy-rules
            borderless
            v-model="formData.orgChild3"
            hide-bottom-space
            :label="`${'ส่วนราชการระดับ 3'}`"
            autocomplete="on"
            name="organization"
          />
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4">
          <q-input
            :class="classInput(isReadonly)"
            :readonly="isReadonly"
            outlined
            dense
            lazy-rules
            borderless
            v-model="formData.orgChild4"
            hide-bottom-space
            :label="`${'ส่วนราชการระดับ 4'}`"
            autocomplete="on"
            name="organization"
          />
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12">
      <q-input
        :class="classInput(isReadonly)"
        :readonly="isReadonly"
        ref="docRef"
        outlined
        dense
        borderless
        v-model="formData.remark"
        :label="`${'หมายเหตุ'}`"
        type="textarea"
      />
    </div>
  </div>
</template>

<style scoped></style>
