<template>
  <select :id="'enum-select-widget-' + field.id" v-model="selectedValue" class="form-control" :readonly="readonly" :disabled="readonly">
    <option v-for="keyValue in field.keyValues" :key="keyValue.keyStr" :value="keyValue.keyStr">{{ keyValue.value }}</option>
  </select>
</template>

<script>
export default {

  
  props: {
   
    readonly: {
      type: Boolean,
      default: null,
    },
    field: {
      type: Object,
      default : function(){
        return null;
      },
    },
    fieldValue: {
      type: Object,
      default : function(){
        return null;
      },
    },
  },
  
  emits: ['valueChanged'],

  data: function(){
    return {
      selectedValue: ((this.fieldValue == undefined || this.fieldValue.displayValue == undefined) ? '' : this.fieldValue.displayValue[0]),
    };
  },

  watch: {
    selectedValue: function(curVal,oldVal){
      if(curVal != oldVal){
        var newFieldValue = {
          displayValue: [curVal],
          fieldType: 'String',
        };
        this.$emit('valueChanged', newFieldValue);
      }
    },

    fieldValue: function(val){
      this.selectedValue = ((val == undefined || val.displayValue == undefined) ? '' : val.displayValue[0]);
    },
  },
};

</script>