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

import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
import { useAddressDataStore } from "@/modules/04_registryPerson/stores/Address";
import http from "@/plugins/http";
import config from "@/app.config";

import type { QTableProps } from "quasar";
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Address";
import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Address";

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

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,
  pathRegistryEmp,
} = mixin;

/**
 * props
 */
const isLeave = defineModel<boolean>("isLeave", {
  required: true,
});

const profileId = ref<string>(
  route.params.id ? route.params.id.toString() : ""
);
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));

const modal = ref<boolean>(false); //แสดง Popup แก้ไขข้อมูลที่อยู่
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 modalHistory = ref<boolean>(false); //แสดง Popup ประวัติแก้ไขข้อมูลที่อยู่
const rowsHistory = ref<ResponseObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
const filterHistory = ref<string>(""); //คำค้นหา
const visibleColumnsHistory = ref<String[]>([
  "currentAddress",
  "currentDistrict",
  "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",
    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",
    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",
    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",

    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",

    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",

    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, false, true),
    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, empType.value)
    )
    .then(async (res) => {
      Object.assign(addressData, res.data.result);
      if (addressData) {
        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;

      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 Promise.all([
          fetchProvince(),
          fetchDistrict(addressData.registrationProvinceId, "1"),
          fetchDistrict(addressData.currentProvinceId, "2"),
          fetchSubDistrict(addressData.registrationDistrictId, "1"),
          fetchSubDistrict(addressData.currentDistrictId, "2"),
        ]);
        store.profileIdBefore = profileId.value;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันเลือกจังหวัด
 * @param e  จังหวัดที่เลือก
 * @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
 */
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);
}

/**
 * ฟังก์ชันเลือก เขต / อำเภอ
 * @param e แขวง/ตำบลที่เลือก
 * @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
 */
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);
}

/**
 * ฟังก์ชันเลือก  แขวง/ตำบล
 * @param e  แขวง/ตำบล ที่เลือก
 * @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
 */
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;
  }

  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;
}

/**
 * ฟังก์ชันบันทึกข้อมูลข้อมูลที่อยู่
 */
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;
      }
      showLoader();
      await http
        .patch(
          config.API.profileNewAddressById(profileId.value, empType.value),
          {
            ...formData,
            id: undefined,
          }
        )
        .then(async () => {
          await fetchAll();
          await success($q, "บันทึกข้อมูลสำเร็จ");
          modal.value = false;
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

/**
 * ฟังก์ชันเปิด popup การแก้ไขข้อมูลข้อมูลที่อยู่
 */
async function onClickOpenDialog() {
  if (!addressData) return;
  Object.assign(formData, addressData);
  const checkDistrict = store.Ops.districtOps.some(
    (e: DataOption) => e.id === addressData.registrationDistrictId
  );
  const checkSubDistrict = store.Ops.subdistrictOps.some(
    (e: DataOption) => e.id === addressData.registrationSubDistrictId
  );
  const checkDistrictC = store.Ops.districtCOps.some(
    (e: DataOption) => e.id === addressData.currentDistrictId
  );
  const checkSubDistrictC = store.Ops.subdistrictCOps.some(
    (e: DataOption) => 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");
  }
}

/**
 * ฟังก์ชันปิด Popup การแก้ไขข้อมูลที่อยู่
 */
function clickClose() {
  Object.assign(formData, store.defaultAddressForm);
  modal.value = false;
}

/**
 * ฟังก์ชันเปิด popup ประวัติแก้ไขข้อมูลที่อยู่
 *
 * และดึงข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
 */
async function clickHistory() {
  showLoader();
  modalHistory.value = true;
  filterHistory.value = "";
  await http
    .get(config.API.profileNewAddressHisById(profileId.value, empType.value))
    .then(async (res) => {
      rowsHistory.value = await res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันกำหนดที่อยู่ปัจจุบัน
 * @param v
 */
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);
  }
);

/**
 * ทำงานเมื่อ Components ถูกเรียกใช้งาน
 */
onMounted(async () => {
  await fetchAll();
});
</script>

<template>
  <div class="row q-gutter-sm items-center">
    <div class="toptitle col text-right">
      <q-btn
        v-if="!isLeave && checkPermission($route)?.attrIsUpdate"
        flat
        round
        dense
        icon="edit"
        color="edit"
        @click="onClickOpenDialog"
      >
        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
      </q-btn>
      <q-btn
        dense
        flat
        round
        icon="mdi-history"
        color="deep-purple"
        @click="clickHistory"
      >
        <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
      </q-btn>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 col-12">
      <q-card bordered class="bg-grey-1 q-ma-sm">
        <q-card-section>
          <div class="text-bold">ที่อยู่ตามทะเบียนบ้าน</div>
        </q-card-section>
        <q-separator />
        <q-card-section>
          <div :class="$q.screen.gt.xs ? '' : 'column'">
            <!-- column 1 -->
            <div class="col-md-6 col-12 row">
              <div class="col-5 text-grey-6 text-weight-medium">ที่อยู่</div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ addressData.registrationAddress || "-" }}
                </div>
              </div>

              <div class="col-5 text-grey-6 text-weight-medium">แขวง/ตำบล</div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ adsName.regisSD || "-" }}
                </div>
              </div>

              <div class="col-5 text-grey-6 text-weight-medium">เขต/อำเภอ</div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ adsName.regisD || "-" }}
                </div>
              </div>

              <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ adsName.regisP || "-" }}
                </div>
              </div>

              <div class="col-5 text-grey-6 text-weight-medium">
                รหัสไปรษณีย์
              </div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ addressData.registrationZipCode || "-" }}
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
    <div class="col-md-6 col-12">
      <q-card bordered class="bg-grey-1 q-ma-sm">
        <q-card-section>
          <div class="text-bold">ที่อยู่ปัจจุบัน</div>
        </q-card-section>
        <q-separator />
        <q-card-section>
          <div :class="$q.screen.gt.xs ? '' : 'column'">
            <div class="col-md-6 col-12 row">
              <div class="col-5 text-grey-6 text-weight-medium">ที่อยู่</div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ addressData.currentAddress || "-" }}
                </div>
              </div>

              <div class="col-5 text-grey-6 text-weight-medium">แขวง/ตำบล</div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ adsName.currentSD || "-" }}
                </div>
              </div>

              <div class="col-5 text-grey-6 text-weight-medium">เขต/อำเภอ</div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ adsName.currentD || "-" }}
                </div>
              </div>

              <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ adsName.currentP || "-" }}
                </div>
              </div>

              <div class="col-5 text-grey-6 text-weight-medium">
                รหัสไปรษณีย์
              </div>
              <div class="col-7">
                <div class="q-py-xs">
                  {{ addressData.currentZipCode || "-" }}
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>

  <!-- Edit Dialog -->
  <q-dialog v-model="modal" persistent>
    <q-card>
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader tittle="แก้ไขข้อมูลที่อยู่" :close="clickClose" />
        <q-separator />
        <q-card-section>
          <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
                hide-selected
                fill-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
                hide-selected
                fill-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
                hide-selected
                fill-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,'districtCOps'
                      ) "
                />
              </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,'subdistrictCOps'
                      ) "
                />
              </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 label="บันทึก" id="onSubmit" type="submit" color="public">
            <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), (rowsHistory = []))"
      />
      <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
            dense
            v-model="filterHistory"
            ref="filterRef"
            outlined
            placeholder="ค้นหา"
            debounce="300"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </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"
            style="min-width: 140px"
          />
        </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.trim()"
        >
          >
          <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">
              <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>
