<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 type { FormSubDistrict } from "@/modules/01_metadata/interface/response/personal/personal";
import type { QTableProps } from "quasar";

import DialogForm from "@/modules/01_metadata/components/personal/DialogForm.vue"; // เพิ่มข้อมูล,แก้ไขข้อมูล

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const {
  messageError,
  showLoader,
  hideLoader,
  success,
  date2Thai,
  onSearchDataTable,
  dialogRemove,
} = useCounterMixin();

/** Table*/
const columns = [
  {
    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: "zipCode",
    align: "left",
    label: "รหัสไปรษณีย์",
    sortable: true,
    field: "zipCode",
    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" }),
  },
] as const satisfies QTableProps["columns"];
const visibleColumns = ref<string[]>([
  "name",
  "zipCode",
  "createdAt",
  "lastUpdatedAt",
  "lastUpdateFullName",
]);
const pagination = ref({
  sortBy: "name",
});

const id = ref<string>(route.params.id as string); // เขต/อำเภอ
const rows = ref<FormSubDistrict[]>([]); // ข้อมูลรายการแขวง/ตำบล
const rowsMain = ref<FormSubDistrict[]>([]); // ข้อมูลรายการแขวง/ตำบล
const editId = ref<string>(""); // id รายการแขวง/ตำบล
const filterKeyword = ref<string>(""); // คำค้นหา
const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
const subDistrict = ref<string>(""); //แขวง / ตำบล;
const zipCode = ref<string>(""); //รหัสไปรษณีย์
const dialogStatus = ref<string>(""); // สถานะ เพิ่มข้อมูล,แก้ไขข้อมูล
const personalName = ref<string>("แขวง/ตำบล"); //label input
const subdistrict = ref<string>(""); //ชื่อของแขวง/ตำบล

/**
 * fetch ข้อมูลรายการ ระดับการเขต/อำเภอ  ตาม id ของแขวง/ตำบล
 * - จัดการกับข้อมูล
 * - กำหนด  rows.value เท่ากับข้อมูลที่ respones
 */
async function fetchData() {
  showLoader();
  await http
    .get(config.API.orgDistrict + `/${id.value}`)
    .then(async (res) => {
      const data = await res.data.result.subDistricts;
      subdistrict.value = await res.data.result.name;
      const list = data.map((e: FormSubDistrict) => ({
        ...e,
        createdAt: e.createdAt
          ? date2Thai(new Date(e.createdAt), false, true)
          : "",
        lastUpdatedAt: e.lastUpdatedAt
          ? date2Thai(new Date(e.lastUpdatedAt), false, true)
          : "",
      }));
      rows.value = list;
      rowsMain.value = list;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * เพิ่มข้อมูลรายการแขวง/ตำบล
 * แล้ว fetch ข้อมูลรายการ แขวง/ตำบล ใหม่
 */
async function addData() {
  await http
    .post(config.API.orgSubDistrict, {
      name: subDistrict.value,
      districtId: id.value,
      zipCode: zipCode.value,
    })
    .then(async () => {
      await fetchData();
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * แก้ไขข้อมูลรายการแขวง/ตำบล
 * แล้ว fetch ข้อมูลรายการ แขวง/ตำบล ใหม่
 * @param idRow รายการแขวง/ตำบล
 */
async function editData(idRow: string) {
  await http
    .put(config.API.orgSubDistrict + `/${idRow}`, {
      name: subDistrict.value,
      districtId: id.value,
      zipCode: zipCode.value,
    })
    .then(async () => {
      await fetchData();
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

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

function serchDataTable() {
  rows.value = onSearchDataTable(
    filterKeyword.value,
    rowsMain.value,
    columns ? columns : []
  );
}

/**
 * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
 * แล้วเรียก function fetch ข้อมูลรายการแขวง/ตำบล
 */
onMounted(async () => {
  await fetchData();
});
</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)"
    />
    แขวง/ตำบล {{ `(${subdistrict})` }}
  </div>

  <q-card flat bordered>
    <div class="q-pa-md">
      <q-toolbar class="q-pa-none">
        <q-btn
          flat
          round
          color="primary"
          icon="add"
          @click.stop="
            () => {
              dialogStatus = 'create';
              dialog = true;
              subDistrict = '';
              zipCode = '';
            }
          "
        >
          <q-tooltip> เพิ่มข้อมูล </q-tooltip>
        </q-btn>
        <q-space />
        <div class="row q-gutter-sm">
          <q-input
            outlined
            dense
            v-model="filterKeyword"
            label="ค้นหา"
            @keydown.enter.prevent="serchDataTable"
          >
            <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>

      <d-table
        ref="table"
        :columns="columns"
        :rows="rows"
        row-key="name"
        flat
        bordered
        :paging="true"
        dense
        class="custom-header-table"
        :visible-columns="visibleColumns"
        v-model:pagination="pagination"
      >
        <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;
                    subDistrict = props.row.name;
                    zipCode = props.row.zipCode;
                  }
                "
              >
                <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 in props.cols" :key="col.id">
              <div>
                {{ col.value ?? "-" }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </d-table>
    </div>
  </q-card>

  <DialogForm
    v-model:dialog="dialog"
    v-model:data="subDistrict"
    v-model:zipCode="zipCode"
    v-model:personal-name="personalName"
    v-model:dialog-status="dialogStatus"
    v-model:edit-id="editId"
    :add-data="addData"
    :fetch-data="fetchData"
    :edit-data="editData"
  />
</template>
