<template>
  <div class="el-radio-group">
    <label
      class="el-radio"
      v-for="(item, index) in options"
      :key="index"
      @change="handeChange(item)"
    >
      <input type="radio" :name="_name" :checked="isChecked(item)" />{{
        labelKey ? item[labelKey] : item.name || item.label
      }}
    </label>
  </div>
</template>
<script>
export default {
  name: 'EoRadio',
  props: {
    field: {
      required: true,
      type: String
    },
    prop: String,
    index: Number,
    labelKey: String,
    valueKey: String,
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    value: {}
  },
  data() {
    return {
      _value: this.value
    };
  },
  computed: {
    _name() {
      if (this.index !== undefined) {
        return `${this.field || this.prop}[${this.index}]`;
      }
      return this.field || this.prop;
    }
  },
  methods: {
    isChecked(res) {
      return this.valueKey
        ? this.value == res[this.valueKey]
        : this.value == res.value;
    },
    handeChange(res) {
      this.$emit('input', this.valueKey ? res[this.valueKey] : res.value);
    }
  }
};
</script>
