<template>
  <span class="n-btn-group" :class="classes">
    <template v-for="(button, index) in options">
      <n-button :key="index" v-bind="button" type="none" :active="index === nValue" :size="size"
                @click="onClick($event, button, index)">{{button.label}}</n-button>
    </template>
  </span>
</template>
<script>
import NButton from '@uif/next/lib/components/button'
import {prop} from '@uif/next/lib/utils/tools'
import vModel from '_common/vModel'

export default {
  name: 'n-button-group',
  components: {NButton},
  mixins: [vModel],
  props: {
    // 当前值
    value: prop.number(),
    // 切换选项
    options: prop.array(),
    // 大小
    type: prop.inArray(['default', 'primary'], 'default'),
    // 大小
    size: prop.inArray(['small', 'middle', 'large'], 'middle'),
    // 线框模式
    outline: prop.boolean(),
    // 圆角
    circle: prop.boolean()
  },
  data () {
    return {
      nValue: this.value
    }
  },
  computed: {
    classes ({type, outline, circle}) {
      return {
        ['n-btn-group-' + type]: true,
        outline,
        circle
      }
    }
  },
  methods: {
    onClick (event, button, index) {
      if (this.nValue !== index) {
        this.nValue = index
        this.$emit('u-change', index, button)
        this.$emit('click', event, button, index)
      }
    }
  }
}
</script>
