
<template>
  <div class="badge-item">
      <div v-if="isDot" class='badge-dot'></div>
      <div v-if="!isDot && isSingle" class="badge-text-single">
        <text class='single-text'>{{text}}</text>
      </div>
      <div v-if="!isDot && !isSingle" class="badge-text">
        <text class='text'>{{text}}</text>
      </div>
  </div>
</template>

<style scoped>

  .badge-item {
    align-items: center;
  }
  .badge-dot{
    width: 20px;
    height: 20px;
    background-color: #ff5000;
    border-radius: 10px;
  }
  .badge-text-single{
    width: 36px;
    height: 36px;
    background-color: #ff5000;
    border-radius: 18px;
  }
  .single-text{
    position: absolute;
    width: 36px;
    text-align: center;
    color: #ffffff;
    font-size: 24px;
    height: 36px;
    line-height: 36px;
  }
  .badge-text {
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #ff5000;
    border-radius: 18px;
    text-align: center;
  }
  .text{
    color: #ffffff;
    font-size: 24px;
    height: 36px;
    line-height: 36px;
  }
</style>

<script>
  export default {
    props: {
      text: {
        type: [String, Number],
        default: ''
      }
    },
    computed:{
      isDot () {
        if((typeof this.text === 'undefined') || (typeof this.text !== 'undefined' && this.text.toString().length === 0)){
          return true;
        }else{
          return false;
        }
      },
      isSingle () {
        if(typeof this.text !== 'undefined' && this.text.toString().length === 1){
          return true;
        }else{
          return false;
        }
      }
    }
  }
</script>
