<template>
  <ul class="lanaya-select__drop">
    <li class="lanaya-select__drop--filter" v-if="filter" click-not-hidden="true">
      <l-input v-model="searchValue" width="100%"></l-input>
    </li>
    <li class="lanaya-select__drop--filter-no-data" v-if="needShowOptions.length < 1">
      没有符合条件的选项
    </li>
    <li class="lanaya-select__drop--item" v-for="(op, index) in needShowOptions"
        :key="index"
        :class="hasSelectedClass(op)"
        @click="selectItem(op)">{{opLabel(op)}}
    </li>
  </ul>
</template>
<script>
import LInput from './../input/Input';

export default {
  name: 'LSelectDrop',
  components: {
    LInput
  },
  methods: {
    selectItem (op) {
      this.selectedOption = op;
      this.$parent.$emit('selectedOption', op);
    }
  },
  computed: {
    needShowOptions () {
      return this.options.filter(op => {
        return (op[this.format.label] + '').includes(this.searchValue);
      });
    },
    hasSelectedClass () {
      return function (op) {
        return {
          'is-selected': this.selectedOption === op
        };
      };
    },
    opLabel () {
      return function (op) {
        return op[this.format.label];
      };
    }
  },
  props: ['options', 'format', 'value', 'filter'],
  data () {
    return {
      searchValue: '',
      selectedOption: null
    };
  },
  mounted () {
    this.selectedOption = this.options.find(op => {
      return op[this.format.value] === this.value;
    });
  }
};
</script>
