<template>
  <div class="space-y-3">
    <FloatLabel variant="on">
      <Select v-model="cim.orszag" inputId="orszag" :options="config.countries" option-value="iso_code_2"
        optionLabel="name_hu" class="w-full" filter resetFilterOnHide resetFilterOnClear autoFilterFocus />
      <label for="orszag">Ország</label>
    </FloatLabel>

    <div class="flex gap-2">
      <FloatLabel variant="on" class="w-1/3">
        <InputText id="tartozkodasicim" v-model="cim.iranyitoszam" class="w-full" :invalid="!cim.iranyitoszam" />
        <label for="tartozkodasicim">Irányítószám</label>
      </FloatLabel>
      <FloatLabel variant="on" class="w-2/3">
        <InputText id="tartozkodasicim" v-model="cim.telepules" class="w-full" :invalid="!cim.telepules" />
        <label for="tartozkodasicim">Település</label>
      </FloatLabel>
    </div>
    <FloatLabel variant="on">
      <InputText id="tartozkodasicim" v-model="cim.cim" class="w-full" :invalid="!cim.cim" />
      <label for="tartozkodasicim">Utca (közterület)</label>
    </FloatLabel>
    <div class="flex gap-2">
      <FloatLabel variant="on">
        <InputText id="tartozkodasicim" v-model="cim.hazszam" class="w-full" :invalid="!cim.hazszam" />
        <label for="tartozkodasicim">Házszám</label>
      </FloatLabel>
      <FloatLabel variant="on">
        <InputText id="tartozkodasicim" v-model="cim.emajto" class="w-full" />
        <label for="tartozkodasicim">Emelet/ajtó</label>
      </FloatLabel>
    </div>
  </div>
</template>

<script lang="ts" setup>
const config = useMyConfigStore()
const value = defineModel()
const cim = ref({
  iranyitoszam: '',
  telepules: '',
  cim: '',
  hazszam: '',
  emajto: '',
  orszag: 'HU'
})
</script>

<style lang="scss"></style>