<template>
  <div class="app-wfversion-select">
    <ion-select v-model="selectValue" @ionChange="valueChange">
      <template v-for="item in versionItems">
        <ion-select-option :value="item[majorKey]" :key="item[majorKey]">
          <span>{{ item[versionTitle] }}</span>
        </ion-select-option>
      </template>
    </ion-select>
  </div>
</template>

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

@Component({})
export default class AppWFVersionSelect extends Vue {

  @Prop({ default: [] })
  public versionItems!: any[];

  @Prop({ default: 'definitionkey' })
  public majorKey!: string;

  @Prop({ default: 'definitionname' })
  public versionTitle?: string;

  public selectValue: any;

  @Watch('versionItems', {
    immediate: true
  })
  public onVersionItemSChange(newVal: any[], oldVal: any[]) {
    if (newVal.length !== 0) {
      this.selectValue = newVal[0][this.majorKey];
    }
  }

  public valueChange(event: any) {
    this.$emit('valueChange', event.detail.value);
  }


}
</script>