<template>
    <h4 class="h3">
        {{ $t("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="$t('floor')"
                    v-model="floor"
                />
                <label for="floor">{{ $t("floor") }}</label>
            </div>
            <div class="form-floating my-1">
                <input
                    class="form-control"
                    type="text"
                    name="corridor"
                    :placeholder="$t('corridor')"
                    v-model="corridor"
                />
                <label for="corridor">{{ $t("corridor") }}</label>
            </div>
            <div class="form-floating my-1">
                <input
                    class="form-control"
                    type="text"
                    name="steps"
                    :placeholder="$t('steps')"
                    v-model="steps"
                />
                <label for="steps">{{ $t("steps") }}</label>
            </div>
            <div class="form-floating my-1">
                <input
                    class="form-control"
                    type="text"
                    name="flat"
                    :placeholder="$t('flat')"
                    v-model="flat"
                />
                <label for="flat">{{ $t("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="$t('buildingName')"
                    v-model="buildingName"
                />
                <label for="buildingName">{{ $t("buildingName") }}</label>
            </div>
            <div class="form-floating my-1">
                <input
                    class="form-control"
                    type="text"
                    name="extra"
                    maxlength="255"
                    :placeholder="$t('extra')"
                    v-model="extra"
                />
                <label for="extra">{{ $t("extra") }}</label>
            </div>
            <div class="form-floating my-1" v-if="!isNoAddress">
                <input
                    class="form-control"
                    type="text"
                    name="distribution"
                    maxlength="255"
                    :placeholder="$t('distribution')"
                    v-model="distribution"
                />
                <label for="distribution">{{ $t("distribution") }}</label>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "AddressMore",
    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>
