<template>
  <div class="qf-badge" @click="onClick">
    <slot></slot>
    <transition name="qf-zoom-in-center">
      <sup
        v-show="!hidden && ( content || dot )"
        v-text="content"
        class="qf-badge__content"
        :class="{ 'is-fixed': $slots.default, 'is-dot': dot }">
      </sup>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'QfBadge',

  props: {
    value: {},
    max: {
      type: Number,
      default: 99
    },
    dot: Boolean,
    hidden: Boolean
  },

  computed: {
    content() {
      if (this.dot) return;

      const value = this.value;
      const max = this.max;

      if (typeof value === 'number' && typeof max === 'number') {
        return max < value ? `${max}+` : value;
      }

      return value;
    }
  },

  methods: {
    onClick() {
      this.$emit('click');
    }
  }
};
</script>
