<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { QTableProps } from "quasar";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
import { useRouter } from "vue-router";

import { checkPermission } from "@/utils/permissions";

const router = useRouter();
const complainstStore = useComplainstDataStore();

const total = defineModel<number>("total", { required: true });
const totalList = defineModel<number>("totalList", { required: true });
const pagination = defineModel<any>("pagination", { required: true });

const emit = defineEmits(["update:pagination"]);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  getList: Function,
  filterTable: {
    type: String,
    default: "",
  },
  toptitle: {
    type: Number,
    require: true,
  },
});

/** หัวข้อที่เเสดงในตาราง */
const visibleColumns = ref<string[]>([
  "no",
  "title",
  "dateReceived",
  "respondentType",
  "offenseDetails",
  "createdAt",
  "levelConsideration",
  "dateConsideration",
  "status",
]);

/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "center",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "title",
    align: "left",
    label: "เรื่องร้องเรียน",
    sortable: true,
    field: "title",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateReceived",
    align: "left",
    label: "วันที่รับเรื่อง",
    sortable: true,
    field: "dateReceived",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "respondentType",
    align: "left",
    label: "ผู้ถูกร้องเรียน",
    sortable: true,
    field: "respondentType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "offenseDetails",
    align: "left",
    label: "ลักษณะความผิด",
    sortable: true,
    field: "offenseDetails",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "levelConsideration",
    align: "left",
    label: "ระดับการพิจารณา",
    sortable: true,
    field: "levelConsideration",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateConsideration",
    align: "left",
    label: "วันที่กำหนดพิจารณา",
    sortable: true,
    field: "dateConsideration",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "status",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

/**
 * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
 * @param id ไอดีระบุ
 */
function OpenEdit(id: string) {
  router.push(`/discipline/complaints/${id}`);
}

/** ส่งค่ากลับไปหน้าหลัก */
function updateProp(newPagination: any, page: number) {
  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
  emit("update:pagination", newPagination, page);
}

/**
 * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
 * @param id ไอดีระบุ
 */
function onDetail(id: string) {
  router.push(`/discipline/complaints-detail/${id}`);
}

function updatePagination(newPagination: any) {
  pagination.value.page = 1;
  pagination.value.rowsPerPage = newPagination.rowsPerPage;
}

/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
onMounted(() => {
  complainstStore.columns = columns.value;
  complainstStore.visibleColumns = visibleColumns.value;
});
</script>

<template>
  <d-table
    id="table"
    ref="table"
    :columns="columns"
    :rows="complainstStore.rows"
    row-key="subject"
    flat
    bordered
    :paging="true"
    dense
    class="custom-header-table"
    :visible-columns="complainstStore.visibleColumns"
    :rows-per-page-options="[10, 25, 50, 100]"
    @update:pagination="updatePagination"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
        <q-th auto-width></q-th>
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span class="text-weight-medium">{{ col.label }}</span>
        </q-th>
      </q-tr>
    </template>
    <template v-slot:body="props">
      <q-tr :props="props" style="height: 40px">
        <q-td>
          <q-btn
            v-if="checkPermission($route)?.attrIsGet"
            id="addComplaints"
            for="addComplaints"
            dense
            flat
            round
            color="info"
            icon="mdi-eye"
            @click="onDetail(props.row.id)"
            ><q-tooltip>รายละเอียด</q-tooltip></q-btn
          >
          <q-btn
            v-if="
              checkPermission($route)?.attrIsUpdate &&
              checkPermission($route)?.attrIsGet
            "
            id="addComplaints"
            for="addComplaints"
            dense
            flat
            round
            color="edit"
            icon="edit"
            @click="OpenEdit(props.row.id)"
            ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
          >
        </q-td>
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div v-if="col.name == 'no'">
            {{
              (pagination.page - 1) * pagination.rowsPerPage +
              props.rowIndex +
              1
            }}
          </div>
          <div v-else-if="col.name === 'title'" class="table_ellipsis">
            {{ props.row.title }}
          </div>
          <div v-else>
            {{ col.value }}
          </div>
        </q-td>
      </q-tr>
    </template>
    <template v-slot:pagination="scope">
      ทั้งหมด {{ total }} รายการ
      <q-pagination
        v-model="pagination.page"
        active-color="primary"
        color="dark"
        :max="Number(totalList)"
        size="sm"
        boundary-links
        direction-links
        :max-pages="5"
        @update:model-value="props.getList?.()"
      ></q-pagination>
    </template>
  </d-table>
</template>

<style scoped></style>
