<script setup lang="ts">
import { useSupportStore } from "@/modules/00_support/store/Main";
import DialogCategory from "@/modules/00_support/components/category/DialogCategory.vue";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import type { QTableProps } from "quasar";
import { useQuasar } from "quasar";
const router = useRouter();
const store = useSupportStore();
const open = ref<boolean>(false);
const currentName = ref<string>("");
const status = ref<"add" | "edit" | "delete">("add");
const categoryId = ref<string>("");
import { useCounterMixin } from "@/stores/mixin";
const { dialogRemove, convertDateDisplay, date2Thai } = useCounterMixin();

const $q = useQuasar();
const columnsCategory = [
  {
    name: "name",
    align: "left",
    label: "ประเภทของปัญหา",
    field: "name",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
    name: "createdAt",
    align: "left",
    label: "วันที่สร้าง",
    field: "createdAt",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "actions",
    align: "right",
    label: "",
    field: "",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
] satisfies QTableProps["columns"];

onMounted(async () => {
  await store.fetchCategory();
});
</script>

<template>
  <div class="flex">
    <q-btn
      flat
      round
      class="bg-teal-1 full-height q-mr-sm"
      color="primary"
      icon="mdi-arrow-left"
      dense
      @click="router.go(-1)"
    >
    </q-btn>
    <p class="toptitle text-dark items-center">จัดการประเภทของปัญหา</p>
    <q-space />
  </div>

  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
    <q-btn
      class="q-mb-sm"
      flat
      round
      color="primary"
      @click="
        () => {
          open = true;
          status = 'add';
          currentName = '';
        }
      "
      icon="mdi-plus"
    >
      <q-tooltip>เพิ่มข้อมูล</q-tooltip>
    </q-btn>
    <div>
      <d-table
        ref="table"
        :columns="columnsCategory"
        :rows="store.rowsCategory?.result"
        flat
        bordered
        :paging="true"
        dense
        class="border_custom"
      >
        <template v-slot:body-cell-createdAt="data">
          <q-td>
            {{ date2Thai(data.row.createdAt) }}
          </q-td>
        </template>

        <template v-slot:body-cell-actions="data">
          <q-td>
            <div class="align-right">
              <q-btn
                flat
                dense
                id="listViewFolderEdit"
                icon="edit"
                color="edit"
                @click="
                  () => {
                    open = true;
                    status = 'edit';
                    categoryId = data.row.id;
                    currentName = data.row.name;
                  }
                "
              >
                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
              </q-btn>

              <q-btn
                class="q-ma-sm"
                flat
                dense
                id="listViewFolderDelete"
                color="red"
                icon="mdi-delete"
                :data-testid="data.row.name"
                @click="
                  () => {
                    dialogRemove($q, () => {
                      store.deleteCategory(data.row.id);
                    });
                  }
                "
              >
                <q-tooltip>ลบข้อมูล</q-tooltip>
              </q-btn>
            </div>
          </q-td>
        </template>
      </d-table>
    </div>
  </q-card>

  <dialog-category
    v-model.open="open"
    :open="open"
    :status="status"
    :category="categoryId"
    :input="currentName"
  />
</template>

<style scoped>
.border_custom {
  border-radius: 6px !important;
  border: 1px solid #e1e1e1;
}
.align-right {
  display: flex;
  align-items: right;
  justify-content: right;
}
</style>
