<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";

//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";

const store = useRegistryInFormationStore();
const rowsHistory = ref<any[]>([]);
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;

const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */

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

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

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" }),
  },
]);

function onHistory() {
  modalHistory.value = true;
}

/** get data */
function getData() {
  showLoader();
  http
    .get(config.API.dataUserAddress)
    .then((res) => {
      const data = res.data.result;
      formData.registrationAddress = data.registrationAddress;
      formData.registrationProvince = data.registrationProvince;
      formData.registrationDistrict = data.registrationDistrict;
      formData.registrationSubDistrict = data.registrationSubDistrict;
      formData.registrationZipCode = data.registrationZipCode;
      formData.currentAddress = data.currentAddress;
      formData.currentProvince = data.currentProvince;
      formData.currentDistrict = data.currentDistrict;
      formData.currentSubDistrict = data.currentSubDistrict;
      formData.currentZipCode = data.currentZipCode;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** get history */
function getHistory() {
  const url =
    store.typeProfile == "OFFICER"
      ? config.API.dataUserHistory("")
      : config.API.dataUserHistory("-employee");
  showLoader();
  http
    .get(url)
    .then((res) => {
      const data = res.data.result;
      rowsHistory.value = data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(() => {
  getData();
});
</script>
<template>
  <div class="col-12">
    <q-toolbar class="q-px-none">
      <span class="text-blue-6 text-weight-bold text-body1">ข้อมูลที่อยู่</span>
      <q-space />
      <q-btn
        icon="mdi-history"
        color="info"
        flat
        dense
        round
        size="14px"
        @click="onHistory"
      >
        <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
      </q-btn>
    </q-toolbar>

    <div class="row q-col-gutter-sm">
      <div class="col-12 col-md-6">
        <q-card bordered class="bg-grey-1">
          <q-toolbar>
            <q-toolbar-title class="text-subtitle2 text-bold"
              >ที่อยู่ตามทะเบียนบ้าน</q-toolbar-title
            >
          </q-toolbar>
          <q-separator />
          <div class="row q-pa-md">
            <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">ที่อยู่</div>
                <div class="col-7">
                  {{
                    formData.registrationAddress
                      ? formData.registrationAddress
                      : "-"
                  }}
                </div>
              </div>

              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
                <div class="col-7">
                  {{
                    formData.registrationProvince
                      ? formData.registrationProvince
                      : "-"
                  }}
                </div>
              </div>

              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">
                  เขต / อำเภอ
                </div>
                <div class="col-7">
                  {{
                    formData.registrationDistrict
                      ? formData.registrationDistrict
                      : "-"
                  }}
                </div>
              </div>

              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">
                  แขวง / ตำบล
                </div>
                <div class="col-7">
                  {{
                    formData.registrationSubDistrict
                      ? formData.registrationSubDistrict
                      : "-"
                  }}
                </div>
              </div>

              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">
                  รหัสไปรษณีย์
                </div>
                <div class="col-7">
                  {{
                    formData.registrationZipCode
                      ? formData.registrationZipCode
                      : "-"
                  }}
                </div>
              </div>
            </div>
          </div>
        </q-card>
      </div>
      <div class="col-12 col-md-6">
        <q-card bordered class="bg-grey-1">
          <q-toolbar>
            <q-toolbar-title class="text-subtitle2 text-bold"
              >ที่อยู่ปัจจุบัน</q-toolbar-title
            >
          </q-toolbar>
          <q-separator />
          <div class="row q-pa-md">
            <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">
                  ที่อยู่
                </div>
                <div class="col-7">
                  {{ formData.currentAddress ? formData.currentAddress : "-" }}
                </div>
              </div>
              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
                <div class="col-7">
                  {{
                    formData.currentProvince ? formData.currentProvince : "-"
                  }}
                </div>
              </div>
              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">
                  เขต / อำเภอ
                </div>
                <div class="col-7">
                  {{
                    formData.currentDistrict ? formData.currentDistrict : "-"
                  }}
                </div>
              </div>
              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">
                  แขวง / ตำบล
                </div>
                <div class="col-7">
                  {{
                    formData.currentSubDistrict
                      ? formData.currentSubDistrict
                      : "-"
                  }}
                </div>
              </div>
              <div class="row">
                <div class="col-5 text-grey-6 text-weight-medium">
                  รหัสไปรษณีย์
                </div>
                <div class="col-7">
                  {{ formData.currentZipCode ? formData.currentZipCode : "-" }}
                </div>
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </div>
  </div>

  <DialogHistory
    v-model:modal="modalHistory"
    :title="'ประวัติแก้ไขข้อมูลที่อยู่'"
    :getData="getHistory"
    :rows="rowsHistory"
    :visibleColumns="visibleColumnsHistory"
    :columns="columnsHistory"
  />
</template>
