<template>
  <q-form v-if="model" ref="form" class="q-gutter-y-md">
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-model="model.region.name"
          :rules="[required ? requiredHendler : '']"
          filled
          :label="`${$t('mAddress.subject')}, ${$t(
            'mAddress.region'
          ).toLowerCase()} ${required ? '*' : ''}`"
          lazy-rules
          :disable="model.region.disabled"
        />
      </div>
    </div>
    <div class="row q-gutter-x-md">
      <div class="col">
        <div class="col">
          <q-input
            v-model="model.district.name"
            :rules="[required ? requiredHendler : '']"
            filled
            :label="`${$t('mAddress.district')} ${required ? '*' : ''}`"
            lazy-rules
            :disable="model.district.disabled"
          />
        </div>
      </div>
    </div>
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-model="model.city.name"
          :rules="[cityRequired ? requiredHendler : '']"
          filled
          :label="`${$t('mAddress.city')} ${cityRequired ? '*' : ''}`"
          lazy-rules
          :disable="model.city.disabled"
        />
      </div>
      <div class="col">
        <q-input
          v-model="model.locality.type"
          filled
          :label="$t('mAddress.localityType')"
          lazy-rules
          :disable="model.locality.disabled"
        />
      </div>
    </div>
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-model="model.locality.name"
          :rules="[cityRequired ? requiredHendler : '']"
          filled
          :label="`${$t('mAddress.locality')} ${cityRequired ? '*' : ''}`"
          lazy-rules
          :disable="model.locality.disabled"
        />
      </div>
    </div>
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-model="model.settlement.name"
          :rules="[cityRequired ? requiredHendler : '']"
          filled
          :label="`${$t('mAddress.planningStructure')} ${
            cityRequired ? '*' : ''
          }`"
          lazy-rules
          :disable="model.settlement.disabled"
        />
      </div>
    </div>
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-model="model.street.name"
          :rules="[this.mandatoryStreet ? requiredHendler : '']"
          filled
          :label="`${$t('mAddress.street')} ${this.mandatoryStreet ? '*' : ''}`"
          lazy-rules
          :disable="model.street.disabled"
        />
      </div>
    </div>
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-model="model.house.number"
          :rules="[requiredHendler]"
          filled
          :label="`${$t('mAddress.house')} *`"
          lazy-rules
          :disable="model.house.numberDisabled"
        />
      </div>
      <div class="col">
        <q-input
          v-model="model.house.block"
          :rules="[houseRequired ? 'required' : '']"
          filled
          :class="{ invisible: !model.house.number }"
          :label="`${$t('mAddress.building')}`"
          lazy-rules
          :disable="model.house.blockDisabled"
        />
      </div>
      <div class="col">
        <q-input
          v-model="model.house.structure"
          :rules="[houseRequired ? 'required' : '']"
          filled
          :class="{ invisible: !model.house.block }"
          :label="`${$t('mAddress.structure')}`"
          lazy-rules
          :disable="model.house.structureDisabled"
        />
      </div>
    </div>
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-model="model.room.flat"
          filled
          :label="`${$t('mAddress.apartmentNumber')}`"
          lazy-rules
          :disable="model.room.flatDisabled"
        />
      </div>
      <div class="col">
        <q-input
          v-model="model.room.room"
          filled
          :label="`${$t('mAddress.roomNumber')}`"
          lazy-rules
          :disable="model.room.roomDisabled"
        />
      </div>
    </div>
    <div class="row q-gutter-x-md">
      <div class="col">
        <q-input
          v-if="!model.house.number && !model.room.flat"
          v-model="model.stead.number"
          filled
          :label="`${$t('mAddress.landTenure')}`"
          :disable="model.stead.disabled"
        />
      </div>
    </div>
  </q-form>
</template>

<script lang="ts" src="./index.ts"></script>

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