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

import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import { usePagination } from "@/composables/usePagination";

import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";

const $q = useQuasar(); //ใช้ noti quasar
const router = useRouter();
const mixin = useCounterMixin();
const store = useDisciplineMainStore();
const dataInvestigateDis = useInvestigateDisStore();
const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
const { fetchList } = dataInvestigateDis;
const { pagination, params, onRequest } = usePagination(
  "",
  fetchListDisciplinary
);

const filter = ref<string>(""); //search data table

const status = ref<string>("NEW");

async function fetchListDisciplinary() {
  const body = {
    ...params.value,
    keyword: filter.value.trim(),
    status: status.value,
    ...(store.formInvestigateDisciplinary.respondentType && {
      respondentType: store.formInvestigateDisciplinary.respondentType,
    }),
    ...(store.formInvestigateDisciplinary.offenseDetails && {
      offenseDetails: store.formInvestigateDisciplinary.offenseDetails,
    }),
    ...(store.formInvestigateDisciplinary.disciplinaryFaultLevel && {
      disciplinaryFaultLevel:
        store.formInvestigateDisciplinary.disciplinaryFaultLevel,
    }),
    ...(store.formInvestigateDisciplinary.disciplinaryCaseFault && {
      disciplinaryCaseFault:
        store.formInvestigateDisciplinary.disciplinaryCaseFault.trim(),
    }),
    ...(store.formInvestigateDisciplinary.disciplinaryDate?.[0] && {
      disciplinaryDateStart: convertDateToAPI(
        store.formInvestigateDisciplinary.disciplinaryDate[0]
      ),
    }),
    ...(store.formInvestigateDisciplinary.disciplinaryDate?.[1] && {
      disciplinaryDateEnd: convertDateToAPI(
        store.formInvestigateDisciplinary.disciplinaryDate[1]
      ),
    }),
    ...(store.formInvestigateDisciplinary.dateReceived?.[0] && {
      dateReceivedStart: convertDateToAPI(
        store.formInvestigateDisciplinary.dateReceived[0]
      ),
    }),
    ...(store.formInvestigateDisciplinary.dateReceived?.[1] && {
      dateReceivedEnd: convertDateToAPI(
        store.formInvestigateDisciplinary.dateReceived[1]
      ),
    }),
  };
  showLoader();
  await http
    .post(config.API.disciplineDisciplinary(), body)
    .then(async (res) => {
      const result = res.data.result;
      pagination.value.rowsNumber = result.total;
      await fetchList(result.data);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

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

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

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

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

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

<style></style>
