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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/modules/05_command/stores/main";

import type { DataTemplateDetail } from "@/modules/05_command/interface/response/Main";

const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
const store = useDataStore();

const commandId = defineModel<string>("commandId", { required: true });
const type = defineModel<string>("type", { required: true });
const dataTemplateDetail = defineModel<DataTemplateDetail>(
  "dataTemplateDetail",
  {
    required: true,
  }
);
const { fetchDataTemplate } = defineProps({
  fetchDataTemplate: {
    type: Function,
    required: true,
  },
});

const textHeader = ref<string>("");
const textBody = ref<string>("");
const textFooter = ref<string>("");

async function fetchData(data: DataTemplateDetail) {
  textHeader.value = data.detailHeader;
  textBody.value = data.detailBody;
  textFooter.value = data.detailFooter;
}

const onSave = () => {
  dialogConfirm($q, () => {
    showLoader();
    http
      .put(config.API.commandType + `/text/${commandId.value}`, {
        detailHeader: textHeader.value ?? "",
        detailBody: textBody.value ?? "",
        detailFooter: textFooter.value ?? "",
      })
      .then(async () => {
        await fetchDataTemplate(commandId.value);
        success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
};

onMounted(() => {
  fetchData(dataTemplateDetail.value);
});

defineExpose({
  fetchData,
});
</script>

<template>
  <q-card>
    <q-card-section class="q-pt-none">
      <div class="row items-center q-col-gutter-sm">
        <div class="col-12">
          <q-input
            type="textarea"
            class="full-width inputgreen cursor-pointer"
            hide-bottom-space
            outlined
            dense
            lazy-rules
            v-model="textHeader"
            label="เนื้อหาคำสั่งขึ้นต้น (optional)"
          />
        </div>

        <div class="col-12">
          <q-input
            type="textarea"
            class="full-width inputgreen cursor-pointer"
            hide-bottom-space
            outlined
            dense
            lazy-rules
            v-model="textBody"
            label="เนื้อหาคำสั่งหลัก"
            :rules="[(val: string) => !!val || `${'กรุณากรอกเนื้อหาคำสั่งหลัก'}`]"
          />
        </div>

        <div class="col-12">
          <q-input
            type="textarea"
            class="full-width inputgreen cursor-pointer"
            hide-bottom-space
            outlined
            dense
            lazy-rules
            v-model="textFooter"
            label="เนื้อหาคำสั่งลงท้าย (optional)"
          />
        </div>
      </div>
    </q-card-section>
    <q-card-section align="right">
      <q-btn
        for="#submitForm"
        unelevated
        dense
        class="q-px-md items-center"
        color="light-blue-10"
        label="บันทึก"
        @click="onSave"
      />
    </q-card-section>
  </q-card>
</template>
