<template>
  <div class="toptitle text-dark col-12 row items-center">
    ประวัติการยื่นขอพระราชทานเหรียญจักรพรรดิมาลา
  </div>
  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
    <q-tabs
      v-model="tab"
      align="left"
      class="bg-white text-grey"
      active-color="primary"
      indicator-color="primary"
    >
      <q-tab name="yes" label="คนที่ยื่นขอ" />
      <q-tab name="no" label="คนที่ไม่ยื่นขอ" />
    </q-tabs>
    <q-separator />
    <div class="q-py-md q-px-lg">
      <!-- <div>
        <label class="q-mr-sm">รอบ</label>
        <q-btn
          flat
          round
          de
          color="grey"
          icon="mdi-menu-left"
          :class="getArrow(arrow)"
          @click="clickRound"
        />
      </div>
      <Transition>
        <div v-if="arrow" class="bg-base rounded-borders q-pa-md">
          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
            <div class="col-xs-6 col-md-2">
              <datepicker
                menu-class-name="modalfix"
                v-model="dateGoverment"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="full-width datepicker bg-white"
                    :model-value="
                      dateGoverment != null ? date2Thai(dateGoverment) : null
                    "
                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-xs-6 col-md-2">
              <datepicker
                menu-class-name="modalfix"
                v-model="dateReceiver"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="full-width datepicker bg-white"
                    :model-value="
                      dateReceiver != null ? date2Thai(dateReceiver) : null
                    "
                    :label="`${'วันที่ได้รับ'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-xs-6 col-md-2">
              <q-input
                class="bg-white"
                outlined
                dense
                lazy-rules
                v-model="issue"
                :label="`${'ฉบับ'}`"
                hide-bottom-space
              />
            </div>
            <div class="col-xs-6 col-md-2">
              <q-input
                class="bg-white"
                outlined
                dense
                lazy-rules
                v-model="book"
                :label="`${'เล่มที่'}`"
                hide-bottom-space
              />
            </div>
            <div class="col-xs-6 col-md-2">
              <q-input
                class="bg-white"
                outlined
                dense
                lazy-rules
                v-model="volume"
                :label="`${'เล่ม'}`"
                hide-bottom-space
              />
            </div>
            <div class="col-xs-6 col-md-2">
              <q-input
                class="bg-white"
                outlined
                dense
                lazy-rules
                v-model="section"
                :label="`${'ตอนที่'}`"
                hide-bottom-space
              />
            </div>
            <div class="col-xs-12 col-md-6">
              <q-file
                class="bg-white"
                outlined
                dense
                v-model="government"
                label="ราชกิจจานุเบกษา"
                hide-bottom-space
                lazy-rules
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" color="primary" />
                </template>
              </q-file>
            </div>
            <div class="col-xs-12 col-md-6">
              <q-file
                class="bg-white"
                outlined
                dense
                v-model="document"
                label="เอกสารประกอบ"
                hide-bottom-space
                lazy-rules
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" color="primary" />
                </template>
              </q-file>
            </div>
          </div>
        </div>
      </Transition> -->
      <div :class="marginTop(arrow)">
        <div class="col-12 row q-pb-sm items-center">
          <selector
            outlined
            dense
            lazy-rules
            v-model="capYears"
            hide-bottom-space
            :label="`${'ปีงบประมาณ'}`"
            emit-value
            map-options
            option-label="name"
            :options="capYearsOption"
            option-value="id"
            use-input
            input-debounce="0"
            style="min-width: 150px"
            class="gt-xs q-ml-sm"
            @filter="(inputValue:string,
                        doneFn:Function) => filterSelector(inputValue, doneFn,'capYearsOption'
                        ) "
          />
          <q-space />
          <div class="items-center" style="display: flex">
            <!-- ค้นหาข้อความใน table -->
            <q-input
              standout
              dense
              v-model="filter"
              ref="filterRef"
              outlined
              debounce="300"
              placeholder="ค้นหา"
              style="max-width: 200px"
              class="q-ml-sm"
            >
              <template v-slot:append>
                <q-icon v-if="filter == ''" name="search" />
                <q-icon
                  v-if="filter !== ''"
                  name="clear"
                  class="cursor-pointer"
                  @click="resetFilter"
                />
              </template>
            </q-input>
            <!-- แสดงคอลัมน์ใน table -->
            <q-select
              v-model="visibleColumns"
              :display-value="$q.lang.table.columns"
              multiple
              outlined
              dense
              :options="columns"
              options-dense
              option-value="name"
              map-options
              emit-value
              style="min-width: 150px"
              class="gt-xs q-ml-sm"
            />
          </div>
        </div>
        <d-table
          :rows="rows"
          :columns="columns"
          :visible-columns="visibleColumns"
          :filter="filter"
          row-key="name"
        >
          <template v-slot:body-cell="props">
            <q-td :props="props">
              <div v-if="props.col.name == 'no'">
                {{ props.rowIndex + 1 }}
              </div>

              <div v-else>
                {{ props.value }}
              </div>
            </q-td>
          </template>
        </d-table>
      </div>
    </div>
  </q-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";

import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import type { QTableProps, QInput } from "quasar";

// const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai } = mixin;

const tab = ref<string>("yes");
const arrow = ref<boolean>(false);

// const dateGoverment = ref<Date>(new Date());
// const dateReceiver = ref<Date>(new Date());
// const issue = ref<string>("");
// const book = ref<string>("");
// const volume = ref<string>("");
// const section = ref<string>("");
// const government = ref<any>(null);
// const document = ref<any>(null);

const capYears = ref<string>("");
const capYearsOption = ref<DataOption[]>([]);
const capYearsOptionFilter = ref<DataOption[]>([]);

const visibleColumns = ref<String[]>([
  "no",
  "cardid",
  "name",
  "position",
  "range",
  "salary",
  "zone",
  "school",
  "date",
]);
const filterRef = ref<QInput>();
const filter = ref<string>("");
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    field: "no",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "cardid",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    field: "cardid",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ - นามสกุล",
    field: "name",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    field: "position",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "range",
    align: "left",
    label: "อันดับ",
    field: "range",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "salary",
    align: "left",
    label: "เงินเดือน",
    field: "salary",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "zone",
    align: "left",
    label: "เขต",
    field: "zone",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "school",
    align: "left",
    label: "โรงเรียน",
    field: "school",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "date",
    align: "left",
    label: "วันที่ยื่นขอ",
    field: "date",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);
const rows = ref<any>([
  {
    no: "1",
    cardid: "1XXXXXXXXXXXX",
    name: "นางสาวรัชภรณ์ ภักดี",
    position: "กกก",
    range: "1",
    salary: "XXXXXX",
    zone: "1",
    school: "โรงเรียน",
    date: date2Thai(new Date()),
  },
  {
    no: "2",
    cardid: "1XXXXXXXXXXXX",
    name: "นางสาวรัชภรณ์ ภักดี",
    position: "กกก",
    range: "1",
    salary: "XXXXXX",
    zone: "1",
    school: "โรงเรียน",
    date: date2Thai(new Date()),
  },
  {
    no: "3",
    cardid: "1XXXXXXXXXXXX",
    name: "นางสาวรัชภรณ์ ภักดี",
    position: "กกก",
    range: "1",
    salary: "XXXXXX",
    zone: "1",
    school: "โรงเรียน",
    date: date2Thai(new Date()),
  },
]);

onMounted(() => {
  const op2: DataOption[] = [
    { id: "1", name: "2566" },
    { id: "2", name: "2565" },
    { id: "3", name: "2564" },
  ];

  capYearsOption.value = op2;
  capYearsOptionFilter.value = op2;
});

const clickRound = () => {
  arrow.value = !arrow.value;
};

const resetFilter = () => {
  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
  filter.value = "";
  filterRef.value!.focus();
};

const filterSelector = (val: any, update: Function, filtername: string) => {
  switch (filtername) {
    case "capYearsOption":
      update(() => {
        capYearsOption.value = capYearsOptionFilter.value.filter(
          (v: DataOption) => v.name!.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
};

// const getArrow = (val: boolean) => {
//   return {
//     "arrow cursor-pointer": !val,
//     "arrow-active cursor-pointer": val,
//   };
// };

const marginTop = (val: boolean) => {
  return {
    "": !val,
    "q-mt-md": val,
  };
};
</script>
<style lang="scss" scoped>
.arrow {
  transition: transform 0.5s;
}

.arrow-active {
  transition: transform 0.5s;
  transform: rotate(-90deg);
}

.bg-base {
  background-color: #efefef;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
