<template>
  <div>
    <select
      :id="'enum-select-widget-' + field.id"
      v-model="selectedValue"
      class="form-control m-form-control"
      :readonly="readonly"
      :disabled="readonly"
    >
      <option
        v-for="keyValue in field.keyValues"
        :key="keyValue.keyStr"
        :value="keyValue.keyStr"
      >
        {{ keyValue.value }}
      </option>
    </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.field.defaultValue: this.fieldValue.displayValue[0]),
    };
  },

  watch: {
    selectedValue: function (curVal, oldVal) {
      console.log('selectedValue changed：' + curVal);
      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>

<style scoped>
.required-mark {
    color: red;
    margin-right: 10px;
}

.m-form-control{
    width: 100% !important;
}
</style>