<template>
  <i
    class="sv-badge"
    :class="[badgeSizeClass, badgeTypeClass, badgeColorClass, {'is-circle': isCircle}]"
    :style="badgeStyles">
    <slot></slot>
  </i>
</template>

<script>
  import v from '../../scripts/var'
  export default {
    name: 'svBadge',
    data () {
      return {
        badgeStyles: {
        },
        isCircle: this.circle
      }
    },
    props: {
      type: {
        type: String,
        default: 'fill'
      },
      color: {
        type: String,
        default: 'danger'
      },
      width: {
        type: String,
        default: 'auto'
      },
      size: {
        type: String,
        default: 'normal'
      },
      circle: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      badgeSizeClass () {
        return this.size !== 'normal' ? `sv-badge-${this.size}` : 'sv-badge-normal'
      },
      badgeColorClass () {
        let colorsObject = {
          light: 'light',
          stable: 'stable',
          primary: 'primary',
          info: 'info',
          danger: 'danger',
          success: 'success',
          warning: 'warning',
          lively: 'lively',
          royal: 'royal'
        }

        if (colorsObject[this.color]) {
          return `sv-badge-${this.color}`
        } else {
          this.$set(this.badgeStyles, 'color', this.color)
          if (this.type === 'fill') {
            this.$set(this.badgeStyles, 'background', this.color)
          }
        }
      },
      badgeTypeClass () {
        return `sv-badge-${this.type}`
      }
    },
    methods: {
      computedStyle () {
        const $el = this.$el
        if ($el.innerText) {
          if ($el.innerText.length === 1) {
            this.isCircle = true
          } else {
            $el.style.borderRadius = `${window.parseInt($el.offsetWidth / 2)}px`
          }
        }

        if (this.isCircle) {
          this.$nextTick(() => {
            $el.style.height = $el.offsetWidth + 'px'
          })
        }

        if (this.width) {
          $el.style.width = `${this.width / v.getDesignDraftHtmlFontSize()}rem`
        }
      }
    },
    mounted () {
      this.computedStyle()
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";

  .sv-badge{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-flow: nowrap;
    padding: pxToRem(7 12);
    line-height: 1;
    color: $color-light;
    font-style: normal;
    font-size: pxToRem(26);
    &.is-circle{
      padding-top:0;
      padding-bottom: 0;
      border-radius: 50%;
    }
    &.sv-badge-fill{
      &.sv-badge-light{
        background: $color-light;
        color:#333;
      }
      &.sv-badge-stable{
        background: $color-stable;
        color:#333;
      }
      &.sv-badge-success{
        background: $color-success;
      }
      &.sv-badge-warning{
        background: $color-warning;
      }
      &.sv-badge-info{
        background: $color-info;
      }
      &.sv-badge-danger{
        background: $color-danger;
      }
      &.sv-badge-primary{
        background: $color-primary;
      }
      &.sv-badge-lively{
        background: $color-lively;
      }
      &.sv-badge-royal{
        background: $color-royal;
      }
    }
    &.sv-badge-outline{
      border-width: 1px;
      border-style: solid;
      background: $color-light;
      &.sv-badge-light{
        border-color: $color-light;
        color: #333;
      }
      &.sv-badge-stable{
        border-color: $color-stable;
        color:$color-stable;
      }
      &.sv-badge-success{
        border-color: $color-success;
        color: $color-success;
      }
      &.sv-badge-warning{
        border-color: $color-warning;
        color: $color-warning;
      }
      &.sv-badge-info{
        border-color: $color-info;
        color: $color-info;
      }
      &.sv-badge-danger{
        border-color: $color-danger;
        color: $color-danger;
      }
      &.sv-badge-primary{
        border-color: $color-primary;
        color: $color-primary;
      }
      &.sv-badge-lively{
        border-color: $color-lively;
        color: $color-primary;
      }
      &.sv-badge-royal{
        border-color: $color-royal;
        color: $color-royal;
      }
    }
    &.sv-badge-small{
      padding: pxToRem(6 8)
    }
    &.sv-badge-large{
      padding: pxToRem(10 14);
    }
  }
</style>
