<!-- card ข้อมูลที่อยู่ -->
<template>
  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
    <HeaderTop
      v-model:edit="edit"
      header="ข้อมูลที่อยู่"
      icon="mdi-map-marker"
      :save="saveData"
      :addData="true"
      :editOnly="false"
      :cancel="cancelData"
      :changeBtn="changeBtn"
      :editData="step == 2"
      :disable="statusEdit"
    />
    <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.address"
            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
          />
          <!-- :filled="edit" -->
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="addressData.provinceId"
            emit-value
            map-options
            option-label="name"
            :options="provinceOptions"
            option-value="id"
            :label="`${'จังหวัด'}`"
            @update:model-value="(value) => selectProvince(value, '1')"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="addressData.districtId"
            emit-value
            map-options
            option-label="name"
            :options="districtOptions"
            option-value="id"
            :label="`${'เขต / อำเภอ'}`"
            @update:model-value="(value) => selectDistrict(value, '1')"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="addressData.subdistrictId"
            emit-value
            map-options
            option-label="name"
            :options="subdistrictOptions"
            option-value="id"
            :label="`${'ตำบล / แขวง'}`"
            @update:model-value="(value) => selectSubDistrict(value, '1')"
          />
        </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="addressData.code"
            :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.same"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="1"
            label="ใช่"
            dense
            :disable="!edit"
          />
          <q-radio
            v-model="addressData.same"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="0"
            label="ไม่"
            dense
            :disable="!edit"
          />
        </div>

        <div class="col-xs-12" v-if="addressData.same == '0'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="addressData.addressC"
            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
            :label="`${'ที่อยู่ปัจจุบัน'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="addressData.provinceIdC"
            emit-value
            map-options
            option-label="name"
            :options="provinceOptions"
            option-value="id"
            :label="`${'จังหวัด'}`"
            @update:model-value="(value) => selectProvince(value, '2')"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="addressData.districtIdC"
            emit-value
            map-options
            option-label="name"
            :options="districtCOptions"
            option-value="id"
            :label="`${'เขต / อำเภอ'}`"
            @update:model-value="(value) => selectDistrict(value, '2')"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="addressData.subdistrictIdC"
            emit-value
            map-options
            option-label="name"
            :options="subdistrictCOptions"
            option-value="id"
            :label="`${'ตำบล / แขวง'}`"
            @update:model-value="(value) => selectSubDistrict(value, '2')"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            dense
            lazy-rules
            readonly
            borderless
            v-model="addressData.codeC"
            :style="!edit ? '' : 'padding:0 12px;'"
            :label="`${'รหัสไปรษณีย์'}`"
          />
        </div>
      </div>
    </q-form>
  </q-card>
  <q-dialog :model-value="modalConsend" persistent>
    <q-card style="min-width: 800px">
      <Conference :ok="consendOk" :close="consenClose" />
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useCounterMixin } from '@/stores/mixin'

import http from '@/plugins/http'
import config from '@/app.config'
import type { Address, DataOption, zipCodeOption } from '@/modules/01_exam/interface/index/Main'
import { defaultAddress } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useExamDataStore } from '@/modules/01_exam/store'

const mixin = useCounterMixin()
const store = useExamDataStore()
const { date2Thai, calAge } = mixin
const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
const edit = ref<boolean>(false)
const addressData = ref<Address>(defaultAddress)
const myform = ref<any>()
const codep = ref<string>('')
const codec = ref<string>('')
const modalConsend = ref<boolean>(false)

const provinceOptions = ref<DataOption[]>([])
const districtOptions = ref<DataOption[]>([])
const districtCOptions = ref<DataOption[]>([])
const subdistrictOptions = ref<zipCodeOption[]>([])
const subdistrictCOptions = ref<zipCodeOption[]>([])

const props = defineProps({
  statusEdit: {
    type: Boolean,
    required: true
  },
  notiNoEdit: {
    type: Function,
    default: () => console.log('not function')
  },
  step: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['update:statusEdit'])

onMounted(async () => {
  await fetchData()
  await fetchProvince()
  await fetchDistrict(addressData.value.provinceId, '1')
  await fetchDistrict(addressData.value.provinceIdC, '2')
  await fetchSubDistrict(addressData.value.districtId, '1')
  await fetchSubDistrict(addressData.value.districtIdC, '2')
})
const fetchData = async () => {
  await http
    .get(config.API.candidateAddress(candidateId.value))
    .then((res) => {
      const data = res.data.result
      addressData.value.address = data.registAddress
      addressData.value.addressC = data.currentAddress
      addressData.value.provinceId = data.registProvinceId
      addressData.value.provinceIdC = data.currentProvinceId
      addressData.value.districtId = data.registDistrictId
      addressData.value.districtIdC = data.currentDistrictId
      addressData.value.subdistrictId = data.registSubDistrictId
      addressData.value.subdistrictIdC = data.currentSubDistrictId
      addressData.value.code = data.registZipCode
      addressData.value.codeC = data.currentZipCode
      addressData.value.same = data.registSame == true ? '1' : '0'
      //   informaData.value = data
    })
    .catch((e: any) => {})
    .finally(() => {
      //   loader.value = false;
    })
}

const saveData = async () => {
  if (store.consend == true) {
    edit.value = false
    emit('update:statusEdit', false)
  } else {
    modalConsend.value = true
  }
}

const changeBtn = async () => {
  await myform.value.validate().then(async (success: boolean) => {
    if (success) {
      if (edit.value == true) {
        if (props.statusEdit === true) {
          edit.value = false
          props.notiNoEdit()
        } else {
          emit('update:statusEdit', true)
        }
      } else {
        emit('update:statusEdit', false)
      }
    }
  })
}

const selectProvince = (e: string, name: string) => {
  if (name == '1') {
    addressData.value.districtId = ''
    addressData.value.subdistrictId = ''
    codep.value = ''
  } else {
    addressData.value.districtIdC = ''
    addressData.value.subdistrictIdC = ''
    codec.value = ''
  }

  myform.value.resetValidation()
  fetchDistrict(e, name)
}

const selectDistrict = (e: string, name: string) => {
  if (name == '1') {
    addressData.value.subdistrictId = ''
    codep.value = ''
  } else {
    addressData.value.subdistrictIdC = ''
    codec.value = ''
  }

  myform.value.resetValidation()
  fetchSubDistrict(e, name)
}

const selectSubDistrict = (e: string, name: string) => {
  if (name == '1') {
    const findcode = subdistrictOptions.value.filter((r) => r.id == e)
    const namecode = findcode.length > 0 ? findcode[0].zipCode : ''
    codep.value = namecode
  } else {
    const findcode = subdistrictCOptions.value.filter((r) => r.id == e)
    const namecode = findcode.length > 0 ? findcode[0].zipCode : ''
    codec.value = namecode
  }

  //   myform.value.resetValidation();
  //   fetchSubDistrict(e, name);
}

const fetchProvince = async () => {
  //   loader.value = true;
  await http
    .get(config.API.province)
    .then((res) => {
      const data = res.data.result
      let option: DataOption[] = []
      //   console.log(data);
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() })
      })
      provinceOptions.value = option
    })
    .catch((e: any) => {})
    .finally(() => {
      //   loader.value = false;
    })
}

const fetchDistrict = async (id: string, position: string) => {
  //   loader.value = true;
  await http
    .get(config.API.listDistrict(id))
    .then((res) => {
      const data = res.data.result
      let option: DataOption[] = []
      //   console.log(data);
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() })
      })
      if (position == '1') {
        districtOptions.value = option
      } else {
        districtCOptions.value = option
      }
    })
    .catch((e: any) => {})
    .finally(() => {
      //   loader.value = false;
    })
}

const fetchSubDistrict = async (id: string, position: string) => {
  //   loader.value = true;
  await http
    .get(config.API.listSubDistrict(id))
    .then((res) => {
      const data = res.data.result
      let option: zipCodeOption[] = []
      //   console.log(res);
      data.map((r: any) => {
        option.push({
          id: r.id.toString(),
          name: r.name.toString(),
          zipCode: r.zipCode.toString()
        })
      })
      if (position == '1') {
        subdistrictOptions.value = option
      } else {
        subdistrictCOptions.value = option
      }
    })
    .catch((e: any) => {})
    .finally(() => {
      //   loader.value = false;
    })
}

const consenClose = () => {
  modalConsend.value = false
}

const consendOk = () => {
  modalConsend.value = false
  store.consend = true
  saveData()
}

const cancelData = () => {}

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