<template>
  <div class="proudsmart-m-select-drop">
    <ul class="proudsmart-m-select-drop__drop-box">
      <li class="proudsmart-m-select-drop__drop-box__item" v-for="(op, index) in options"
          :key="index"
          :class="hasSelectedClass(op)"
          @click="selectItem(op)">{{opLabel(op)}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'PsMSelectDrop',
  methods: {
    selectItem (op) {
      this.selectedOption = op;
      this.$parent.$emit('selectedOption', op);
    }
  },
  computed: {
    hasSelectedClass () {
      return function (op) {
        return {
          'is-selected': this.selectedOption === op
        };
      };
    },
    opLabel () {
      return function (op) {
        return op[this.format.label];
      };
    }
  },
  data () {
    return {
      selectedOption: null
    };
  },
  props: ['options', 'format', 'value'],
  mounted () {
    this.selectedOption = this.options.find(op => {
      return op[this.format.value] === this.value;
    });
  }
};
</script>
