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

import { checkPermission } from "@/utils/permissions";
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";

const leaveStore = useLeavelistDataStore();
const router = useRouter();

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

/** ข้อมูลหัวตาราง รายการลา */
const columnsLeave = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "leaveTypeName",
    align: "left",
    label: "ประเภทการลา",
    sortable: true,
    field: "leaveTypeName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    field: "citizenId",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullName",
    align: "left",
    label: "ผู้ยื่นใบลา",
    sortable: true,
    field: "fullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "agency",
    align: "left",
    label: "หน่วยงาน",
    sortable: true,
    field: "agency",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "org",
    align: "left",
    label: "ส่วนราชการ",
    sortable: true,
    field: "org",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "level",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateSendLeave",
    align: "left",
    label: "วันที่ยื่นใบลา",
    sortable: true,
    field: "dateSendLeave",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateLeave",
    align: "left",
    label: "วันที่ลา",
    sortable: true,
    field: "dateLeave",
    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",
  },
]);
const visibleColumnsLeave = ref<string[]>([
  "no",
  "leaveTypeName",
  "citizenId",
  "fullName",
  "dateSendLeave",
  "dateLeave",
  "agency",
  "org",
  "position",
  "level",
  "status",
]);

const columnsReject = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "leaveTypeName",
    align: "left",
    label: "ประเภทการลา",
    sortable: true,
    field: "leaveTypeName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullName",
    align: "left",
    label: "ผู้ยื่นยกเลิกใบลา",
    sortable: true,
    field: "fullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateSendLeave",
    align: "left",
    label: "วันที่ขอยกเลิก",
    sortable: true,
    field: "dateSendLeave",
    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",
  },
]);
const visibleReject = ref<string[]>([
  "no",
  "leaveTypeName",
  "fullName",
  "dateSendLeave",
  "status",
]);

const props = defineProps({
  getList: Function,
  rows: {
    type: Object,
    require: true,
  },
  page: {
    type: Number,
    require: true,
  },
  rowsPerPage: {
    type: Number,
    require: true,
  },
  maxPage: {
    type: Number,
    require: true,
  },
  totalList: {
    type: Number,
    require: true,
  },
  dataToobar: Object,
});

/** ไปหน้ารายละเอียด */
function redirectToDetail(id: string) {
  const routePrefix = leaveStore.tabMenu === "1" ? "/leave" : "/leave-reject";
  router.push(`${routePrefix}/detail/${id}`);
}

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

/**
 * แปลง สถานะ เป็น text
 * @param val
 */
function convert(val: any) {
  const filtertype = props.dataToobar?.find(
    (e: any) => e.id === val.leaveTypeId
  );
  const type = filtertype?.code;
  if (type == "LV-006" && val.hajjDayStatus == false) {
    return "ลาอุปสมบท";
  } else if (type == "LV-006" && val.hajjDayStatus == true) {
    return "ลาประกอบพิธีฮัจญ์";
  } else {
    return val.leaveTypeName;
  }
}

/** Hook*/
onMounted(() => {
  if (leaveStore.tabMenu === "1") {
    leaveStore.visibleColumns = visibleColumnsLeave.value;
    leaveStore.columns = columnsLeave.value;
  } else if (leaveStore.tabMenu === "2") {
    leaveStore.visibleColumns = visibleReject.value;
    leaveStore.columns = columnsReject.value;
  }
});
</script>

<template>
  <d-table
    ref="table"
    :columns="leaveStore.columns"
    :rows="leaveStore.rows"
    row-key="id"
    flat
    bordered
    :paging="true"
    dense
    class="custom-header-table"
    :visible-columns="leaveStore.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">
        <q-td auto-width>
          <q-btn
            v-if="checkPermission($route)?.attrIsGet"
            flat
            round
            dense
            icon="mdi-eye"
            color="info"
            @click.prevent="redirectToDetail(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.pageSize + props.rowIndex + 1
            }}
          </div>
          <div v-else-if="col.name == 'leaveTypeName'">
            {{ convert(props.row) }}
          </div>

          <div v-else class="table_ellipsis">
            {{ 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>
