<!-- card ข้อมูลที่อยู่ -->
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";

import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";

import { useRoute } from "vue-router";
import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";

import type {
  AddressOps,
  Address as AddressType,
  optionData,
  AddressData,
} from "@/modules/05_placement/interface/index/Main";
import type { PropType } from "vue";

const props = defineProps({
  statusEdit: {
    type: Boolean,
    required: true,
  },
  notiNoEdit: {
    type: Function,
    default: () => console.log("not function"),
  },
  fetch: {
    type: Function,
    default: () => console.log("not function"),
  },
  data: {
    type: Object as PropType<AddressType>,
    default: AddressDataDefualt,
  },
});
const emit = defineEmits(["update:statusEdit"]);

const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
const edit = ref<boolean>(false);
const addressData = ref<AddressType>(props.data);
const myform = ref<any>();
const Ops = ref<AddressOps>({
  provinceOps: [],
  districtOps: [],
  districtCOps: [],
  subdistrictOps: [],
  subdistrictCOps: [],
});
const OpsFilter = ref<AddressOps>({
  provinceOps: [],
  districtOps: [],
  districtCOps: [],
  subdistrictOps: [],
  subdistrictCOps: [],
});

const registAddress = reactive<AddressData>({
  subDistrictId: "",
  zipCode: "",
  districtId: "",
  provinceId: "",
});

const currentAddress = reactive<AddressData>({
  subDistrictId: "",
  zipCode: "",
  districtId: "",
  provinceId: "",
});

onMounted(async () => {
  await getNewData();
  emit("update:statusEdit", false);
});

const filterSelector = (val: any, update: Function, refData: string) => {
  switch (refData) {
    case "provinceOps":
      update(() => {
        Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
          (v: optionData) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "districtOps":
      update(() => {
        Ops.value.districtOps = OpsFilter.value.districtOps.filter(
          (v: optionData) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "districtCOps":
      update(() => {
        Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
          (v: optionData) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "subdistrictOps":
      update(() => {
        Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
          (v: optionData) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "subdistrictCOps":
      update(() => {
        Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
          (v: optionData) => v.name.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
};

const refreshData = async () => {
  myform.value.reset();
  // await props.fetch();
  await fetchProvince();
  await getNewData();
};

const getNewData = async () => {
  // await props.fetch();
  await fetchProvince();
};

// บันทึกข้อมูล
const editData = async () => {
  const body = {
    registrationSame: addressData.value.registSame == "1",
    registrationAddress: addressData.value.registAddress,
    registrationSubDistrictId: registAddress.subDistrictId,
    registrationDistrictId: registAddress.districtId,
    registrationProvinceId: registAddress.provinceId,
    registrationZipCode: registAddress.provinceId,
    currentAddress:
      addressData.value.registSame == "1"
        ? addressData.value.registAddress
        : addressData.value.currentAddress,
    currentSubDistrictId:
      addressData.value.registSame == "1"
        ? registAddress.subDistrictId
        : currentAddress.subDistrictId,
    currentDistrictId:
      addressData.value.registSame == "1"
        ? registAddress.districtId
        : currentAddress.districtId,
    currentProvinceId:
      addressData.value.registSame == "1"
        ? registAddress.provinceId
        : currentAddress.provinceId,
    currentZipCode:
      addressData.value.registSame == "1"
        ? registAddress.zipCode
        : currentAddress.zipCode,
  };
  showLoader();
  await http
    .put(
      config.API.placementAddressId(route.params.personalId.toString()),
      body
    )
    .then(() => {
      success($q, "แก้ไขข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      edit.value = false;
      emit("update:statusEdit", false);
      await getNewData();
      await props.fetch();
      // await fetchProvince();
    });
};

// เช็คข้อมูลก่อนบันทึก
const saveData = async () => {
  myform.value.validate().then((success: boolean) => {
    if (success) {
      editData();
    }
  });
};

// เลือกข้อมูลจังหวัด
const selectProvince = async (e: string | null, name: string) => {
  if (e != null) {
    if (name == "1") {
      registAddress.subDistrictId = "";
      registAddress.zipCode = "";
      registAddress.districtId = "";
    } else {
      currentAddress.subDistrictId = "";
      currentAddress.zipCode = "";
      currentAddress.districtId = "";
    }
    myform.value.resetValidation();
    await fetchDistrict(e, name);
  }
};

// เลือกข้อมูลอำเภอ
const selectDistrict = async (e: string | null, name: string) => {
  if (e != null) {
    if (name == "1") {
      registAddress.subDistrictId = "";
      registAddress.zipCode = "";
    } else {
      currentAddress.subDistrictId = "";
      currentAddress.zipCode = "";
    }
    myform.value.resetValidation();
    await fetchSubDistrict(e, name);
  }
};

// เลือกข้อมูลตำบล
const selectSubDistrict = (e: string | null, name: string) => {
  if (e != null) {
    if (name == "1") {
      const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
      registAddress.zipCode = namecode;
    } else {
      const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
      currentAddress.zipCode = namecode;
    }
  }
};

// ดึงข้อมูลจังหวัด
const fetchProvince = async () => {
  showLoader();
  await http
    .get(config.API.province)
    .then(async (res) => {
      const data = res.data.result;
      let option: optionData[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      Ops.value.provinceOps = option;
      OpsFilter.value.provinceOps = option;

      const checkRegistProvinceId = await option.find(
        (e: any) => e.id === addressData.value.registProvinceId
      );

      // ที่อยู่ถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
      if (
        addressData.value.registProvinceId == "" ||
        addressData.value.registProvinceId ==
          "00000000-0000-0000-0000-000000000000" ||
        !checkRegistProvinceId
      ) {
        registAddress.subDistrictId = "";
        registAddress.zipCode = "";
        registAddress.districtId = "";
      } else {
        registAddress.provinceId = await addressData.value.registProvinceId;
        registAddress.zipCode = await addressData.value.registZipCode;

        await fetchDistrict(addressData.value.registProvinceId, "1");
        if (
          addressData.value.registDistrictId != null &&
          addressData.value.registDistrictId !=
            "00000000-0000-0000-0000-000000000000"
        ) {
          await fetchSubDistrict(addressData.value.registDistrictId, "1");
        }
      }

      const checkCurrentProvinceId = await option.find(
        (e: any) => e.id === addressData.value.currentProvinceId
      );

      // ที่อยู่ปัจจุบันถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
      if (
        addressData.value.currentProvinceId == "" ||
        addressData.value.currentProvinceId ==
          "00000000-0000-0000-0000-000000000000" ||
        !checkCurrentProvinceId
      ) {
        currentAddress.subDistrictId = "";
        currentAddress.zipCode = "";
        currentAddress.districtId = "";
      } else {
        currentAddress.provinceId = addressData.value.currentProvinceId;
        currentAddress.zipCode = addressData.value.currentZipCode;

        await fetchDistrict(addressData.value.currentProvinceId, "2");
        if (
          addressData.value.currentDistrictId != null &&
          addressData.value.currentDistrictId !=
            "00000000-0000-0000-0000-000000000000"
        ) {
          await fetchSubDistrict(addressData.value.currentDistrictId, "2");
        }
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

// ดึงข้อมูลอำเภอ
const fetchDistrict = async (id: string | null, position: string) => {
  if (id != null && id != "") {
    showLoader();
    await http
      .get(config.API.listDistrict(id))
      .then(async (res) => {
        const data = res.data.result;
        let option: optionData[] = [];
        data.map((r: any) => {
          option.push({ id: r.id.toString(), name: r.name.toString() });
        });
        if (position == "1") {
          Ops.value.districtOps = option;
          OpsFilter.value.districtOps = option;

          // ที่อยู่ เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
          const checkRegistDistrictId = option.find(
            (e: any) => e.id === addressData.value.registDistrictId
          );

          if (checkRegistDistrictId) {
            registAddress.districtId = addressData.value.registDistrictId;
          }
        } else {
          Ops.value.districtCOps = option;
          OpsFilter.value.districtCOps = option;

          // ที่อยู่ปัจจุบัน เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
          const checkCurrentDistrictId = await option.find(
            (e: any) => e.id === addressData.value.currentDistrictId
          );
          if (checkCurrentDistrictId) {
            currentAddress.districtId = addressData.value.currentDistrictId;
          }
        }
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
};

// ดึงข้อมูลตำบล
const fetchSubDistrict = async (id: string | null, position: string) => {
  if (id != null && id != "") {
    showLoader();
    await http
      .get(config.API.listSubDistrict(id))
      .then(async (res) => {
        const data = res.data.result;
        let option: zipCodeOption[] = [];
        data.map((r: any) => {
          option.push({
            id: r.id.toString(),
            name: r.name.toString(),
            zipCode: r.zipCode.toString(),
          });
        });
        if (position == "1") {
          Ops.value.subdistrictOps = option;
          OpsFilter.value.subdistrictOps = option;

          // ที่อยู่ เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
          const checkRegistSubDistrictId = await option.find(
            (e: any) => e.id === addressData.value.registSubDistrictId
          );
          if (checkRegistSubDistrictId) {
            registAddress.subDistrictId = addressData.value.registSubDistrictId;
          }
        } else {
          Ops.value.subdistrictCOps = option;
          OpsFilter.value.subdistrictCOps = option;

          // ที่อยู่ปัจจุบัน เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
          const checkCurrentSubDistrictId = await option.find(
            (e: any) => e.id === addressData.value.currentSubDistrictId
          );
          if (checkCurrentSubDistrictId) {
            currentAddress.subDistrictId =
              addressData.value.currentSubDistrictId;
          }
        }
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
};

const changeBtn = async () => {
  if (edit.value == true) {
    if (props.statusEdit === true) {
      edit.value = false;
      props.notiNoEdit();
    } else {
      emit("update:statusEdit", true);
    }
  } else {
    emit("update:statusEdit", false);
  }
};

const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>

<template>
  <q-card class="col-12 q-px-lg q-py-md q-mt-md no-border">
    <HeaderTop
      v-model:edit="edit"
      header="ข้อมูลที่อยู่"
      icon="mdi-map-marker"
      :save="saveData"
      :history="false"
      :changeBtn="changeBtn"
      :disable="statusEdit"
      :cancel="refreshData"
    />
    <q-form ref="myform">
      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
        <div class="col-xs-12">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="addressData.registAddress"
            :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
            :hide-dropdown-icon="!edit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="registAddress.provinceId"
            emit-value
            map-options
            option-label="name"
            :options="Ops.provinceOps"
            option-value="id"
            :label="`${'จังหวัด'}`"
            @update:model-value="(value: string) => selectProvince(value, '1')"
            use-input
            input-debounce="0"
            @filter="(inputValue: string,
              doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
              )"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
            :hide-dropdown-icon="!edit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="registAddress.districtId"
            emit-value
            map-options
            option-label="name"
            :options="Ops.districtOps"
            option-value="id"
            :label="`${'เขต / อำเภอ'}`"
            @update:model-value="(value: string) => selectDistrict(value, '1')"
            use-input
            input-debounce="0"
            @filter="(inputValue: string,
              doneFn: Function) => filterSelector(inputValue, doneFn, 'districtOps'
              )"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
            :hide-dropdown-icon="!edit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="registAddress.subDistrictId"
            emit-value
            map-options
            option-label="name"
            :options="Ops.subdistrictOps"
            option-value="id"
            :label="`${'แขวง / ตำบล '}`"
            @update:model-value="(value: string) => selectSubDistrict(value, '1')"
            use-input
            input-debounce="0"
            @filter="(inputValue: string,
              doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictOps'
              )"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            dense
            lazy-rules
            readonly
            borderless
            v-model="registAddress.zipCode"
            :style="!edit ? '' : 'padding:0 12px;'"
            :label="`${'รหัสไปรษณีย์'}`"
          />
        </div>
        <div class="col-12 q-pt-lg"><q-separator /></div>
        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
          <label class="text-bold"
            >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
          >
          <q-radio
            v-model="addressData.registSame"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="1"
            label="ใช่"
            dense
            :disable="!edit"
          />
          <q-radio
            v-model="addressData.registSame"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="0"
            label="ไม่"
            dense
            :disable="!edit"
          />
        </div>

        <div class="col-xs-12" v-if="addressData.registSame == '0'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="addressData.currentAddress"
            :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
            :label="`${'ที่อยู่ปัจจุบัน'}`"
          />
        </div>
        <div
          class="col-xs-6 col-sm-3 col-md-3"
          v-if="addressData.registSame == '0'"
        >
          <q-select
            :hide-dropdown-icon="!edit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="currentAddress.provinceId"
            emit-value
            map-options
            option-label="name"
            :options="Ops.provinceOps"
            option-value="id"
            :label="`${'จังหวัด'}`"
            @update:model-value="(value: string) => selectProvince(value, '2')"
            use-input
            input-debounce="0"
            @filter="(inputValue: string,
              doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
              )"
          />
        </div>
        <div
          class="col-xs-6 col-sm-3 col-md-3"
          v-if="addressData.registSame == '0'"
        >
          <q-select
            :hide-dropdown-icon="!edit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="currentAddress.districtId"
            emit-value
            map-options
            option-label="name"
            :options="Ops.districtCOps"
            option-value="id"
            :label="`${'เขต / อำเภอ'}`"
            @update:model-value="(value: string) => selectDistrict(value, '2')"
            use-input
            input-debounce="0"
            @filter="(inputValue: string,
              doneFn: Function) => filterSelector(inputValue, doneFn, 'districtCOps'
              )"
          />
        </div>
        <div
          class="col-xs-6 col-sm-3 col-md-3"
          v-if="addressData.registSame == '0'"
        >
          <q-select
            :hide-dropdown-icon="!edit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="currentAddress.subDistrictId"
            emit-value
            map-options
            option-label="name"
            :options="Ops.subdistrictCOps"
            option-value="id"
            :label="`${'แขวง / ตำบล '}`"
            @update:model-value="(value: string) => selectSubDistrict(value, '2')"
            use-input
            input-debounce="0"
            @filter="(inputValue: string,
              doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictCOps'
              )"
          />
        </div>
        <div
          class="col-xs-6 col-sm-3 col-md-3"
          v-if="addressData.registSame == '0'"
        >
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            dense
            lazy-rules
            readonly
            borderless
            v-model="currentAddress.zipCode"
            :style="!edit ? '' : 'padding:0 12px;'"
            :label="`${'รหัสไปรษณีย์'}`"
          />
        </div>
      </div>
    </q-form>
  </q-card>
</template>
