<template>
 <span class='mu-badge' v-text='trustText' :style='style' :class="[{'mu-badge-single':single},badClass]">
 </span>
</template>
<script>
  export default {
    name: 'mu-badge',
    props: {
      badClass: [String],
      text:[String, Number],
      useDefaultRule:{
        type:Boolean,
        default:true,
      },
    },
    computed: {
      trustText(){
        if (this.useDefaultRule) {
          return Number(this.text) >= 100 ? '99+' : this.text;
        } else {
          return this.text;
        }
      },
      single () {
        return typeof this.text !== 'undefined' && this.text.toString().length === 1;
      },
      style(){
        const num = Number(this.text);
        let oStyle = {
          fontSize:'12px',
          borderRadius:'10px',
          height:'18px',
        };
        if (num < 10)  {
          oStyle.width = '18px';       
        } else if (num >= 10 && num < 100) {
          oStyle.width = '24px';     
        } else {
          oStyle.width = '32px';  
        }
        return oStyle;
      }
    },
  };
</script>
<style lang='less'>
  .mu-badge {
    color: #fff;
    width: 18px;
    height: 18px;
    margin-left: 0;
    margin-top: 5px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    background: #f53100;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    background-clip: padding-box;
  }
  .mu-badge-single {
    padding: 0;
    width: 18px;
  }
</style>
