<template>
  <div class="fl-block-description full-width-mobile">
    <div class="fl-block-description__body">
      <div class="fl-block-description__options">
        <div
          v-for="item in listOptions"
          :key="item.name"
          class="fl-block-description__option"
        >
          <div class="fl-block-description__option--name">
            {{ item.name }}
          </div>
          <div class="fl-block-description__option--value">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import cardMixin from '@/mixins/cardMixin'

export default {
  name: 'FlBlockDescription',
  mixins: [cardMixin],
  props: {
    room: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapGetters(['developmentEnd', 'house', 'floorsHouse', 'nameDistrict', 'isRoomSold']),

    listOptions () {
      return [
        {
          name: '№ помещения',
          value: this.room.number
        },
        {
          name: 'Тип помещения',
          value: this.roomType(this.room)
        },
        {
          name: 'Дом',
          value: this.getHouse(this.room)
        },
        {
          name: 'ЖК',
          value: this.nameDistrict(this.room.house_id)
        },
        {
          name: 'Срок сдачи',
          value: this.developmentEnd(this.room.house_id)
        },
        {
          name: 'Подъезд',
          value: this.getSection(this.room)
        },
        {
          name: 'Этаж',
          value: this.floorTitle(this.room)
        },
        {
          name: 'Площадь',
          value: this.getArea(this.room)
        },
        {
          name: 'Жилая площадь',
          value: this.getLiveArea(this.room)
        }
      ]
    },

    badges () {
      return this.room && this.room.badges
    }
  }
}
</script>

<style lang="scss" scoped>
  .fl-block-description__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
  }

  .fl-block-description__body {
    justify-content: center;

    @include flex-column;
  }

  .fl-block-description__body--title {
    margin-bottom: 15px;
    font-size: 26px;
    font-family: $main-ff-bold;
    letter-spacing: -0.52px;
  }

  .fl-block-description__favorite {
    justify-content: center;
    margin: 25px auto 0;
    color: $grey-01;
    fill: $grey-01;
  }

  .fl-block-description__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 16px;
  }

  .fl-block-description__option--name {
    font-family: $main-ff-bold;
    line-height: 1.25;
  }

  .fl-block-description__body--badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
    padding: 20px 0;
    border-top: 1px $light-02 solid;
    border-bottom: 1px $light-02 solid;
  }

  .fl-block-description__body--price {
    margin-bottom: 15px;
    color: $primary;
    font-size: 30px;
    font-family: $main-ff-bold;
    text-align: center;
  }

  .fl-block-description-reservation__text {
    margin-bottom: 10px;
    color: $grey-01;
    font-size: 14px;
    text-align: center;
  }

  @include media-max-md {
    .fl-block-description {
      width: 100%;
      max-width: initial;
      border-top: 1px $light-02 solid;
      border-radius: initial;
      box-shadow: initial;
    }
  }
</style>
