<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar, type QTableProps } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { usePagination } from "@/composables/usePagination";

import type { MainData } from "@/modules/05_placement/interface/index/Survey";

const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const { pagination, params, onRequest } = usePagination("", getData);

const year = ref<number | null>(new Date().getFullYear());

const rows = ref<MainData[]>([]);
const filterKeyword = ref<string>("");

/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullname",
    align: "left",
    label: "ผู้ทดลองฯ",
    sortable: true,
    field: "fullname",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "answer1",
    align: "left",
    label: "ความคิดเห็น",
    sortable: true,
    field: "answer1",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "answer2",
    align: "left",
    label: "ปัญหาและอุปสรรค",
    sortable: true,
    field: "answer2",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "answer3",
    align: "left",
    label: "ความพึงพอใจ",
    sortable: true,
    field: "answer3",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "createdAt",
    align: "left",
    label: "วันที่",
    sortable: true,
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val, row) {
      return date2Thai(row.createdAt, false, true);
    },
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "fullname",
  "position",
  "answer1",
  "answer2",
  "answer3",
  "createdAt",
]);

async function getData() {
  showLoader();
  await http
    .get(config.API.probationSurvey, {
      params: {
        ...params.value,
        year: year.value,
        keyword: filterKeyword.value.trim(),
      },
    })
    .then(async (res) => {
      const result = res.data.result;
      pagination.value.rowsNumber = result.total;
      rows.value = result.data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function getSearch() {
  pagination.value.page = 1;
  getData();
}

onMounted(async () => {
  await getData();
});
</script>

<template>
  <q-card flat>
    <div class="row q-col-gutter-sm">
      <div class="col-12">
        <div class="row q-col-gutter-sm">
          <div>
            <datepicker
              v-model="year"
              style="width: 150px"
              :locale="'th'"
              autoApply
              year-picker
              :enableTimePicker="false"
              @update:model-value="getSearch()"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  dense
                  outlined
                  hide-bottom-space
                  :model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
                  :label="`${'ปี พ.ศ.'}`"
                >
                </q-input>
              </template>
            </datepicker>
          </div>

          <q-space />
          <q-input
            standout
            dense
            v-model="filterKeyword"
            ref="filterRef"
            outlined
            placeholder="ค้นหาจากชื่อ - นามสกุล /ตำแหน่ง"
            @keydown.enter.prevent="getSearch()"
            style="width: 350px"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>

          <q-select
            v-model="visibleColumns"
            multiple
            outlined
            dense
            options-dense
            :display-value="$q.lang.table.columns"
            emit-value
            map-options
            :options="columns"
            option-value="name"
            style="min-width: 140px"
          />
        </div>
      </div>
      <div class="col-12">
        <p-table
          ref="table"
          :columns="columns"
          :rows="rows"
          row-key="personal_id"
          flat
          :visible-columns="visibleColumns"
          bordered
          :paging="true"
          dense
          :rows-per-page-options="[10, 25, 50, 100]"
          v-model:pagination="pagination"
          @request="onRequest"
        >
          <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-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <div v-if="col.name == 'no'">
                  {{ props.rowIndex + 1 }}
                </div>

                <div v-else>
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
            </q-tr>
          </template>
        </p-table>
      </div>
    </div>
  </q-card>
</template>
