<template>
  <div class="count-item">
    <div class="flex align-center">
      <img v-if="type == 0" src="@/assets/images/dot-primary.svg" />
      <img v-if="type == 1" src="@/assets/images/dot-error.svg" />
      <span class="label">{{ label }}</span>
    </div>
    <div class="count">
      <img v-if="type == 0" class="bg" src="@/assets/images/mask-success.png" />
      <img v-if="type == 1" class="bg" src="@/assets/images/mask-error.png" />
      <div class="flex align-center">
        <countup class="value" :end-val="count" :style="{ color: color }" />
        <span class="suffix" :style="{ color: color }">{{ suffix }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
  import countup from 'vue-countup-v3'

  let props = defineProps({
    label: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    },
    type: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: '#02f9fa'
    },
    mode: {
      type: Number,
      default: 0
    },
    suffix: {
      type: String,
      default: ''
    }
  })
</script>

<style scoped lang="scss">
  .count-item {
    flex: 1;
    .label {
      font-weight: 400;
      font-size: vw(14);
      margin-left: vw(4);
      color: rgba(255, 255, 255, 0.9);
    }
    .count {
      position: relative;
      margin-top: vh(10);
      z-index: 1;
      .value {
        padding-left: vw(20);
        font-weight: bold;
        font-size: vw(28);
        color: #02f9fa;
      }
      .suffix {
        margin-top: vh(4);
        font-weight: bold;
        font-size: vw(12);
        color: #02f9fa;
      }
      .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: vw(134);
        height: vh(30);
        z-index: -1;
      }
    }
  }
</style>
