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

import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
import { checkPermission } from "@/utils/permissions";

import type { PropsTable } from "@/interface/index/PropsTable";
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";

import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";

const pagination = defineModel<PropsTable.Pagination>("pagination", {
  required: true,
});

const store = useDisciplineResultStore();
const attrs = ref<any>(useAttrs());
const statusFilter = ref<string>("DONE");

const option = ref<DataOption[]>(store.statusOptions);

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  count: Number,
  pass: Number,
  notpass: Number,
  inputfilter: String,
  name: String,
  icon: String,
  inputvisible: Array,
  editvisible: Boolean,
  getSearch: Function,
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
  fetchListResult: {
    type: Function,
    default: () => console.log("not function"),
  },
  openEdit: {
    type: Function,
    default: () => console.log("not function"),
  },
  openDetail: {
    type: Function,
    default: () => console.log("not function"),
  },
  filterStatus: {
    type: Function,
    default: () => console.log("not function"),
  },
  nornmalData: {
    type: Boolean,
    defualt: true,
  },
  conclude: {
    type: Boolean,
    defualt: false,
  },
  onRequest: {
    type: Function,
    required: true,
  },
});

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

function updateVisible(value: []) {
  emit("update:inputvisible", value);
}

function dataUpdate() {
  props.filterStatus(statusFilter.value);
}

function updateInput(value: string | number | null) {
  emit("update:inputfilter", value);
}
function filterFn() {
  props.getSearch?.();
}

/**
 * function ค้นหาข้อมูลใน option
 * @param val คำค้นหา
 * @param update function
 */
function filterOptionFn(val: string, update: Function) {
  update(() => {
    option.value = store.statusOptions.filter(
      (e: DataOption) => e.name.search(val) !== -1
    );
  });
}
</script>

<template>
  <div class="row q-col-gutter-sm q-pa-md">
    <div class="col-12">
      <div class="row q-col-gutter-sm">
        <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
          <q-select
            v-model="statusFilter"
            label="สถานะ"
            dense
            outlined
            emit-value
            map-options
            hide-selected
            fill-input
            option-label="name"
            option-value="id"
            :options="option"
            @update:model-value="dataUpdate"
            use-input
            @filter="filterOptionFn"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
              </q-item>
            </template>
            <template v-if="statusFilter !== 'ALL'" v-slot:append>
              <q-icon
                name="cancel"
                @click.stop.prevent="
                  (option = store.statusOptions),
                    (statusFilter = 'ALL'),
                    dataUpdate()
                "
                class="cursor-pointer"
              />
            </template>
          </q-select>
        </div>
        <q-space />
        <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
          <div class="row q-col-gutter-sm items-center">
            <div class="col justify-center row">
              <DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
            </div>
            <div class="col-7">
              <q-input
                standout
                dense
                :model-value="inputfilter"
                ref="filterRef"
                @keydown.enter.prevent="filterFn"
                @update:model-value="updateInput"
                outlined
                placeholder="ค้นหา"
              >
                <template v-slot:append>
                  <q-icon name="search" />
                </template>
                <q-tooltip
                  anchor="bottom left"
                  transition-show="scale"
                  transition-hide="scale"
                  class="text-body2"
                >
                  หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
                  หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
                >
              </q-input>
            </div>
            <div class="col-4">
              <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
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <p-table
        ref="table"
        flat
        v-bind="attrs"
        virtual-scroll
        :virtual-scroll-sticky-size-start="48"
        dense
        :rows-per-page-options="[10, 25, 50, 100]"
        v-model:pagination="pagination"
        @request="props.onRequest"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th auto-width></q-th>
            <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-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td auto-width>
              <q-btn
                flat
                round
                dense
                icon="mdi-eye"
                color="info"
                @click="openDetail(props.row.id)"
                v-if="checkPermission($route)?.attrIsGet"
              >
                <q-tooltip>รายละเอียด</q-tooltip>
              </q-btn>
              <q-btn
                v-if="
                  checkPermission($route)?.attrIsUpdate &&
                  checkPermission($route)?.attrIsGet
                "
                flat
                round
                dense
                icon="edit"
                color="edit"
                @click="openEdit(props.row.id)"
              >
                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
              </q-btn>
            </q-td>
            <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
                :class="
                  col.name === 'title' || col.name === 'disciplinaryCaseFault'
                    ? 'table_ellipsis'
                    : ''
                "
              >
                {{ col.value ?? "-" }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </p-table>
    </div>
  </div>
</template>

<style lang="scss"></style>
