<template>
<fl-select
    v-model="value"
    :list="listSections"
    placeholder="Подъезд"
    width-auto
    has-one-value
    @change="activeSections = $event"
    @apply="$emit('apply')"
>
  <template v-if="!listSections.length" #dropdown>
    <div class="fl-select-section-empty">
      Выберите дом
    </div>
  </template>
</fl-select>
</template>

<script>
import FlSelect from '@/core-components/FlSelect'

export default {
  name: 'FlSelectSection',
  components: { FlSelect },
  props: {
    listInit: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      value: '',
      activeSections: []
    }
  },

  computed: {
    listSections () {
      return this.listInit.map(item => ({ id: item.id, value: item.name }))
    }
  },

  methods: {
    init () {
      this.activeSections = []
    }
  },

  watch: {
    activeSections () {
      if (!this.activeSections.length) {
        this.value = ''
      } else {
        this.value = this.activeSections[0].value
      }
      this.$emit('change', this.activeSections)
    }
  }
}
</script>
<style lang="scss" scoped>
 .fl-select-section-empty {
   padding: 11px 16px;
   white-space: pre;
 }
</style>
