<script setup lang="ts">
import { onMounted, ref, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useAddressDataStore } from "@/modules/04_registryNew/stores/Address";

import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Address";
import type { RequestObject } from "@/modules/04_registryNew/interface/request/Address";

const $q = useQuasar();
const store = useAddressDataStore();
const mixin = useCounterMixin();
const route = useRoute();
const {
  fetchProvince,
  fetchDistrict,
  fetchSubDistrict,
  findData,
  filterSelector,
} = store;
const {
  date2Thai,
  success,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
} = mixin;
const profileId = ref<string>(
  route.params.id ? route.params.id.toString() : ""
);

const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const modal = ref<boolean>(false);
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<ResponseObject[]>([]);
const filterHistory = ref<string>("");

const id = ref<string>("");
const rawSameAddress = ref<string>("0");
const sameAddress = ref<string>("0");
const addressData = reactive<ResponseObject>(store.defaultAddress);
const formData = reactive<RequestObject>(store.defaultAddressForm);

const adsName = reactive({
  regisP: "",
  regisD: "",
  regisSD: "",

  currentP: "",
  currentD: "",
  currentSD: "",
});

const dataLabel = {
  registrationAddress: "ที่อยู่ตามทะเบียนบ้าน",
  registrationProvince: "จังหวัด",
  registrationDistrict: "เขต / อำเภอ",
  registrationSubDistrict: "แขวง / ตำบล",
  registrationZipCode: "รหัสไปรษณีย์",

  currentAddress: "ที่อยู่ปัจจุบัน",
  currentProvince: "จังหวัด",
  currentDistrict: "เขต / อำเภอ",
  currentSubDistrict: "แขวง / ตำบล",
  currentZipCode: "รหัสไปรษณีย์",

  registrationSame: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
};

const visibleColumnsHistory = ref<String[]>([
  "currentAddress",
  "currentDistrict",
  "currentProvince",
  "currentSubDistrict",
  "currentZipCode",
  "registrationAddress",
  "registrationDistrict",
  "registrationProvince",
  "registrationSame",
  "registrationSubDistrict",
  "registrationZipCode",
  "lastUpdateFullName",
  "lastUpdatedAt",
]);

const columnsHistory = ref<QTableProps["columns"]>([
  {
    name: "registrationAddress",
    align: "left",
    label: "ที่อยู่ตามทะเบียนบ้าน",
    sortable: true,
    field: "registrationAddress",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "registrationProvince",
    align: "left",
    label: "จังหวัดตามทะเบียนบ้าน",
    sortable: true,
    field: "registrationProvince",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (v) => (v ? v.name : "-"),
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "registrationDistrict",
    align: "left",
    label: "เขต/อำเภอตามทะเบียนบ้าน",
    sortable: true,
    field: "registrationDistrict",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (v) => (v ? v.name : "-"),
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "registrationSubDistrict",
    align: "left",
    label: "แขวง/ตำบลตามทะเบียนบ้าน",
    sortable: true,
    field: "registrationSubDistrict",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (v) => (v ? v.name : "-"),
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "registrationZipCode",
    align: "left",
    label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
    sortable: true,
    field: "registrationZipCode",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "registrationSame",
    align: "left",
    label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
    sortable: true,
    field: (v) =>
      v.registrationAddress === v.currentAddress &&
      v.registrationZipCode === v.currentZipCode
        ? "ใช่"
        : "ไม่",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "currentAddress",
    align: "left",
    label: "ที่อยู่ปัจจุบัน",
    sortable: true,
    field: "currentAddress",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "currentProvince",
    align: "left",
    label: "จังหวัดปัจจุบัน",
    sortable: true,
    field: "currentProvince",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (v) => (v ? v.name : "-"),
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "currentDistrict",
    align: "left",
    label: "เขต/อำเภอปัจจุบัน",
    sortable: true,
    field: "currentDistrict",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (v) => (v ? v.name : "-"),
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "currentSubDistrict",
    align: "left",
    label: "แขวง/ตำบลปัจจุบัน",
    sortable: true,
    field: "currentSubDistrict",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (v) => (v ? v.name : "-"),
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "currentZipCode",
    align: "left",
    label: "รหัสไปรษณีย์ปัจจุบัน",
    sortable: true,
    field: "currentZipCode",
    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: "lastUpdatedAt",
    align: "left",
    label: "วันที่แก้ไข",
    sortable: true,
    field: "lastUpdatedAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (v) => date2Thai(v),
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

async function getData() {
  showLoader();
  await http
    .get(config.API.profileNewAddressByProfileId(profileId.value))
    .then((res) => {
      Object.assign(addressData, res.data.result);

      if (addressData) {
        id.value = addressData.id;
        addressData.currentAddress === addressData.registrationAddress &&
        addressData.currentZipCode === addressData.registrationZipCode &&
        addressData.currentAddress &&
        addressData.registrationAddress &&
        addressData.currentZipCode &&
        addressData.registrationZipCode
          ? (rawSameAddress.value = "1")
          : (rawSameAddress.value = "0");
      }
      sameAddress.value = rawSameAddress.value;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

async function selectProvince(e: string | null, name: string) {
  if (!e) return;
  if (name == "1") {
    formData.registrationDistrictId = "";
    formData.registrationSubDistrictId = "";
    formData.registrationZipCode = "";
  } else {
    formData.currentDistrictId = "";
    formData.currentSubDistrictId = "";
    formData.currentZipCode = "";
  }
  await fetchDistrict(e, name);
}

async function selectDistrict(e: string | null, name: string) {
  if (!e) return;
  if (name == "1") {
    formData.registrationSubDistrictId = "";
    formData.registrationZipCode = "";
  } else {
    formData.currentSubDistrictId = "";
    formData.currentZipCode = "";
  }
  await fetchSubDistrict(e, name);
}

function selectSubDistrict(e: string | null, name: string) {
  if (!e) return;
  if (name == "1") {
    const findcode = store.Ops.subdistrictOps.filter((r) => r.id == e);
    const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
    formData.registrationZipCode = namecode;
  } else {
    const findcode = store.Ops.subdistrictCOps.filter((r) => r.id == e);
    const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
    formData.currentZipCode = namecode;
  }
}

async function fetchAll() {
  await getData();
  if (!store.profileIdBefore) {
    store.profileIdBefore = profileId.value;
  }
  if (
    store.Ops.provinceOps.length === 0 ||
    store.Ops.districtOps.length === 0 ||
    store.Ops.districtCOps.length === 0 ||
    store.Ops.subdistrictOps.length === 0 ||
    store.Ops.subdistrictCOps.length === 0 ||
    store.profileIdBefore !== profileId.value
  ) {
    await fetchProvince();
    await fetchDistrict(addressData.registrationProvinceId, "1");
    await fetchDistrict(addressData.currentProvinceId, "2");
    await fetchSubDistrict(addressData.registrationDistrictId, "1");
    await fetchSubDistrict(addressData.currentDistrictId, "2");
    store.profileIdBefore = profileId.value;
  }

  adsName.regisP = findData(
    store.Ops.provinceOps,
    addressData.registrationProvinceId
  ).name;
  adsName.regisD = findData(
    store.Ops.districtOps,
    addressData.registrationDistrictId
  ).name;
  adsName.regisSD = findData(
    store.Ops.subdistrictOps,
    addressData.registrationSubDistrictId
  ).name;

  adsName.currentP = findData(
    store.Ops.provinceOps,
    addressData.currentProvinceId
  ).name;
  adsName.currentD = findData(
    store.Ops.districtCOps,
    addressData.currentDistrictId
  ).name;
  adsName.currentSD = findData(
    store.Ops.subdistrictCOps,
    addressData.currentSubDistrictId
  ).name;
}

async function editData() {
  showLoader();
  await http
    .patch(config.API.profileNewAddressById(id.value), {
      ...formData,
      id: undefined,
    })
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
      fetchAll();
      modal.value = false;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function clickClose() {
  Object.assign(formData, store.defaultAddressForm);
  modal.value = false;
}

async function onClickOpenDialog() {
  if (!addressData) return;
  await Object.assign(formData, addressData);
  const checkDistrict = await store.Ops.districtOps.some(
    (e: any) => e.id === addressData.registrationDistrictId
  );
  const checkSubDistrict = await store.Ops.subdistrictOps.some(
    (e: any) => e.id === addressData.registrationSubDistrictId
  );
  const checkDistrictC = await store.Ops.districtCOps.some(
    (e: any) => e.id === addressData.currentDistrictId
  );
  const checkSubDistrictC = await store.Ops.subdistrictCOps.some(
    (e: any) => e.id === addressData.currentSubDistrictId
  );

  modal.value = true;
  sameAddress.value = rawSameAddress.value;

  if (!checkDistrict || !checkSubDistrict) {
    await fetchDistrict(addressData.registrationProvinceId, "1");
    await fetchSubDistrict(addressData.registrationDistrictId, "1");
  }
  if (!checkDistrictC || !checkSubDistrictC) {
    await fetchDistrict(addressData.currentProvinceId, "2");
    await fetchSubDistrict(addressData.currentDistrictId, "2");
  }
}

async function clickHistory() {
  modalHistory.value = true;
  await http
    .get(config.API.profileNewAddressHisById(id.value))
    .then((res) => {
      rowsHistory.value = res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      if (sameAddress.value === "1") {
        formData.currentAddress = formData.registrationAddress;
        formData.currentProvinceId = formData.registrationProvinceId;
        formData.currentDistrictId = formData.registrationDistrictId;
        formData.currentSubDistrictId = formData.registrationSubDistrictId;
        formData.currentZipCode = formData.registrationZipCode;
        store.Ops.districtCOps = store.Ops.districtOps;
        store.Ops.subdistrictCOps = store.Ops.subdistrictOps;
      }
      editData();
      modal.value = false;
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

function sameAddressToggle(v: string) {
  if (v === "0") {
    formData.currentAddress = "";
    formData.currentProvinceId = "";
    formData.currentDistrictId = "";
    formData.currentSubDistrictId = "";
    formData.currentZipCode = "";
    store.Ops.districtCOps = [];
    store.Ops.subdistrictCOps = [];
  }
}

watch(
  () => sameAddress.value,
  (v) => {
    sameAddressToggle(v);
  }
);

onMounted(async () => {
  await fetchAll();
});
</script>
<template>
  <div class="row q-gutter-sm items-center">
    <div class="toptitle col text-right q-gutter-x-sm">
      <q-btn
        flat
        round
        dense=""
        icon="mdi-pencil-outline"
        color="primary"
        @click="onClickOpenDialog"
      >
        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
      </q-btn>
      <q-btn dense flat round icon="mdi-history" color="info" @click="clickHistory">
        <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
      </q-btn>
    </div>
  </div>

  <q-card bordered class="my-card bg-grey-1 q-pa-md">
    <div :class="$q.screen.gt.xs ? 'row' : 'column'">
      <!-- column 1 -->
      <div class="col-md-6 col-12 row">
        <div class="col-6 text-grey-6 text-weight-medium">
          <div
            v-for="label in Object.keys(dataLabel).slice(0, 5)"
            class="q-py-xs"
          >
            {{ dataLabel[label as keyof typeof dataLabel] }}
          </div>
        </div>
        <!-- data -->
        <div class="col-6">
          <div class="q-py-xs">
            {{ addressData.registrationAddress || "-" }}
          </div>
          <div class="q-py-xs">
            {{ adsName.regisP || "-" }}
          </div>
          <div class="q-py-xs">
            {{ adsName.regisD || "-" }}
          </div>
          <div class="q-py-xs">
            {{ adsName.regisSD || "-" }}
          </div>
          <div class="q-py-xs">
            {{ addressData.registrationZipCode || "-" }}
          </div>
        </div>
      </div>

      <!-- column 2 -->
      <!-- <div
        class="text-grey-6 text-weight-medium"
        v-if="addressData.same === '1'"
      >
        ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
      </div> -->
      <div class="col-md-6 col-12 row">
        <div class="col-6 text-grey-6 text-weight-medium">
          <div
            v-for="label in Object.keys(dataLabel).slice(5, 10)"
            class="q-py-xs"
          >
            {{ dataLabel[label as keyof typeof dataLabel] }}
          </div>
        </div>
        <!-- data -->
        <div class="col-6">
          <div class="q-py-xs">
            {{ addressData.currentAddress || "-" }}
          </div>
          <div class="q-py-xs">
            {{ adsName.currentP || "-" }}
          </div>
          <div class="q-py-xs">
            {{ adsName.currentD || "-" }}
          </div>
          <div class="q-py-xs">
            {{ adsName.currentSD || "-" }}
          </div>
          <div class="q-py-xs">
            {{ addressData.currentZipCode || "-" }}
          </div>
        </div>
      </div>
    </div>
  </q-card>

  <!-- Edit Dialog -->
  <q-dialog v-model="modal" persistent>
    <q-card>
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader tittle="แก้ไขข้อมูลที่อยู่" :close="clickClose" />
        <q-separator color="grey-4" />
        <q-card-section style="max-height: 60vh" class="scroll">
            <div class="col-12 q-pb-xs">
              <q-input
                dense
                outlined
                lazy-rules
                hide-bottom-space
                type="textarea"
                class="inputgreen"
                v-model="formData.registrationAddress"
                :label="dataLabel.registrationAddress"
                :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
              />
            </div>
            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
              <div class="col-xs-6 col-sm-6 col-md-6">
                <q-select
                  dense
                  outlined
                  use-input
                  lazy-rules
                  emit-value
                  map-options
                  hide-bottom-space
                  option-value="id"
                  option-label="name"
                  input-debounce="0"
                  class="inputgreen"
                  v-model="formData.registrationProvinceId"
                  :options="store.Ops.provinceOps"
                  :label="dataLabel.registrationProvince"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
                  @update:model-value="(value:string) => selectProvince(value, '1')"
                  @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
                      ) "
                />
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6">
                <q-select
                  dense
                  outlined
                  use-input
                  lazy-rules
                  emit-value
                  map-options
                  hide-bottom-space
                  option-value="id"
                  option-label="name"
                  input-debounce="0"
                  class="inputgreen"
                  v-model="formData.registrationDistrictId"
                  :options="store.Ops.districtOps"
                  :label="dataLabel.registrationDistrict"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
                  @update:model-value="(value:string) => selectDistrict(value, '1')"
                  @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
                      ) "
                />
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6">
                <q-select
                  dense
                  outlined
                  use-input
                  lazy-rules
                  emit-value
                  map-options
                  hide-bottom-space
                  option-value="id"
                  option-label="name"
                  input-debounce="0"
                  class="inputgreen"
                  v-model="formData.registrationSubDistrictId"
                  :options="store.Ops.subdistrictOps"
                  :label="dataLabel.registrationSubDistrict"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
                  @update:model-value="(value:string) => selectSubDistrict(value, '1')"
                  @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
                      ) "
                />
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6">
                <q-input
                  dense
                  readonly
                  outlined
                  lazy-rules
                  hide-bottom-space
                  v-model="formData.registrationZipCode"
                  :label="dataLabel.registrationZipCode"
                />
              </div>
            </div>
            <!-- same address ? -->
            <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
              <label class="text-medium"
                >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
              >
              <q-radio
                dense
                val="1"
                label="ใช่"
                checked-icon="task_alt"
                class="inputgreen"
                v-model="sameAddress"
                unchecked-icon="panorama_fish_eye"
              />
              <q-radio
                dense
                val="0"
                label="ไม่"
                checked-icon="task_alt"
                class="inputgreen"
                v-model="sameAddress"
                unchecked-icon="panorama_fish_eye"
              />
            </div>
            <!-- current address -->
            <div v-if="sameAddress === '0'">
              <div class="col-12 q-pb-xs">
                <q-input
                  dense
                  outlined
                  lazy-rules
                  hide-bottom-space
                  type="textarea"
                  class="inputgreen"
                  v-model="formData.currentAddress"
                  :label="dataLabel.currentAddress"
                  :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
                />
              </div>
              <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
                <div class="col-xs-6 col-sm-6 col-md-6">
                  <q-select
                    dense
                    outlined
                    use-input
                    lazy-rules
                    emit-value
                    map-options
                    hide-bottom-space
                    option-value="id"
                    option-label="name"
                    input-debounce="0"
                    class="inputgreen"
                    v-model="formData.currentProvinceId"
                    :options="store.Ops.provinceOps"
                    :label="dataLabel.currentProvince"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
                    @update:model-value="(value:string) => selectProvince(value, '2')"
                    @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
                      ) "
                  />
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                  <q-select
                    dense
                    outlined
                    use-input
                    lazy-rules
                    emit-value
                    map-options
                    hide-bottom-space
                    option-value="id"
                    option-label="name"
                    input-debounce="0"
                    class="inputgreen"
                    v-model="formData.currentDistrictId"
                    :options="store.Ops.districtCOps"
                    :label="dataLabel.currentDistrict"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
                    @update:model-value="(value:string) => selectDistrict(value, '2')"
                    @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
                      ) "
                  />
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                  <q-select
                    dense
                    outlined
                    use-input
                    lazy-rules
                    emit-value
                    map-options
                    hide-bottom-space
                    option-value="id"
                    option-label="name"
                    input-debounce="0"
                    class="inputgreen"
                    v-model="formData.currentSubDistrictId"
                    :options="store.Ops.subdistrictCOps"
                    :label="dataLabel.currentSubDistrict"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
                    @update:model-value="(value:string) => selectSubDistrict(value, '2')"
                    @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
                      ) "
                  />
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                  <q-input
                    dense
                    readonly
                    outlined
                    lazy-rules
                    hide-bottom-space
                    v-model="formData.currentZipCode"
                    :label="dataLabel.registrationZipCode"
                  />
                </div>
              </div>
            </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn
            dense
            unelevated
            label="บันทึก"
            id="onSubmit"
            type="submit"
            color="public"
            class="q-px-md"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalHistory" persistent>
    <q-card style="min-width: 80%">
      <DialogHeader
        tittle="ประวัติแก้ไขข้อมูลที่อยู่"
        :close="() => (modalHistory = false)"
      />
      <q-separator color="grey-4" />

      <q-card-section style="max-height: 50vh" class="scroll">
        <div class="row q-gutter-sm q-mb-sm">
          <q-space />
          <q-input
            standout
            dense
            v-model="filterHistory"
            ref="filterRef"
            outlined
            placeholder="ค้นหา"
            debounce="300"
          >
            <template v-slot:append>
              <q-icon
                v-if="filterHistory == ''"
                name="search"
                @click.stop.prevent="filterHistory = ''"
                class="cursor-pointer"
              />
              <q-icon
                v-if="filterHistory"
                name="cancel"
                @click.stop.prevent="filterHistory = ''"
                class="cursor-pointer"
              />
            </template>
          </q-input>
          <q-select
            v-model="visibleColumnsHistory"
            multiple
            outlined
            dense
            options-dense
            :display-value="$q.lang.table.columns"
            emit-value
            map-options
            :options="columnsHistory"
            option-value="name"
            options-cover
            style="min-width: 150px"
          />
        </div>
        <d-table
          ref="table"
          flat
          bordered
          dense
          :columns="columnsHistory"
          :rows="rowsHistory"
          :paging="true"
          :rows-per-page-options="[10, 25, 50, 100]"
          :visible-columns="visibleColumnsHistory"
          :filter="filterHistory"
        >
          >
          <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.id">
                <div>
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
