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

/** importType*/
import type { DataOption } from "@/modules/09_leave/interface/index/Main";

/** importStores */
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";

/** useStore */
const workStore = useWorklistDataStore();
const mixin = useCounterMixin();
const { date2Thai } = mixin;

const filetStatus = defineModel<string>("filetStatus", {
  required: true,
});
const roleStatus = defineModel<string>("roleStatus", {
  required: true,
});
const keyword = defineModel<string>("keyword", {
  required: true,
});

/** props จาก Tab 1*/
const props = defineProps({
  onSearchData: {
    type: Function,
    require: true,
  },
});

const optionMain = ref<DataOption[]>([
  { id: "ALL", name: "ทั้งหมด" },
  { id: "NORMAL", name: "ปกติ" },
  { id: "LATE", name: "สาย" },
  { id: "ABSENT", name: "ขาดราชการ" },
]);

const roleMainOp = ref<DataOption[]>([
  { id: "ALL", name: "ทั้งหมด" },
  { id: "OFFICER", name: "ข้าราชการ กทม. สามัญ" },
  { id: "EMPLOYEE", name: "ลูกจ้างประจำ กทม." },
]);
const option = ref<DataOption[]>(optionMain.value);
const roleOp = ref<DataOption[]>(roleMainOp.value);

/** function ค้นหาข้อมูลแล้วไปอัปเดท props*/
function filterFn() {
  props.onSearchData?.();
}

/**
 * function ค้นหาข้อมูลใน option
 * @param val คำค้นหา
 * @param update function
 */
function filterOptionFn(val: string, update: Function, type?: string) {
  if (type == "role") {
    update(() => {
      roleOp.value = roleMainOp.value.filter(
        (e: DataOption) => e.name.search(val) !== -1
      );
    });
  } else {
    update(() => {
      option.value = optionMain.value.filter(
        (e: DataOption) => e.name.search(val) !== -1
      );
    });
  }
}

/** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
function calculateMaxDate() {
  const today = new Date();
  today.setDate(today.getDate());
  return today;
}
</script>

<template>
  <div class="row col-12 q-col-gutter-sm q-mb-sm">
    <div class="col-xs-12 col-sm-4 col-md-2">
      <datepicker
        v-model="workStore.selectDate"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
        week-start="0"
        :max-date="calculateMaxDate()"
        @update:model-value="filterFn"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            for="selectDate"
            dense
            outlined
            :model-value="
              workStore.selectDate !== null
                ? date2Thai(workStore.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>
    <div class="col-xs-12 col-sm- col-md-3">
      <q-select
        for="selectStatus"
        emit-value
        map-options
        outlined
        dense
        option-value="id"
        option-label="name"
        label="ประเภทตำแหน่ง"
        use-input
        v-model="roleStatus"
        hide-selected
        fill-input
        :options="roleOp"
        @update:model-value="filterFn"
        @filter="(inputValue:string,
                    doneFn:Function) => filterOptionFn(inputValue,doneFn,'role')"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
        <template v-if="roleStatus !== 'ALL'" v-slot:append>
          <q-icon
            name="cancel"
            @click.stop.prevent="
              (roleOp = roleMainOp), (roleStatus = 'ALL'), filterFn()
            "
            class="cursor-pointer"
          />
        </template>
      </q-select>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-2">
      <q-select
        for="selectStatus"
        emit-value
        map-options
        outlined
        dense
        option-value="id"
        option-label="name"
        label="สถานะ"
        use-input
        v-model="filetStatus"
        hide-selected
        fill-input
        :options="option"
        @update:model-value="filterFn"
        @filter="filterOptionFn"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
        <template v-if="filetStatus !== 'ALL'" v-slot:append>
          <q-icon
            name="cancel"
            @click.stop.prevent="
              (option = optionMain), (filetStatus = 'ALL'), filterFn()
            "
            class="cursor-pointer"
          />
        </template>
      </q-select>
    </div>
    <q-space />
    <div class="col-xs-12 col-sm-5 col-md-2">
      <q-input
        for="filterTable"
        dense
        outlined
        v-model="keyword"
        label="ค้นหา"
        @keydown.enter.prevent="filterFn"
      >
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="visibleColumns"
        v-model="workStore.visibleColumns"
        multiple
        outlined
        dense
        options-dense
        :display-value="$q.lang.table.columns"
        emit-value
        map-options
        :options="workStore.columns"
        option-value="name"
      />
    </div>
  </div>
</template>

<style scoped></style>
