<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import genReport from "@/plugins/genreport";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
  EditDataList,
  HistoryStatusType,
  FileObType,
} from "@/modules/07_appealComplain/interface/response/mainType";
import Form from "@/modules/07_appealComplain/views/Form.vue";

const router = useRouter();
const route = useRoute();

const id = ref<string>(route.params.id as string);
const $q = useQuasar();
const mixin = useCounterMixin();
const {  messageError, showLoader, hideLoader } = mixin;

const historyStatusOb = reactive<HistoryStatusType>({
  status: "",
  createdAt: "",
});

const fileOb = reactive<FileObType>({
  id: "",
  pathName: "",
  fileName: "",
});

const data = reactive<EditDataList>({
  id: "",
  title: "",
  description: "",
  status: "",
  type: "",
  year: new Date().getFullYear(),
  caseType: "",
  caseNumber: "",
  fullname: "",
  citizenId: "",
  profileId: "",
  lastUpdatedAt: "",
  historyStatus: [historyStatusOb],
  disciplineComplaint_Appeal_Docs: [fileOb],
});
function getData() {
  showLoader();
  http
    .get(config.API.appealByID(id.value))
    .then((res) => {
      const dataList = res.data.result;
      data.id = dataList.id;
      data.title = dataList.title;
      data.description = dataList.description;
      data.status = dataList.status;
      data.type = dataList.type;
      data.year = dataList.year;
      data.caseType = dataList.caseType;
      data.caseNumber = dataList.caseNumber;
      data.fullname = dataList.fullname;
      data.citizenId = dataList.citizenId;
      data.profileId = dataList.profileId;
      data.lastUpdatedAt = dataList.lastUpdatedAt;
      data.disciplineComplaint_Appeal_Docs =
        dataList.disciplineComplaint_Appeal_Docs;
      data.historyStatus = dataList.historyStatus;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูลหน้า แก้ไขอุทธรณ์/ร้องทุกข์
 * @param fileName ชื่อไฟล์
 */
async function getReport(fileName: string) {
  showLoader();
  await http
    .get(config.API.appealByPrintReport(id.value))
    .then(async (res) => {
      console.log(res.data.result.data);
      const data = res.data.result;
      await genReport(data, fileName);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.push('/appeal-complain')"
        />
        แก้ไขอุทธรณ์/ร้องทุกข์
      </div>
      <Form :data="data" :get-report="getReport" />
    </div>
  </div>
</template>
