<script setup lang="ts">
import { ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";

import http from "@/plugins/http";
import config from "@/app.config";

import DialogHeader from "@/components/DialogHeader.vue";
import { useQuasar } from "quasar";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const $q = useQuasar();

const { showLoader, hideLoader, success, messageError } = mixin;

const myForm = ref<any>();
const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
  },
  idInbox: {
    type: String,
    default: "",
  },
  clickClose: {
    type: Function,
    default: () => {},
  },
});

const subject = ref<string>("");
const body = ref<string>("");
async function submit() {
  myForm.value.validate().then(async (result: boolean) => {
    if (result) {
      // props.savaForm(reason.value);
      showLoader();
      await http
        .put(config.API.replyMessage(props.idInbox), {
          subject: subject.value,
          body: body.value,
        })
        .then((res) => {
          props.clickClose();
          success($q, "ส่งข้อความสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    }
  });
}
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 40vw; max-width: 40vw">
      <q-form ref="myForm">
        <DialogHeader tittle="ส่งข้อความ" :close="clickClose" />
        <q-separator />
        <q-card-section class="q-pa-sm bg-grey-1">
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-xs-12">
              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                <q-input
                  class="full-width inputgreen cursor-pointer"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  :rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
                  v-model="subject"
                  label="หัวข้อ"
                />

                <q-input
                  type="textarea"
                  class="full-width inputgreen cursor-pointer"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  :rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
                  v-model="body"
                  label="ข้อความ"
                />
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn
            dense
            unelevated
            label="ส่งข้อความ"
            color="public"
            @click="submit"
            class="q-px-md"
          >
            <!-- icon="mdi-content-save-outline" -->
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
