<template>
  <div v-bind:class="[componentClass]">
    <div class='c-label' v-if="isLabel" >{{label}}</div>
    <div class='c-items'>
      <div class="c-item" v-for="(item, index) in items" :key="index" :class="{'c-checked': isChecked(item)}">
        <input 
           type="radio" 
           :id="getId+'_'+index" 
           :name="getId"
           :value="item.val"
           v-on:change="onValueChange($event, item.val)"
           :checked="isChecked(item)"/>
        <label class="c-radio" :for="getId+'_'+index" />
        <label class="c-label" :for="getId+'_'+index">{{item.cap}}</label>
      </div>
    </div>
  </div>
</template>

<script>

import base from './c-base'
import stringUtils from '../classes/stringUtils'
const props = {
  items:{
    type: Array,
    default: null,
    required: true
  },
  label:{
    type: String,
    default : null
  },
  dataFieldIdent: {
    type: String,
    default: null,
    required: true
  }
}

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-radiogroup'
    }
  },
  props,
  computed: {
    isLabel:function() {
      return !stringUtils.isEmpty(this.label)
    }
  },
  methods: {
    isChecked:function(item) {
      if(item == null) {
        return false
      }
      return this.getDataFieldValue(this.dataFieldIdent) == item.val
    },
    onValueChange: function(evt, value) {
      this.setDataFieldValue({
        dataFieldIdent: this.dataFieldIdent,
        dataFieldValue: value
      })
    }
  },
}</script>
