<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 $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;

const routeName = router.currentRoute.value.name;

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

const title = ref<string>(""); //เครื่องราชฯ
const amount = ref<number>(); //จำนวน

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

/**
 *  function ยืนยันการบันทึก
 */
function onSubmit() {
  dialogConfirm($q, () => {
    if (props.actionType === "insignia") {
      props.save(
        props.insigniadata.id,
        props.insigniadata.insigniaId,
        amount.value,
        props.insigniadata.year
      );
    } else {
      props.save(props.insigniadata.id, amount.value);
    }
  });
}

/**
 * class inpui
 * @param val ค่าสถานะ
 */
function classInput(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

watch(props, () => {
  if (props.modal === true) {
    amount.value = props.insigniadata.total;
    if (props.actionType === "insignia") {
      title.value = props.insigniadata.insignia;
    } else title.value = props.insigniadata.organization;
  }
});
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 800px">
      <q-form
        ref="myForm"
        greedy
        @submit.prevent
        @validation-success="onSubmit"
      >
        <DialogHeader tittle="แก้ไขการจัดสรรเครื่องราชฯ" :close="closeModal" />
        <q-separator />
        <q-card-section>
          <div
            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
          >
            <div class="col-xs-12 col-sm-6">
              <q-input
                hide-bottom-space
                outlined
                v-model="title"
                dense
                lazy-rules
                type="text"
                :label="
                  routeName == 'insigniaAllocate'
                    ? `เครื่องราชฯ`
                    : `เลือกหน่วยงาน`
                "
                :class="classInput(true)"
                readonly
              />
            </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>

<style lang="scss" scoped></style>
