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

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

/** impotrStores */
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { dialogConfirm, dialogMessageNotify } = mixin;

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

const routeName = router.currentRoute.value.name;
const amount = ref<number | null>();
const Org = ref<string | null>("");
const grandCross = ref<string | null>("");
const filterInsigniaOp = ref<any>();

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: [],
  },
});

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

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

/** function ยืนยันการบันทึก*/
const clickSave = () => {
  if (myForm.value !== null) {
    myForm.value.validate().then(async (success) => {
      if (success) {
        dialogConfirm($q, () => props.save(grandCross.value, amount.value));
      } else {
        dialogMessageNotify($q, "กรุณาข้อมูลให้ครบ");
      }
    });
  }
};

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

watch(
  () => props.insigniaList,
  (newVal) => {
    filterInsigniaOp.value = newVal;
  }
);
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 800px">
      <DialogHeader tittle="จัดสรรเครื่องราชฯ" :close="closeModal" />
      <q-separator />

      <q-form ref="myForm">
        <div class="q-pa-md bg-grey-1">
          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
            <div class="col-6">
              <q-select
                hide-bottom-space
                :options="filterInsigniaOp"
                dense
                borderless
                use-input
                lazy-rules
                option-label="name"
                option-value="id"
                emit-value
                map-options
                outlined
                options-cover
                :rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
                v-model="grandCross"
                :label="
                  routeName == 'insigniaAllocate'
                    ? `เครื่องราชฯ`
                    : `เลือกหน่วยงาน`
                "
                @filter="(inputValue:any,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) => !!val || `${'กรุณากรอกจำนวน'}`]"
              />
            </div>
          </div>
        </div>
      </q-form>

      <q-separator />
      <div class="row justify-end q-py-sm">
        <div class="q-px-md">
          <q-btn
            label="บันทึก"
            @click="clickSave"
            color="public"
            :disable="grandCross == '' || amount == null || amount == 0"
          />
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>
