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

import type { PropsTable } from "@/interface/PropsTable";
import { useLeaveStore } from "@/modules/05_leave/store";

const $q = useQuasar();
const attrs = ref<any>(useAttrs());
const leaveStore = useLeaveStore();
const { filterOption } = leaveStore;

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  count: Number,
  pass: Number,
  notpass: Number,
  total: Number,
  name: String,
  icon: String,
  inputvisible: Array,
  editvisible: Boolean,
  grid: Boolean,
  inputShow: Boolean,
  maxPage: {
    type: Number,
    require: true,
  },
  pageSize: {
    type: Number,
    require: true,
  },
  leaveType: {
    type: Object,
    require: true,
  },
  isloadingData: {
    type: Boolean,
    default: false,
  },
  sortBy: {
    type: String,
    default: "dateSendLeave",
  },
  descending: {
    type: Boolean,
    default: true,
  },
});

/**
 *  ฟังก์ชั่น emit ค่าที่กำหนด
 */
const emit = defineEmits([
  "update:filter",
  "update:Pagination",
  "update:inputvisible",
  "update:editvisible",
]);

const table = ref<any>(null);

/** ตั้งค่า pagination*/
const currentPage = ref<number>(1);

const pagination = ref<PropsTable.Pagination>({
  sortBy: props.sortBy,
  descending: props.descending,
  page: 1,
  rowsPerPage: Number(props.pageSize),
  rowsNumber: Number(props.total),
});

// Watch props เพื่ออัปเดต pagination เมื่อค่าเปลี่ยน (เฉพาะ props)
watch(
  () => [props.pageSize, props.total],
  ([newPageSize, newTotal]) => {
    pagination.value.rowsPerPage = Number(newPageSize);
    pagination.value.rowsNumber = Number(newTotal);
  },
  { immediate: true }
);

/** filter */
const year = ref<number>(leaveStore.fiscalYearyear);
const filter = ref<string>("");

/** updateVisible*/
function updateVisible(value: []) {
  emit("update:inputvisible", value);
}

/** function updateFilter*/
function filterTable() {
  emit(
    "update:filter",
    year.value,
    leaveStore.type,
    leaveStore.status,
    filter.value
  );
}

/**
 * ฟังก์ชันอัปเดตการแบ่งหน้า
 * @param p หน้า
 * @param ps ขนาดหน้า
 * @param sortBy เรียงลำดับตาม
 * @param descending เรียงลำดับจากน้อยไปมาก
 */
function updatePagination(
  p: number,
  ps: number,
  sortBy?: string,
  descending?: boolean
) {
  emit("update:Pagination", p, ps, sortBy, descending);
}

/**
 * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
 * @param requestProps ข้อมูลการร้องขอจากตาราง
 */
function onTableRequest(requestProps: PropsTable.RequestProps) {
  const newPagination = requestProps?.pagination || requestProps;
  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
  currentPage.value = newPagination.page;
  pagination.value = { ...newPagination };
  updatePagination(
    newPagination.page,
    newPagination.rowsPerPage,
    newPagination.sortBy,
    newPagination.descending
  );
}
</script>

<template>
  <div class="q-py-sm row">
    <q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
      <div class="items-center col-12 row q-col-gutter-sm">
        <datepicker
          v-if="leaveStore.tabValue === 'list'"
          v-model="year"
          class="col-xs-12 col-sm-auto"
          :locale="'th'"
          autoApply
          year-picker
          :enableTimePicker="false"
          @update:modelValue="filterTable"
        >
          <template #year="{ year }">{{ year + 543 }}</template>
          <template #year-overlay-value="{ value }">{{
            parseInt(value + 543)
          }}</template>
          <template #trigger>
            <q-input
              dense
              lazy-rules
              outlined
              :model-value="Number(year) + 543"
              :label="`${'ปีงบประมาณ'}`"
            >
              <template v-slot:prepend>
                <q-icon
                  name="event"
                  class="cursor-pointer"
                  style="color: var(--q-primary)"
                >
                </q-icon>
              </template>
            </q-input>
          </template>
        </datepicker>
        <!-- ค้นหาข้อความใน table -->
        <q-select
          fill-input
          hide-selected
          outlined
          dense
          v-model="leaveStore.type"
          :label="`${'ประเภทใบลา'}`"
          emit-value
          map-options
          option-label="name"
          :options="leaveStore.typeOptions"
          option-value="id"
          hide-bottom-space
          style="min-width: 150px"
          class="col-xs-12 col-sm-auto"
          use-input
          @update:model-value="filterTable"
          @filter="(inputValue:any,
                    doneFn:Function) => filterOption(inputValue, doneFn,'LeaveTypeOption'
                    ) "
          typeOptionsMain
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
            </q-item>
          </template>
          <template
            v-if="leaveStore.type !== '00000000-0000-0000-0000-000000000000'"
            v-slot:append
          >
            <q-icon
              name="cancel"
              @click.stop.prevent="
                (leaveStore.typeOptions = leaveStore.typeOptionsMain),
                  (leaveStore.type = '00000000-0000-0000-0000-000000000000'),
                  filterTable()
              "
              class="cursor-pointer"
            /> </template
        ></q-select>
        <q-select
          fill-input
          hide-selected
          outlined
          dense
          v-model="leaveStore.status"
          :label="`${'สถานะ'}`"
          emit-value
          map-options
          option-label="name"
          :options="leaveStore.statusOptions"
          option-value="id"
          hide-bottom-space
          style="min-width: 150px"
          class="col-xs-12 col-sm-auto"
          use-input
          @update:model-value="filterTable"
          @filter="(inputValue:any,
                    doneFn:Function) => filterOption(inputValue, doneFn,'LeaveStatusOption'
                    ) "
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
            </q-item>
          </template>
          <template v-if="leaveStore.status !== 'ALL'" v-slot:append>
            <q-icon
              name="cancel"
              @click.stop.prevent="
                (leaveStore.statusOptions = leaveStore.statusOptionsMain),
                  (leaveStore.status = 'ALL'),
                  filterTable()
              "
              class="cursor-pointer"
            /> </template
        ></q-select>
        <q-space />

        <!-- แสดงคอลัมน์ใน table -->
        <q-select
          :model-value="inputvisible"
          @update:model-value="updateVisible"
          :display-value="$q.lang.table.columns"
          multiple
          outlined
          dense
          :options="attrs.columns"
          options-dense
          option-value="name"
          map-options
          emit-value
          style="min-width: 140px"
          class="gt-xs"
        >
          <template> </template>
        </q-select>
      </div>
    </q-card>
  </div>
  <div>
    <d-table
      ref="table"
      flat
      bordered
      v-bind="attrs"
      virtual-scroll
      :virtual-scroll-sticky-size-start="48"
      dense
      :rows-per-page-options="[10, 25, 50, 100]"
      v-model:pagination="pagination"
      @request="onTableRequest"
      :grid="$q.screen.gt.xs ? false : true"
      :loading="isloadingData"
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            <span class="text-weight-medium" v-html="col.label" />
          </q-th>
        </q-tr>
      </template>
      <template #body="props">
        <slot v-bind="props" name="columns"></slot>
      </template>

      <template v-slot:item="props">
        <slot v-bind="props" name="item"></slot>
      </template>
    </d-table>
  </div>
</template>

<style lang="scss" scoped>
.icon-color {
  color: #4154b3;
}

.custom-table2 {
  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
  }

  .q-table td:nth-of-type(2) {
    z-index: 3 !important;
  }

  .q-table th:nth-of-type(2),
  .q-table td:nth-of-type(2) {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>
