<template>
  <div class="th-radio-group">
    <div class="btn" :class="{active:currentValue===item.value}" v-for="item in btns" :key="item.value" @click="handleClick(item)" :style="`width: ${100/btns.length}%;`">{{item.name}}</div>
  </div>
</template>

<script>
export default {
  props: ['btns', 'modelValue'],
  emits: ['on-change', 'update:modelValue'],
  methods: {
    handleClick(item) {
      this.$emit('update:modelValue', item.value)
      this.$emit('on-change', item.value)
    }
  },
  mounted() {
    this.currentValue = this.modelValue
  },
  data() {
    return {
      currentValue: this.modelValue || ''
    }
  },
  watch: {
    modelValue() {
      this.currentValue = this.modelValue
    }
  }
}
</script>
