<template>
  <div class="info-box clickable" @click="$emit('click')">
    <span class="info-box-icon">
      <svg-icon :icon-class="icon" />
    </span>
    <div class="info-box-content">
      <span class="info-box-text">{{ title }}</span>
      <span class="info-box-number">
        <slot name="text">{{ content }}</slot>
      </span>
      <div class="progress">
        <div class="progress-bar" :style="{ width: ratio + '%' }" />
      </div>
      <span class="progress-description">
        <slot name="desc">{{ desc }}</slot>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: ''
    },
    ratio: {
      type: Number,
      default: 0
    },
    desc: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.info-box {
  .info-box-icon {
    ::v-deep .svg-icon {
      width: 1.5em;
      height: 1.5em;
    }
  }
}
</style>
