<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";

import type {
  EditDataList,
  HistoryStatusType,
  FileObType,
} from "@/modules/11_discipline/interface/response/appealComplain";

import Form from "@/modules/11_discipline/components/8_AppealComplain/Form.vue";

const $q = useQuasar();
const mixin = useCounterMixin();
const route = useRoute();
const router = useRouter();
const { showLoader, messageError, hideLoader, success } = mixin;

const id = ref<string>(route.params.id as string);
const checkRoutePermission = ref<boolean>(route.name == "appealComplainDetail");
const historyStatusOb = reactive<HistoryStatusType>({
  status: "",
  createdFullName: "",
  createdAt: new Date(),
});

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: "",
  oc: "",
  position: "",
  profileType: "",
  lastUpdatedAt: "",
  historyStatus: [historyStatusOb],
  disciplineComplaint_Appeal_Docs: [fileOb],
});

/**
 * บันทึกข้อมูล อุทธรณ์/ร้องทุกข์
 * @param data ชุดข้อมูล
 */
async function onSubmit(data: any) {
  const dataList = {
    title: data.title,
    description: data.description,
    type: data.type,
    year: data.year,
    caseType: data.caseType,
    caseNumber: data.caseNumber,
    oc: data.oc,
    position: data.position,
    status: data.status,
    ...(data.profileType ? { profileType: data.profileType } : {}),
  };

  showLoader();
  http
    .put(config.API.appealByID(id.value), dataList)
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
      getData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/** ดึงข้อมูลจาก API หน้ารายการ */
function getData() {
  showLoader();
  http
    .get(config.API.appealByIDGet(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.profileType = dataList.profileType;
      data.oc = dataList.oc;
      data.position = dataList.position;
      data.lastUpdatedAt = dataList.lastUpdatedAt;
      data.disciplineComplaint_Appeal_Docs =
        dataList.disciplineComplaint_Appeal_Docs;
      data.historyStatus = dataList.historyStatus;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

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

<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle text-dark col-12 row items-center">
      <q-btn
        for="#backMaininvestigate"
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.push('/discipline-appealcomplain')"
      />
      {{ checkRoutePermission ? `รายละเอียด` : `แก้ไข` }}การอุทธรณ์/ร้องทุกข์
    </div>

    <Form :on-submit="onSubmit" :data="data" :get-data="getData" />
  </div>
</template>
