<template>
  <q-table
    ref="table"
    flat
    :class="
      $q.screen.gt.xs
        ? 'q-px-md custom-header-table2'
        : 'q-px-sm custom-header-table2 custom-table-height'
    "
    v-bind="attrs"
    dense
    virtual-scroll
    :virtual-scroll-sticky-size-start="48"
    :pagination-label="paginationLabel"
    :pagination="initialPagination"
    :rows-per-page-options="[0]"
  >
    <template v-slot:top="props">
      <div class="q-py-sm col-12 row">
        <q-space />
        <div class="items-center row col-12 q-gutter-x-sm">
          <q-btn
            size="13px"
            color="grey-7"
            dense
            flat
            round
            @click="onTab"
            class="shadow-1"
            icon="chevron_right"
            v-if="!isTab"
          >
            <q-tooltip>เปิด</q-tooltip>
          </q-btn>
          <q-btn
            size="12px"
            flat
            round
            color="blue"
            @click="clickSearchPanel"
            icon="mdi-filter-variant"
            v-show="searchPanel == false"
          >
            <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
          </q-btn>
          <q-space />
          <q-input
            v-show="searchPanel == false"
            standout
            dense
            :model-value="inputfilter"
            ref="filterRef"
            @update:model-value="updateInput"
            outlined
            debounce="300"
            placeholder="ค้นหา"
            style="max-width: 200px"
          >
            <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
            style="min-width: 140px"
            class="gt-xs q-ml-sm"
          />
        </div>
      </div>
      <div class="items-center">
        <q-slide-transition
          v-show="searchPanel"
          class="q-mb-sm"
          :duration="150"
        >
          <div class="my-content">
            <div
              class="row q-pa-xs items-center bg-blue-1"
              style="border-radius: 4px 4px 0px 0px"
            >
              <q-icon
                size="20px"
                color="blue-9"
                name="mdi-filter-variant"
                class="q-mx-sm"
              />
              <div class="text-blue-9 text-subtitle2 text-weight-medium">
                <span>ค้นหาข้อมูลทะเบียนประวัติ</span>
              </div>
              <q-space />
              <q-btn
                color="blue-9"
                icon="mdi-close"
                size="12px"
                flat
                round
                dense
                @click="clickSearchPanel"
              />
            </div>
            <q-separator color="blue-1" />
            <div class="dialog-card-contain">
              <q-card-section class="q-pa-md">
                <div class="row col-12 q-col-gutter-sm">
                  <div
                    :class="
                      $q.screen.lt.md
                        ? ' row col-12 q-col-gutter-xs'
                        : 'no-wrap row col-12 q-col-gutter-xs'
                    "
                  >
                    <selector
                      class="col-3"
                      hide-bottom-space
                      :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
                      outlined
                      dense
                      lazy-rules
                      :model-value="employeeClass"
                      emit-value
                      map-options
                      :options="employeeClassOps"
                      option-label="name"
                      option-value="id"
                      :label="`${'ประเภท'}`"
                      use-input
                      input-debounce="0"
                      @update:model-value="updateEmployeeClass"
                    />
                    <!-- @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
                      ) " -->
                    <q-input
                      class="col-3"
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="profileId"
                      hide-bottom-space
                      label="เลขประจำตัวประชาชน"
                      @update:model-value="updateProfileId"
                      type="number"
                    />
                    <q-input
                      class="col-2"
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="fullName"
                      hide-bottom-space
                      label="ชื่อ-นามสกุล"
                      @update:model-value="updateFullname"
                    />
                    <datepicker
                      class="col-2"
                      menu-class-name="modalfix"
                      :model-value="retireYear"
                      :locale="'th'"
                      autoApply
                      year-picker
                      :enableTimePicker="false"
                      @update:model-value="updateRetireYear"
                      clearable
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          class="inputgreen cursor-pointer q-mb-sm"
                          hide-bottom-space
                          outlined
                          dense
                          borderless
                          :model-value="
                            retireYear == null ? null : retireYear + 543
                          "
                          :label="`${'ปีเกษียณ'}`"
                          clearable
                          @clear="clearDate"
                        >
                          <!-- <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template> -->
                        </q-input>
                      </template>
                    </datepicker>
                    <q-input
                      class="col-2"
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="govAge"
                      hide-bottom-space
                      label="อายุราชการ(ปี)"
                      type="number"
                      @update:model-value="updateGovAge"
                    />
                  </div>

                  <div
                    :class="
                      $q.screen.lt.md
                        ? ' row col-12 q-col-gutter-xs'
                        : 'no-wrap row col-12 q-col-gutter-xs'
                    "
                  >
                    <q-input
                      v-if="employeeClass == 'officer'"
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="positionPath"
                      hide-bottom-space
                      label="ตำแหน่งในสายงาน"
                      @update:model-value="updatePositionPath"
                      class="col-3"
                    />
                    <q-input
                      v-if="employeeClass == 'officer'"
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="positionLevel"
                      hide-bottom-space
                      label="ระดับตำแหน่ง"
                      @update:model-value="updatePositionLevel"
                      class="col-3"
                    />
                    <q-input
                      v-if="employeeClass == 'officer'"
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="positionExecutive"
                      hide-bottom-space
                      label="ตำแหน่งทางการบริหาร"
                      @update:model-value="updatePositionExecutive"
                      class="col-3"
                    />
                    <q-input
                      v-if="employeeClass != 'officer'"
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="employeePosition"
                      hide-bottom-space
                      label="ตำแหน่ง"
                      @update:model-value="updateEmployeePosition"
                      class="col-3"
                    />
                    <q-input
                      v-if="employeeClass != 'officer'"
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="employeeLevel"
                      hide-bottom-space
                      label="ระดับชั้นงาน"
                      @update:model-value="updateEmployeeLevel"
                      class="col-3"
                    />
                    <q-input
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="posNo"
                      hide-bottom-space
                      label="ตำแหน่งเลขที่"
                      @update:model-value="updatePosNo"
                      class="col-3"
                    />
                  </div>
                  <div
                    :class="
                      $q.screen.lt.md
                        ? ' row col-12 q-col-gutter-xs'
                        : 'no-wrap row col-12 q-col-gutter-xs'
                    "
                  >
                    <datepicker
                      class="col-2"
                      menu-class-name="modalfix"
                      :model-value="reportYear"
                      :locale="'th'"
                      autoApply
                      year-picker
                      :enableTimePicker="false"
                      @update:model-value="updateReportYear"
                      clearable
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          class="inputgreen cursor-pointer q-mb-sm"
                          hide-bottom-space
                          outlined
                          dense
                          borderless
                          :model-value="
                            reportYear == null ? null : reportYear + 543
                          "
                          :label="`${'ปีงบประมาณ'}`"
                          clearable
                          @clear="clearReportDate"
                        >
                          <!-- <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template> -->
                        </q-input>
                      </template>
                    </datepicker>
                    <q-input
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="reportNo"
                      hide-bottom-space
                      label="เลขที่คำสั่ง"
                      @update:model-value="updateReportNo"
                      class="col-3"
                    />
                    <q-input
                      clearable
                      dense
                      outlined
                      lazy-rules
                      :model-value="reportType"
                      hide-bottom-space
                      label="ประเภทคำสั่ง"
                      @update:model-value="updateReportType"
                      class="col-3"
                    />
                  </div>
                  <div class="col-12 row items-center">
                    <q-toggle
                      dense
                      :model-value="isShowRetire"
                      color="primary"
                      @update:model-value="updateIsShowRetire"
                      class="q-pr-md"
                    >
                      แสดงข้อมูลผู้พ้นจากราชการ
                    </q-toggle>
                    <q-toggle
                      dense
                      :model-value="isProbation"
                      color="primary"
                      @update:model-value="updateIsProbation"
                    >
                      ทดลองปฏิบัติหน้าที่ราชการ
                    </q-toggle>
                    <q-space />
                    <div>
                      <q-btn
                        dense
                        color="primary"
                        icon="mdi-magnify"
                        label="ค้นหา"
                        class="q-px-md"
                        @click="doSearch"
                      />
                    </div>
                  </div>
                  <!-- <div class="col-12 row q-col-gutter-y-md">
                    <div class="row q-gutter-md">
                      <q-radio
                        dense
                        :model-value="profileType"
                        val="officer"
                        label="ข้าราชการสามัญ"
                        class="q-pt-sm"
                        @update:model-value="updateProfileType"
                      />
                      <q-radio
                        dense
                        :model-value="profileType"
                        val="employee"
                        class="q-pt-sm"
                        @update:model-value="updateProfileType"
                      >
                        ลูกจ้าง
                      </q-radio>
                    </div>
                    <q-space />
                    <div>
                      <q-btn
                        dense
                        color="primary"
                        icon="mdi-magnify"
                        label="ค้นหา"
                        class="q-px-md"
                        @click="doSearch"
                      />
                    </div>
                  </div> -->
                </div>
              </q-card-section>
            </div>
          </div>
        </q-slide-transition>
      </div>
    </template>
    <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">{{ col.label }}</span>
        </q-th>
        <q-th auto-width />
      </q-tr>
    </template>
    <template #body="props">
      <slot v-bind="props" name="columns"></slot>
    </template>
  </q-table>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type {
  Pagination,
  DataOption,
} from "@/components/information/interface/store/main";

const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
const searchPanel = ref<boolean>(true);
const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
});
const employeeClassOps = ref<DataOption[]>([
  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
  //   { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
  { id: "perm", name: "ลูกจ้างประจำ" },
  { id: "temp", name: "ลูกจ้างชั่วคราว" },
]);

const props = defineProps({
  inputfilter: String,
  inputvisible: Array,
  profileId: String,
  employeeClass: String,
  fullName: String,
  oldFullName: String,
  isShowRetire: Boolean,
  isProbation: Boolean,
  //   profileType: String,
  retireYear: Number || null,
  govAge: Number || null,
  positionPath: String,
  positionLevel: String,
  positionExecutive: String,
  employeePosition: String,
  employeeLevel: String,
  posNo: String,
  reportYear: Number || null,
  reportNo: String,
  reportType: String,
  isTab: {
    type: Boolean,
    default: true,
  },
  doSearch: {
    type: Function,
    default: () => console.log("not function"),
  },
  onExport: {
    type: Function,
    default: () => console.log("not function"),
  },
  onTab: {
    type: Function,
    default: () => console.log("not function"),
  },
});

const emit = defineEmits([
  "update:inputfilter",
  "update:inputvisible",
  "update:profileId",
  "update:employeeClass",
  "update:fullName",
  "update:oldFullName",
  "update:oldName",
  "update:retireYear",
  "update:govAge",
  "update:isShowRetire",
  //   "update:profileType",
  "update:isProbation",
  "update:positionPath",
  "update:positionLevel",
  "update:positionExecutive",
  "update:employeePosition",
  "update:employeeLevel",
  "update:posNo",
  "update:reportYear",
  "update:reportNo",
  "update:reportType",
]);

const updateInput = (value: string | number | null) => {
  emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
  emit("update:inputvisible", value);
};

const updateProfileId = (value: string | number | null) => {
  emit("update:profileId", value);
};
const updateEmployeeClass = (value: string | number | null) => {
  emit("update:employeeClass", value);
};
const updateFullname = (value: string | number | null) => {
  emit("update:fullName", value);
};
const updateRetireYear = (value: string | number | null) => {
  emit("update:retireYear", value);
};
const updateGovAge = (value: string | number | null) => {
  emit("update:govAge", value);
};
const updateIsShowRetire = (value: string | number | null) => {
  emit("update:isShowRetire", value);
};
const updateIsProbation = (value: string | number | null) => {
  emit("update:isProbation", value);
};
const updatePositionPath = (value: string | number | null) => {
  emit("update:positionPath", value);
};
const updatePositionLevel = (value: string | number | null) => {
  emit("update:positionLevel", value);
};
const updatePositionExecutive = (value: string | number | null) => {
  emit("update:positionExecutive", value);
};
const updateEmployeePosition = (value: string | number | null) => {
  emit("update:employeePosition", value);
};
const updateEmployeeLevel = (value: string | number | null) => {
  emit("update:employeeLevel", value);
};
const updatePosNo = (value: string | number | null) => {
  emit("update:posNo", value);
};
const updateReportYear = (value: string | number | null) => {
  emit("update:reportYear", value);
};
const updateReportNo = (value: string | number | null) => {
  emit("update:reportNo", value);
};
const updateReportType = (value: string | number | null) => {
  emit("update:reportType", value);
};
// const updateProfileType = (value: string | number | null) => {
//   emit("update:profileType", value);
// };

const clearDate = () => {
  emit("update:retireYear", null);
};
const clearReportDate = () => {
  emit("update:reportYear", null);
};

const clickSearchPanel = () => {
  emit("update:retireYear", null);
  emit("update:govAge", null);
  emit("update:oldName", null);
  emit("update:oldFullName", null);
  emit("update:fullName", null);
  emit("update:profileId", null);
  emit("update:employeeClass", null);
  searchPanel.value = !searchPanel.value;
};

const paginationLabel = (start: string, end: string, total: string) => {
  return start + "-" + end + " ใน " + total;
};

const doSearch = () => {
  props.doSearch();
};

const onExport = () => {
  props.onExport();
};

const onTab = () => {
  props.onTab();
};

const resetFilter = () => {
  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
  emit("update:inputfilter", "");
  filterRef.value.focus();
};
</script>
<style lang="scss">
.icon-color {
  color: #4154b3;
}

.my-content {
  background: #fff;
  border: 1px solid rgba(133, 133, 133, 0.2);
  border-radius: 5px;
}
.custom-table-height {
  height: auto !important;
}
.custom-header-table2 {
  .q-table__top {
    padding: 0px !important;
  }
  .q-table__bottom {
    border-top: none !important;
  }
  .q-table__middle {
    border-radius: 5px;
    border: 1px solid rgba(133, 133, 133, 0.2) !important;
  }
  .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;
    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>
