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

import { checkPermission } from "@/utils/permissions";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";

/** importComponents */
import DialogDetail from "@/modules/09_leave/components/02_WorkList/DialogDetail.vue";
import DialogEdit from "@/modules/09_leave/components/02_WorkList/DialogEdit.vue";

const workStore = useWorklistDataStore();
const props = defineProps({
  rows: {
    type: Object,
    require: true,
  },
  page: {
    type: Number,
    require: true,
  },
  rowsPerPage: {
    type: Number,
    require: true,
  },
  maxPage: {
    type: Number,
    require: true,
  },
  total: {
    type: Number,
    require: true,
  },
  tab: {
    type: String,
    require: true,
  },
  fetchData: {
    type: Function,
    require: true,
  },
});

const emit = defineEmits(["update:pagination"]);

/** ข้อมูล popup */
const modal = ref<boolean>(false);
const dataDetail = ref<any>();
const modalEdit = ref<boolean>(false);

/** pagination */
const currentPage = ref<number>(1);
const pagination = ref({
  descending: false,
  page: Number(props.page),
  rowsPerPage: props.rowsPerPage,
});

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

const typeTab = ref<string>("");

/**
 * Function openPopup และแสดงรายละเอียด
 * @param data ข้อมูลรายละเอียด
 */
function clickDetail(data: any) {
  typeTab.value = props.tab as string;
  modal.value = true;
  dataDetail.value = data;
}

function onClickEdit(data: any) {
  modalEdit.value = !modalEdit.value;
  dataDetail.value = modalEdit.value ? data : [];
}

/** Function ปิด popup */
function closeDetail() {
  modal.value = false;
}

/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
  updateProp(pagination.value, currentPage.value);
});

/**
 * function updatePageSize
 * @param newPagination  PageSize
 */
function updateRowsPerPagen(newPagination: any) {
  pagination.value.rowsPerPage = newPagination.rowsPerPage;
  currentPage.value = 1;
}

onMounted(() => {
  typeTab.value = props.tab as string;
});
</script>

<template>
  <d-table
    ref="table"
    :columns="workStore.columns"
    :rows="props.rows"
    row-key="id"
    flat
    bordered
    dense
    class="custom-header-table"
    :visible-columns="workStore.visibleColumns"
    :rows-per-page-options="[10, 25, 50, 100]"
    :pagination="pagination"
    @update:pagination="updateRowsPerPagen"
  >
    <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
            dense
            round
            color="info"
            icon="mdi-eye"
            @click.prevent="clickDetail(props.row)"
          >
            <q-tooltip>รายละเอียด</q-tooltip>
          </q-btn>
          <q-btn
            v-if="
              checkPermission($route)?.attrIsGet &&
              checkPermission($route)?.attrIsUpdate &&
              typeTab === 'time-record'
            "
            flat
            dense
            round
            color="edit"
            icon="edit"
            @click.prevent="onClickEdit(props.row)"
          >
            <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'">
            {{
              (currentPage - 1) * Number(pagination.rowsPerPage) +
              props.rowIndex +
              1
            }}
          </div>
          <div v-else-if="col.name == 'checkInLocation'">
            <q-item style="padding: 0">
              <q-item-section>
                <q-item-label> {{ props.row.checkInLocation }}</q-item-label>
                <q-item-label caption lines="2">{{
                  props.row.checkInLat + "  " + props.row.checkInLon
                }}</q-item-label>
              </q-item-section>
            </q-item>
          </div>
          <div v-else-if="col.name == 'checkOutLocation'">
            <q-item style="padding: 0">
              <q-item-section>
                <q-item-label> {{ props.row.checkOutLocation }}</q-item-label>
                <q-item-label caption lines="2">{{
                  props.row.checkOutLat + "  " + props.row.checkOutLon
                }}</q-item-label>
              </q-item-section>
            </q-item>
          </div>
          <div v-else>
            {{ col.value }}
          </div>
        </q-td>
      </q-tr>
    </template>
    <template v-slot:pagination="scope">
      ทั้งหมด {{ total }} รายการ
      <q-pagination
        v-model="currentPage"
        active-color="primary"
        color="dark"
        :max="Number(props.maxPage)"
        size="sm"
        boundary-links
        direction-links
      ></q-pagination>
    </template>
  </d-table>

  <DialogDetail
    :modal="modal"
    :detail="dataDetail"
    :typeTab="typeTab"
    :close="closeDetail"
  />

  <DialogEdit
    :modal="modalEdit"
    :detail="dataDetail"
    :close="onClickEdit"
    :fetchData="props.fetchData"
  />
</template>
<style scoped></style>
