<template>
  <u-drop-down :class="classes" :items="input.options" transfer :disabled="input.disabled"
               @click="handleClick">
    <filter-label :value="showText" :disabled="input.disabled">
      <template v-slot:right>
        <u-icon type="chevron-bottom" scene="none"></u-icon>
      </template>
    </filter-label>
  </u-drop-down>
</template>

<script>
import FilterLabel from './filter-label'
import UIcon from '@uif/hq/lib/components/icon'
import UDropDown from '@uif/hq/lib/components/drop-menu'
import {findOption} from '@uif/admin/lib/utils/form'
export default {
  name: 'u-filter-select',
  components: {
    UIcon,
    UDropDown,
    FilterLabel
  },
  props: {
    input: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    showText () {
      let option = null
      if (this.input.value || this.input.value === 0) {
        option = findOption(this.input.options, this.input.value)
      }
      return option ? option.label : this.input.label
    },
    classes () {
      return {
        'uif-filter-active': this.showText !== this.input.label
      }
    }
  },
  methods: {
    handleClick (e, {value}) {
      if (this.input.disabled) return false
      this.$set(this.input, 'value', value)
      this.$emit('u-change', this.input.name, value)
    }
  }
}
</script>
