<script setup lang="ts">
import { ref, watch } from "vue";
import { QForm, useQuasar } from "quasar";

import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";

/** impotrComponents */
import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const myForm = ref<QForm | null>(null); //form data input

/**
 * props
 */
const props = defineProps({
  modal: Boolean,
  save: {
    type: Function,
    default: () => console.log("not function"),
  },
  close: {
    type: Function,
    default: () => console.log("not function"),
  },
  insigniaList: {
    type: Array,
    default: [],
  },
});

const routeName = router.currentRoute.value.name;
const amount = ref<number | null>(); //จำนวน
const grandCross = ref<string | null>(""); //เครื่องราชฯ
const filterInsigniaOp = ref<any[]>([]); //รายการเครื่องราชฯ

/**
 * function closePopup
 */
function closeModal() {
  props.close();
}

/**
 * function ค้นหาข้อมูลใน option
 * @param val คำค้นหา
 * @param update function
 * @param name ชื่อ Selec
 */
function filterSelector(val: string, update: Function, name: string) {
  update(() => {
    const needle = val.toLowerCase();
    if (name === "filterInsigniaOp") {
      grandCross.value = null;

      const newList = props.insigniaList.filter(
        (e: any) => e.name !== "ทั้งหมด"
      );

      filterInsigniaOp.value = newList.filter(
        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
      );
    }
  });
}

/** function ยืนยันการบันทึก*/
function onSubmit() {
  dialogConfirm($q, () => props.save(grandCross.value, amount.value));
}

watch(props, () => {
  if (props.modal === false) {
    grandCross.value = "";

    amount.value = null;
  }
});

watch(
  () => props.insigniaList,
  (newVal) => {
    filterInsigniaOp.value = newVal.filter((e: any) => e.name !== "ทั้งหมด");
  }
);
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 700px; max-width: 80vw">
      <q-form
        ref="myForm"
        greedy
        @submit.prevent
        @validation-success="onSubmit"
      >
        <DialogHeader tittle="จัดสรรเครื่องราชฯ" :close="closeModal" />
        <q-separator />

        <q-card-section>
          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
            <div class="col-6">
              <q-select
                class="inputgreen"
                hide-bottom-space
                :options="filterInsigniaOp"
                dense
                borderless
                use-input
                lazy-rules
                option-label="name"
                option-value="id"
                emit-value
                map-options
                outlined
                
                :rules="[(val:string) => !!val || `${'กรุณาเลือกเครื่องราชฯ'}`]"
                v-model="grandCross"
                :label="
                  routeName == 'insigniaAllocate'
                    ? `เครื่องราชฯ`
                    : `เลือกหน่วยงาน`
                "
                @filter="(inputValue:string,doneFn:Function) => 
                  filterSelector(inputValue, doneFn,'filterInsigniaOp') "
              />
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-input
                hide-bottom-space
                outlined
                class="inputgreen"
                v-model="amount"
                dense
                lazy-rules
                type="number"
                label="จำนวน"
                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวน'}`]"
              />
            </div>
          </div>
        </q-card-section>

        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" type="submit" color="public"
            ><q-tooltip>บันทึก</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
