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

/** import Stoer*/
import { useCounterMixin } from "@/stores/mixin";
import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";

const attrs = ref<any>(useAttrs());
const SpecialTimeStore = useSpecialTimeStore();
const mixin = useCounterMixin();

const { date2Thai } = mixin;
const { searchFilterTable } = SpecialTimeStore;

/** props*/
const props = defineProps({
  count: Number,
  pass: Number,
  notpass: Number,

  inputfilter: String,
  name: String,
  icon: String,
  inputvisible: Array,
  editvisible: Boolean,
  add: {
    type: Function,
    default: () => console.log("not function"),
  },
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
  nornmalData: {
    type: Boolean,
    defualt: true,
  },
  conclude: {
    type: Boolean,
    defualt: false,
  },
});

/**emit Function*/
const emit = defineEmits([
  "update:inputfilter",
  "update:inputvisible",
  "update:editvisible",
]);

const table = ref<any>(null);
const filterRef = ref<any>(null);

/** pagination*/
const paging = ref<boolean>(true);
const pagination = ref({
  descending: false,
  page: 1,
  rowsPerPage: 10,
});

function paginationLabel(start: string, end: string, total: string) {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
}

/**
 * function update filter
 * @param value คำค้นหา
 */
function updateInput(value: string | number | null) {
  emit("update:inputfilter", value);
}

/**
 * function updateVisible
 * @param value ค่า Visible
 */
function updateVisible(value: []) {
  emit("update:inputvisible", value);
}

function resetFilter() {
  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
  emit("update:inputfilter", "");
  filterRef.value.focus();
}
</script>
<template>
  <div class="q-pb-sm row q-col-gutter-sm">
    <!--  -->
    <div class="q-gutter-sm" v-if="nornmalData == true">
      <datepicker
        menu-class-name="modalfix"
        v-model="SpecialTimeStore.selectDate"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
        week-start="0"
        @update:model-value="searchFilterTable(SpecialTimeStore.selectDate)"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            for="selectDate"
            dense
            outlined
            lazy-rules
            :model-value="
              SpecialTimeStore.selectDate !== null
                ? date2Thai(SpecialTimeStore.selectDate)
                : null
            "
            hide-bottom-space
            :label="`${'วันที่'}`"
          >
            <template v-slot:prepend>
              <q-icon name="event" class="cursor-pointer text-primary">
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
    </div>
    <q-space />
    <!-- ค้นหาข้อความใน table -->
    <q-input
      standout
      dense
      :model-value="inputfilter"
      ref="filterRef"
      @update:model-value="updateInput"
      outlined
      debounce="300"
      placeholder="ค้นหา"
      style="max-width: 200px"
      class="col-xs-12 col-sm-3 col-md-2"
    >
      <template v-slot:append>
        <q-icon v-if="inputfilter == ''" name="search" />
        <q-icon
          v-if="inputfilter !== ''"
          name="clear"
          class="cursor-pointer"
          @click="resetFilter"
        />
      </template>
    </q-input>
    <!-- แสดงคอลัมน์ใน 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
      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
    >
      <template> </template>
    </q-select>
  </div>
  <d-table
    ref="table"
    flat
    v-bind="attrs"
    virtual-scroll
    :virtual-scroll-sticky-size-start="48"
    dense
    :pagination-label="paginationLabel"
    v-model:pagination="pagination"
  >
    <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-th auto-width />
        <q-th auto-width />
        <q-th auto-width v-if="nornmalData == true" />
      </q-tr>
    </template>
    <template #body="props">
      <slot v-bind="props" name="columns"></slot>
    </template>
  </d-table>
</template>

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

.custom-table2 {
  max-height: 64vh;

  .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>
