<template>
  <a
    class="vux-button-tab-item"
    :class="classes"
    href="javascript:"
    :style="style"
    @click="onItemClick"
  >
    <slot />
  </a>
</template>

<script>
import { childMixin } from '../../mixins/multi-items'

export default {
  mixins: [childMixin],
  data () {
    return {
      shouldRemoveBorder: false
    }
  },
  computed: {
    classes () {
      return {
        'vux-button-group-current': this.currentIndex === this.$parent.currentIndex,
        'no-border-right': this.shouldRemoveBorder
      }
    },
    style () {
      if (this.$parent.height) {
        return {
          height: `${this.$parent.height}px`,
          lineHeight: `${this.$parent.height}px`
        }
      }
      return null
    }
  }
}
</script>
