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

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

import type { PropsTable } from "@/interface/index/PropsTable";
import type { DataWorkList } from "@/modules/09_leave/interface/index/Main";

/** 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 pagination = defineModel<PropsTable.Pagination>("pagination", {
  required: true,
});

const props = defineProps({
  rows: {
    type: Object,
    require: true,
  },
  tab: {
    type: String,
    require: true,
  },
  fetchData: {
    type: Function,
    require: true,
  },
  onRequest: {
    type: Function,
    require: true,
  },
});

const modal = ref<boolean>(false); //modal แสดงรายละเอียด
const dataDetail = ref<DataWorkList>(); //ข้อมูลรายละเอียด
const modalEdit = ref<boolean>(false); //modal แก้ไขข้อมูล
const typeTab = ref<string>(""); //ประเภท tab

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

function onClickEdit(data: DataWorkList) {
  modalEdit.value = !modalEdit.value;
  dataDetail.value = modalEdit.value ? data : undefined;
}

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

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

<template>
  <p-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="[1, 10, 25, 50, 100]"
    v-model:pagination="pagination"
    @request="props.onRequest"
  >
    <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'">
            {{ 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-if="col.name == 'profileType'">
            {{
              col.value == "OFFICER"
                ? "ข้าราชการ กทม. สามัญ"
                : "ลูกจ้างประจำ กทม."
            }}
          </div>
          <div v-else>
            {{ col.value }}
          </div>
        </q-td>
      </q-tr>
    </template>
  </p-table>

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

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