<template>
  <fl-select
      v-model="value"
      placeholder="Площадь"
      class="fl-filter-select-area"
  >
    <template #dropdown>
      <div class="fl-filter-select-area__body">
        <fl-input-measure
            v-model="areaFrom"
            type="number"
            label="от"
            placeholder="14"
            class="fl-filter-select-area__body--from input"
        />
        <fl-input-measure
            v-model="areaTo"
            label="до"
            type="number"
            measure="м²"
            placeholder="345"
            class="fl-filter-select-area__body--before input"
        />
        <div
            class="fl-filter-select-area__apply"
            @click="$emit('apply')"
        >
          Применить
        </div>
      </div>
    </template>
  </fl-select>
</template>

<script>

import FlInputMeasure from '@/core-components/form/FlInputMeasure'
import FlSelect from '@/core-components/FlSelect'
export default {
  name: 'FlSelectArea',
  components: { FlSelect, FlInputMeasure },
  data () {
    return {
      areaFrom: '',
      areaTo: '',
      value: ''
    }
  },

  props: {
    initAreaFrom: {
      type: [Number, String],
      default: 0
    },
    initAreaTo: {
      type: [Number, String]
    }
  },

  methods: {
    setValue () {
      let valueString = ''
      if (this.areaFrom) {
        valueString = `от ${this.areaFrom} м² `
      }
      if (this.areaTo) {
        valueString += `до ${this.areaTo} м²`
      }

      this.value = valueString
    },

    initValue () {
      this.areaFrom = this.initAreaFrom
      this.areaTo = this.initAreaTo
    },

    init () {
      this.areaFrom = ''
      this.areaTo = ''
    }
  },

  watch: {
    areaFrom (newValue) {
      this.setValue()
      this.$emit('change-from', newValue)
    },
    areaTo (newValue) {
      this.setValue()
      this.$emit('change-to', newValue)
    },

    initAreaFrom () {
      this.areaFrom = this.initAreaFrom
    },

    initAreaTo () {
      this.areaTo = this.initAreaTo
    }
  }
}
</script>
<style lang="scss" scoped>
.fl-filter-select-area__body {
  display: flex;
}

.fl-filter-select-area ::v-deep .fl-filter-select__dropdown {
  width: auto;
}

.fl-filter-select-area__body--from {
  width: 100px;
  padding-right: 0;
  border-radius: $border-radius 0 0 $border-radius;
}

.fl-filter-select-area__body--before {
  width: 142.5px;
  padding-left: 0;
  border-radius: 0 8px 8px 0;
}

.fl-filter-select-area__apply {
  @include flex-center;
  margin-right: 16px;
  color: $primary;
  cursor: pointer;
}
</style>
