<template>
  <div class="ps-badge">
    <slot></slot>
    <transition name="ps-zoom-in-center">
      <sup
        v-show="!hidden && (content || content === 0 || isDot)"
        class="ps-badge__content"
        :class="[
          'ps-badge__content--' + type,
          {
            'is-fixed': $slots.default,
            'is-dot': isDot
          }
        ]"
        v-text="content"
      >
      </sup>
    </transition>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'

interface IBadgeProps {
  value: string | number
  max: number
  isDot: boolean
  hidden: boolean
  type: string
}

interface IBadgeSetups {
  content: number | string
}
export default defineComponent({
  name: 'PsBadge',
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    max: {
      type: Number,
      default: 99,
    },
    isDot: Boolean,
    hidden: Boolean,
    type: {
      type: String,
      default: 'primary',
      validator: (val: string) => {
        return ['primary', 'active', 'success', 'warning', 'info', 'danger'].includes(val)
      },
    },
  },
  setup(props) {
    const content = computed(() => {
      if (props.isDot) {
        return
      }
      if (typeof props.value === 'number' && typeof props.max === 'number') {
        return props.max < props.value ? `${props.max}+` : props.value
      }
      return props.value
    })
    return {
      content,
    }
  },
})
</script>
