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

import { useRouter, 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 TableDraggable from "@/modules/01_metadata/components/insignia/TableDraggable.vue";
import dialogHeader from "@/components/DialogHeader.vue";

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

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

//Table
const filterKeyword = ref<string>("");
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px; width:0px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อเครื่องราชฯ",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },

  {
    name: "shortName",
    align: "left",
    label: "ชื่อย่อ",
    sortable: true,
    field: "shortName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },

  {
    name: "insigniaType",
    align: "left",
    label: "ลำดับชั้นเครื่องราชฯ",
    sortable: true,
    field: "insigniaType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },

  {
    name: "createdAt",
    align: "left",
    label: "วันที่สร้าง",
    sortable: true,
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },

  {
    name: "lastUpdatedAt",
    align: "left",
    label: "วันที่แก้ไข",
    sortable: true,
    field: "lastUpdatedAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },

  {
    name: "lastUpdateFullName",
    align: "left",
    label: "ผู้ดำเนินการ",
    sortable: true,
    field: "lastUpdateFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },

  {
    name: "isActive",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "isActive",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },

  {
    name: "note",
    align: "left",
    label: "หมายเหตุ",
    sortable: true,
    field: "note",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "name",
  "shortName",
  "insigniaType",
  "createdAt",
  "lastUpdatedAt",
  "lastUpdateFullName",
  "isActive",
  "note",
]);

const dialogOrder = ref<boolean>(false); //จัดลำดับการแสดงผล
const dialog = ref<boolean>(false); //เพิ่มข้อมูล,แก้ไขข้อมูล

const insigniaTypeId = ref<string>(""); //ลำดับชั้นเครื่องราชอิสริยาภรณ์
const name = ref<string>("");
const shortName = ref<string>("");
const note = ref<string>("");
const isActive = ref<boolean>(false);

const dialogStatus = ref<string>(""); // สถานะเพิ่มข้อมูล,แก้ไขข้อมูล
const editId = ref<string>(""); //  id รายการข้อมูลเครื่องราชอิสริยาภรณ์ที่แก้ไข

/**
 * ดึงรายการข้อมูลเครื่องราชอิสริยาภรณ์
 * @param id ลำดับชั้นเครื่องราชอิสริยาภรณ์
 *
 */
async function fetchData(id: string) {
  showLoader();
  await http
    .get(config.API.insigniaTypeNewIdOrg(id))
    .then(async (res) => {
      title.value = res.data.result.name; // กำหนดชื่อลำดับชั้นเครื่องราชอิสริยาภรณ์
      insigniaTypeId.value = res.data.result.name;
      store.fetchData(res.data.result.insignias, res.data.result.name);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ยืนยันการบันทึกข้อมูลเครื่องราชอิสริยาภรณ์
 *  dialogStatus.value เป็น "create"  จะเพิ่มข้อมูล ถ้าไม่จะเป็นการแก้ไขข้อมูล
 */
async function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();

    // กำหนด Path API
    const path =
      dialogStatus.value === "create"
        ? config.API.insigniaOrg
        : config.API.insigniaNewIdOrg(editId.value);

    // กำหนด method
    const method = dialogStatus.value === "create" ? "post" : "put";

    // call API
    await http[method](path, {
      name: name.value,
      isActive: isActive.value,
      shortName: shortName.value,
      note: note.value == "" || note.value == null ? "" : note.value,
      insigniaTypeId: id.value,
    })
      .then(async () => {
        await fetchData(id.value);
        success($q, "บันทึกข้อมูลสำเร็จ");
        closeDialog();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ลบข้อมูลเครื่องราชอิสริยาภรณ์
 * แล้ว fetch ข้อมูลรายการ ข้อมูลเครื่องราชอิสริยาภรณ์ ใหม่
 * @param id ข้อมูลเครื่องราชอิสริยาภรณ์
 */
async function onDeleteData(idrow: string) {
  dialogRemove($q, async () => {
    showLoader();
    await http
      .delete(config.API.insigniaNewIdOrg(idrow))
      .then(async () => {
        await fetchData(id.value);
        success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ปืด popup เพิ่ม,แก้ไข ข้อมูล
 * และ กำหนดฟอร์ม เพิ่มข้อมูล,แก้ไขข้อมูลเป็น defult
 */
function closeDialog() {
  dialog.value = false;
  name.value = "";
  isActive.value = false;
  shortName.value = "";
  note.value = "";
}

/**
 * hook จำทำเมื่อมีการเรียกใช้ components
 * ทำการดึงรายการข้อมูลเครื่องราชอิสริยาภรณ์ตามลำดับชั้นเครื่องราชอิสริยาภรณ์
 */
onMounted(async () => {
  await fetchData(id.value);
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    รายการข้อมูลเครื่องราชอิสริยาภรณ์{{ title }}
  </div>

  <q-card flat bordered>
    <!-- <InsigniaList v-model:insigniaTypeName="title" /> -->
    <q-card-section>
      <div class="row">
        <div class="col-12">
          <q-toolbar style="padding: 0">
            <q-btn
              flat
              round
              color="primary"
              icon="add"
              @click.stop="
                () => {
                  dialogStatus = 'create';
                  dialog = true;
                }
              "
            >
              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
            </q-btn>
            <q-btn
              v-if="store.row.length > 0"
              flat
              round
              color="blue-6"
              icon="mdi-sort"
              @click.stop="() => (dialogOrder = true)"
            >
              <q-tooltip> จัดลำดับการแสดงผล </q-tooltip>
            </q-btn>
            <TableDraggable
              v-model:modal="dialogOrder"
              :fetchData="fetchData"
            />
            <q-space />
            <div class="row q-gutter-sm">
              <q-input
                dense
                outlined
                v-model="filterKeyword"
                placeholder="ค้นหา"
                @keydown.enter.prevent="
                  store.onSearchData(filterKeyword, columns)
                "
              >
                <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>
          </q-toolbar>
        </div>

        <div class="col-12">
          <d-table
            ref="table"
            :columns="columns"
            :rows="store.row"
            row-key="name"
            flat
            bordered
            :paging="true"
            dense
            class="custom-header-table"
            :visible-columns="visibleColumns"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th auto-width />
                <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 auto-width>
                  <q-btn
                    color="edit"
                    flat
                    dense
                    round
                    icon="edit"
                    clickable
                    @click.stop="
                      () => {
                        dialogStatus = 'edit';
                        dialog = true;
                        editId = props.row.id;
                        name = props.row.name;
                        shortName = props.row.shortName;
                        note = props.row.note;
                        isActive = props.row.isActive;
                      }
                    "
                  >
                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                  </q-btn>
                  <q-btn
                    color="red"
                    flat
                    dense
                    round
                    icon="delete"
                    @click.stop.prevent="onDeleteData(props.row.id)"
                  >
                    <q-tooltip>ลบข้อมูล</q-tooltip>
                  </q-btn>
                </q-td>
                <q-td v-for="(col, index) in props.cols" :key="col.id">
                  <div v-if="col.name == 'no'">
                    {{ props.rowIndex + 1 }}
                  </div>
                  <div v-else-if="col.name == 'isActive'">
                    <q-icon
                      v-if="col.value == false"
                      name="mdi-close"
                      color="red"
                      class="text-h5"
                    />
                    <q-icon
                      v-else
                      name="mdi-check"
                      color="positive"
                      class="text-h5"
                    />
                  </div>
                  <div v-else>
                    {{ col.value ?? "-" }}
                  </div>
                </q-td>
              </q-tr>
            </template>
          </d-table>
        </div>
      </div>
    </q-card-section>
  </q-card>

  <q-dialog v-model="dialog" class="dialog" persistent>
    <q-card style="max-width: 350px">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <dialog-header
          :tittle="
            dialogStatus == 'edit' ? 'แก้ไขเครื่องราชฯ' : 'เพิ่มเครื่องราชฯ'
          "
          :close="closeDialog"
        />

        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-input
                outlined
                :model-value="insigniaTypeId"
                label="ลำดับชั้นเครื่องราชฯ"
                dense
                lazy-rules
                borderless
                hide-bottom-space
                readonly
              />
            </div>
            <div class="col-12">
              <q-input
                ref="nameRef"
                outlined
                v-model="name"
                label="ชื่อเครื่องราชฯ"
                dense
                lazy-rules
                borderless
                :rules="[
                  (val:string) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
                ]"
                hide-bottom-space
                class="inputgreen"
              />
            </div>
            <div class="col-12">
              <q-input
                ref="shortNameRef"
                outlined
                v-model="shortName"
                label="ชื่อย่อ"
                dense
                lazy-rules
                borderless
                :rules="[
                  (val:string) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
                ]"
                hide-bottom-space
                class="inputgreen"
              />
            </div>
            <div class="col-12">
              <q-input
                outlined
                v-model="note"
                label="หมายเหตุ"
                dense
                type="textarea"
                borderless
                hide-bottom-space
                class="inputgreen"
              />
            </div>
            <div class="col-12">
              <div class="row items-center justify-between">
                <p class="q-ma-none">สถานะการใช้งาน</p>
                <label>
                  <q-checkbox v-model="isActive" color="primary" />
                  <span class="control"></span>
                </label>
              </div>
            </div>
          </div>
        </q-card-section>

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

<style scoped></style>
