<template>
  <div
    class="s-tab column flex-center relative-position"
    :class="classes"
    @click="select"
    v-ripple.mat
  >
    <s-icon v-if="icon" :name="icon" class="s-tab-icon"></s-icon>
    <span v-if="label" class="s-tab-label" v-html="label"></span>
    <s-chip v-if="count" floating>{{count}}</s-chip>
    <div v-else-if="alert" class="s-dot"></div>

    <slot></slot>

    <div
      v-if="$q.theme !== 'ios'"
      class="s-tabs-bar"
      :style="barStyle"
    ></div>
  </div>
</template>

<script>
import TabMixin from './tab-mixin'
import Ripple from '../directives/ripple'
import { QIcon } from '../icon'
import { QChip } from '../chips'

export default {
  name: 's-tab',
  components: {
    QIcon,
    QChip
  },
  directives: {
    Ripple
  },
  mixins: [TabMixin],
  props: {
    default: Boolean
  },
  methods: {
    select () {
      if (!this.disable) {
        this.selectTab(this.name)
      }
    }
  },
  mounted () {
    if (this.default && !this.disable) {
      this.select()
    }
  }
}
</script>
