<template>
  <span
    class="normal"
    :class="'style-' + type"
    :style="{
      backgroundColor: backgroundColor,
      color: color,
      fontSize: fontSize + 'px',
      fontWeight: fontWeight,
    }"
  >
    {{
      content
        ? type == 'more'
          ? '...'
          : content
        : type == 'mini'
        ? ''
        : type == 'number'
        ? '1'
        : type == 'text'
        ? 'new'
        : type == 'more'
        ? '...'
        : ''
    }}
  </span>
</template>

<script lang="ts">
import Vue, { VueConstructor } from 'vue';
import props from './props';
type PropType = {
  type: 'mini' | 'number' | 'text' | 'more';
  backgroundColor: string;
  color: string;
  fontSize: number;
  fontWeight: number;
  content: string;
};

export default (Vue as VueConstructor<Vue & PropType>).extend({
  name: 'k-badge',
  mixins: [props],
  data() {
    return {
      contentDefault: {
        mini: '',
        number: 10,
        text: 'new',
        more: '...',
      },
    };
  },
  methods: {},
});
</script>

<style scoped lang="scss">
.normal {
  text-align: center;
  position: absolute;
  display: block;
  z-index: 3;
}

.style-mini {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: -5px;
  right: -5px;
}

.style-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: -10px;
  right: -10px;
  line-height: 22px;
  padding: 2px;
}

.style-text {
  min-width: 25px;
  height: 20px;
  border-radius: 10px;
  top: -10px;
  right: -10px;
  line-height: 20px;
  padding-left: 5px;
  padding-right: 5px;
}

.style-more {
  width: 25px;
  height: 20px;
  border-radius: 10px;
  top: -10px;
  right: -10px;
  line-height: 15px;
  padding-left: 5px;
  padding-right: 5px;
}
</style>
