<template>
  <div class="uif-radio-group" :name="name">
    <u-radio v-for="data in options" :key="data.value" :disabled="disabled" v-bind="data"
                :value="currentValue === data.value" @u-change="onChange(data.value)"></u-radio>
  </div>
</template>

<script>
import URadio from '@uif/hq/src/components/radio'
export default {
  inheritAttrs: false,
  name: 'u-radio-group',
  components: {
    URadio
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default () {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (value) {
        this.currentValue = value
      }
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    onChange (name) {
      this.currentValue = name
      this.$emit('input', this.currentValue)
      this.$emit('u-change', this.currentValue)
    }
  }
}
</script>
