<template>
  <h4 class="h3">
    {{ trans(ADDRESS_FILL_AN_ADDRESS) }}
  </h4>
  <div class="row my-3">
    <div class="col-lg-6" v-if="!isNoAddress">
      <div class="form-floating my-1">
        <input
          class="form-control"
          type="text"
          name="floor"
          :placeholder="trans(ADDRESS_FLOOR)"
          v-model="floor"
        />
        <label for="floor">{{ trans(ADDRESS_FLOOR) }}</label>
      </div>
      <div class="form-floating my-1">
        <input
          class="form-control"
          type="text"
          name="corridor"
          :placeholder="trans(ADDRESS_CORRIDOR)"
          v-model="corridor"
        />
        <label for="corridor">{{ trans(ADDRESS_CORRIDOR) }}</label>
      </div>
      <div class="form-floating my-1">
        <input
          class="form-control"
          type="text"
          name="steps"
          :placeholder="trans(ADDRESS_STEPS)"
          v-model="steps"
        />
        <label for="steps">{{ trans(ADDRESS_STEPS) }}</label>
      </div>
      <div class="form-floating my-1">
        <input
          class="form-control"
          type="text"
          name="flat"
          :placeholder="trans(ADDRESS_FLAT)"
          v-model="flat"
        />
        <label for="flat">{{ trans(ADDRESS_FLAT) }}</label>
      </div>
    </div>
    <div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
      <div class="form-floating my-1" v-if="!isNoAddress">
        <input
          class="form-control"
          type="text"
          name="buildingName"
          maxlength="255"
          :placeholder="trans(ADDRESS_BUILDING_NAME)"
          v-model="buildingName"
        />
        <label for="buildingName">{{ trans(ADDRESS_BUILDING_NAME) }}</label>
      </div>
      <div class="form-floating my-1">
        <input
          class="form-control"
          type="text"
          name="extra"
          maxlength="255"
          :placeholder="trans(ADDRESS_EXTRA)"
          v-model="extra"
        />
        <label for="extra">{{ trans(ADDRESS_EXTRA) }}</label>
      </div>
      <div class="form-floating my-1" v-if="!isNoAddress">
        <input
          class="form-control"
          type="text"
          name="distribution"
          maxlength="255"
          :placeholder="trans(ADDRESS_DISTRIBUTION)"
          v-model="distribution"
        />
        <label for="distribution">{{ trans(ADDRESS_DISTRIBUTION) }}</label>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ADDRESS_STREET,
  ADDRESS_STREET_NUMBER,
  ADDRESS_FLOOR,
  ADDRESS_CORRIDOR,
  ADDRESS_STEPS,
  ADDRESS_FLAT,
  ADDRESS_BUILDING_NAME,
  ADDRESS_DISTRIBUTION,
  ADDRESS_EXTRA,
  ADDRESS_FILL_AN_ADDRESS,
  trans,
} from "translator";
export default {
  name: "AddressMore",
  setup() {
    return {
      ADDRESS_STREET,
      ADDRESS_STREET_NUMBER,
      ADDRESS_FLOOR,
      ADDRESS_CORRIDOR,
      ADDRESS_STEPS,
      ADDRESS_FLAT,
      ADDRESS_BUILDING_NAME,
      ADDRESS_DISTRIBUTION,
      ADDRESS_EXTRA,
      ADDRESS_FILL_AN_ADDRESS,
      trans,
    };
  },
  props: ["entity", "isNoAddress"],
  computed: {
    floor: {
      set(value) {
        this.entity.selected.address.floor = value;
      },
      get() {
        return this.entity.selected.address.floor;
      },
    },
    corridor: {
      set(value) {
        this.entity.selected.address.corridor = value;
      },
      get() {
        return this.entity.selected.address.corridor;
      },
    },
    steps: {
      set(value) {
        this.entity.selected.address.steps = value;
      },
      get() {
        return this.entity.selected.address.steps;
      },
    },
    flat: {
      set(value) {
        this.entity.selected.address.flat = value;
      },
      get() {
        return this.entity.selected.address.flat;
      },
    },
    buildingName: {
      set(value) {
        this.entity.selected.address.buildingName = value;
      },
      get() {
        return this.entity.selected.address.buildingName;
      },
    },
    extra: {
      set(value) {
        this.entity.selected.address.extra = value;
      },
      get() {
        return this.entity.selected.address.extra;
      },
    },
    distribution: {
      set(value) {
        this.entity.selected.address.distribution = value;
      },
      get() {
        return this.entity.selected.address.distribution;
      },
    },
  },
};
</script>
