<template>
  <div style="width: 100%;">
    <a-select
      :id="'enum-select-widget-' + field.id" v-model:value="selectedValue" style="width: 100%;"
      :disabled="readonly" @change="selectChanged"
    >
      <a-select-option v-for="keyValue in field.keyValues" :key="keyValue.keyStr" :value="keyValue.keyStr">
        {{ keyValue.value }}
      </a-select-option>
    </a-select>
  </div>
</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]),
      selectedValue: '',
    };
  },

  mounted() {
    if (this.fieldValue && this.fieldValue.displayValue && this.fieldValue.displayValue.length) {
      const newFieldValue = {
        displayValue: [this.fieldValue.displayValue[0]],
        fieldType: 'String',
      };
      this.$emit('valueChanged', newFieldValue);
      this.selectedValue = this.fieldValue.displayValue[0];
    } else {
      const newFieldValue = {
        displayValue: [this.field.defaultValue],
        fieldType: 'String',
      };
      this.$emit('valueChanged', newFieldValue);
      this.selectedValue = this.field.defaultValue;
    }
  },
  methods: {
    selectChanged(e) {
      const newFieldValue = {
        displayValue: [e],
        fieldType: 'String',
      };
      this.$emit('valueChanged', newFieldValue);
      this.selectedValue = e;
    },
  },
};

</script>