<template>
  <div>
    <label v-for="keyValue in field.keyValues" :key="keyValue.key" class="radio-inline">
      <input v-model="selectedValue" autocomplete="off" type="radio" :name="uuid" :value="keyValue.keyStr" :readonly="readonly" :disabled="readonly" /> {{ keyValue.value }}
    </label>
  </div>
</template>

<script>

import { Uuid } from 'pc-component-v3';

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]),
      uuid: Uuid.createUUID(),
    };
  },

  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) ? undefined : val.displayValue[0]);
    },
  },
};
</script>