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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import { usePagination } from "@/composables/usePagination";

import Table from "@/modules/11_discipline/components/4_Result/Table.vue";

const $q = useQuasar(); // show dialog
const router = useRouter();
const mixin = useCounterMixin();
const storeResult = useDisciplineResultStore();
const store = useDisciplineMainStore();
const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
const { fetchList } = storeResult;
const { pagination, params, onRequest } = usePagination("", fetchListResult);

const filter = ref<string>("");
const status = ref<string>("DONE");

/** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
async function fetchListResult() {
  const body = {
    ...params.value,
    keyword: filter.value.trim(),
    status: status.value,
    ...(store.formResult.respondentType && {
      respondentType: store.formResult.respondentType,
    }),
    ...(store.formResult.offenseDetails && {
      offenseDetails: store.formResult.offenseDetails,
    }),
    ...(store.formResult.disciplinaryFaultLevel && {
      disciplinaryFaultLevel: store.formResult.disciplinaryFaultLevel,
    }),
    ...(store.formResult.disciplinaryCaseFault && {
      disciplinaryCaseFault: store.formResult.disciplinaryCaseFault.trim(),
    }),
    ...(store.formResult.disciplinaryDate?.[0] && {
      disciplinaryDateStart: convertDateToAPI(
        store.formResult.disciplinaryDate[0]
      ),
    }),
    ...(store.formResult.disciplinaryDate?.[1] && {
      disciplinaryDateEnd: convertDateToAPI(
        store.formResult.disciplinaryDate[1]
      ),
    }),
    ...(store.formResult.resultDisciplineType && {
      resultDisciplineType: store.formResult.resultDisciplineType.trim(),
    }),
    ...(store.formResult.resultTitleType && {
      resultTitleType: store.formResult.resultTitleType.trim(),
    }),
    ...(store.formResult.resultOc && {
      resultOc: store.formResult.resultOc.trim(),
    }),
    ...(store.formResult.resultYear && {
      resultYear: store.formResult.resultYear,
    }),
  };
  showLoader();
  await http
    .post(config.API.listResult(), body)
    .then(async (res) => {
      const result = res.data.result;
      pagination.value.rowsNumber = result.total;
      await fetchList(result.data);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ไปหน้าแก้ไข
 * @param id ไอดีเฉพาะ รายบุคคล
 */
function openEdit(id: string) {
  router.push(`/discipline-result/${id}`);
}
/**
 * ไปหน้าแก้ไข
 * @param id ไอดีเฉพาะ รายบุคคล
 */
function openDetail(id: string) {
  router.push(`/discipline-result-detail/${id}`);
}

function filterStatus(statusReturn: string) {
  status.value = statusReturn;
  getSearch();
}

function getSearch() {
  pagination.value.page = 1;
  fetchListResult();
}

/**เมื่อเริ่มโหลดหน้า
 * ส่งข้อมูลจำลองไปยัง store
 */
onMounted(async () => {
  await fetchListResult();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการสรุปผลการพิจารณาความผิดทางวินัย
  </div>
  <q-card flat bordered>
    <Table
      style="max-height: 80vh"
      :rows="storeResult.rows"
      :columns="storeResult.columns"
      :visible-columns="storeResult.visibleColumns"
      v-model:inputfilter="filter"
      v-model:inputvisible="storeResult.visibleColumns"
      :nornmalData="true"
      :paging="true"
      :titleText="''"
      :fetchListResult="fetchListResult"
      :get-search="getSearch"
      :open-edit="openEdit"
      :open-detail="openDetail"
      :filterStatus="filterStatus"
      v-model:pagination="pagination"
      :on-request="onRequest"
    />
  </q-card>
</template>

<style></style>
