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

import { useCounterMixin } from "@/stores/mixin";

import DialogHeader from "@/components/DialogHeader.vue";

const mixin = useCounterMixin();
const { date2Thai } = mixin;

const modal = defineModel<boolean>("modal", { required: true });
const rows = defineModel<any[]>("rows", { required: true });

const visibleColumns = ref<string[]>(["createdFullName", "lastUpdatedAt"]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "createdFullName",
    align: "left",
    label: "ชื่อ",
    sortable: true,
    field: "createdFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "lastUpdatedAt",
    align: "left",
    label: "เวลาที่แก้ไข",
    sortable: true,
    field: "lastUpdatedAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
function close() {
  modal.value = false;
}
</script>
<template>
  <q-dialog persistent v-model="modal">
    <q-card style="min-width: 30vw">
      <DialogHeader tittle="ประวัติการแก้ไข" :close="close" />
      <q-separator />
      <q-card-section>
        <d-table
          for="table"
          ref="table"
          :columns="columns"
          :rows="rows"
          row-key="id"
          flat
          bordered
          dense
          class="custom-header-table"
          :rows-per-page-options="[10, 25, 50, 100]"
          :visible-columns="visibleColumns"
        >
          <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" class="cursor-pointer">
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <div v-if="col.name == 'lastUpdatedAt'" class="table_ellipsis">
                  {{ col.value ? date2Thai(col.value, false, true) : "-" }}
                </div>
                <div v-else class="table_ellipsis">
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>
