<template>
  <div class="select">
    <select @change="onChange">
      <option
        v-for="item in items"
        :selected="isSelected(item)"
        :key="metakey !== '' ? item[metakey] : item"
        :value="metakey !== '' ? item[metakey] : item">
        {{ metavalue !== '' ? item[metavalue] : item }}
      </option>
    </select>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

import ChangeEvent from '../../core/events/ChangeEvent'

@Component
export default class BaseSelect extends Vue {
  @Prop({ default () { return [] } }) items!: any[]
  @Prop() value!: any | null

  @Prop({ default: '' }) metakey!: string
  @Prop({ default: '' }) metavalue!: string

  isSelected (item: any) {
    if (this.metakey === '') {
      return item === this.value
    }
    return item[this.metakey] === this.value
  }

  onChange ($event: any) {
    const event = new ChangeEvent<any>()
    event.value = $event.target.value
    this.$emit('change', event)
  }
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";
@import "bulma/sass/form/shared.sass";
@import "bulma/sass/form/select.sass";
</style>
