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

import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useInsigniaDataStore } from "@/modules/01_metadata/stores/InsigniaStore";

import type { QTableProps } from "quasar";
import type { DataRow } from "@/modules/01_metadata/interface/response/insignia/Insignia";

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

const $q = useQuasar();
const route = useRoute();
const store = useInsigniaDataStore();
const mixin = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, messageError } = mixin;

/**
 * props
 */
const modal = defineModel("modal", { type: Boolean });

const id = ref<string>(route.params.id.toString()); // id ชั้นเครื่องราชอิสริยาภรณ์

// Table
const rows = ref<DataRow[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "name",
    required: true,
    label: "ชื่อเครื่องราชฯ",
    align: "left",
    field: "name",
    sortable: true,
  },
  {
    name: "shortName",
    align: "center",
    label: "ชื่อย่อ",
    field: "shortName",
  },
  {
    name: "insigniaType",
    align: "left",
    label: "ลำดับชั้นเครื่องราชฯ",
    field: "insigniaType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sortable: true,
  },
]);

/**
 * ฟังก์ชันการจัดลำดับการแสดงผล
 * @param from ตำแหน่งปัจจบัน
 * @param to ตำแหน่งที่ต้องการไป
 */
function onDrop(from: number, to: number) {
  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
}

/**
 * บันทึกการจัดลำดับการแสดงผล
 */
async function onSubmit() {
  dialogConfirm($q, async () => {
    const dataPost = rows.value.map((obj: DataRow) => {
      return obj.id;
    });
    showLoader();
    await http
      .put(config.API.insigniaSortOrg(id.value), { id: dataPost })
      .then(() => {
        store.row = rows.value;
        modal.value = false;
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ดูการเปลี่ยนแปลงของ modal เมื่อ  modal เป็น true
 *
 * ทำการคัดลองข้อมูลรายการข้อมูลเครื่องราชอิสริยาภรณ์มาจัดลำดับ
 */
watch(modal, () => {
  if (modal.value === true) {
    rows.value = [];
    rows.value.push(...store.row); // ดึงมาใช้ sort แล้วใน store ไม่เปลี่ยน
  }
});
</script>

<template>
  <q-dialog v-model="modal" class="dialog" persistent>
    <q-card style="min-width: 50vw">
      <form @submit.prevent="onSubmit">
        <DialogHeader
          tittle="จัดลำดับการแสดงผล"
          :close="() => (modal = false)"
        />
        <q-separator />
        <q-card-section>
          <q-table
            v-draggable-table="{
              options: {
                mode: 'row',
                onlyBody: true,
                dragHandler: 'th,td',
              },
              onDrop,
            }"
            flat
            bordered
            :rows="rows"
            :columns="columns"
            :rows-per-page-options="[100]"
            row-key="name"
            hide-bottom
            hide-pagination
            hide-header
          />
        </q-card-section>

        <q-separator />
        <q-card-actions align="right">
          <q-btn type="submit" label="บันทึก" color="public">
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </form>
    </q-card>
  </q-dialog>
</template>
