<template>
  <div class="circle_number_chart" :data-title="title">
    <div :data-unit="unit">{{value}}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String },
    unit: { type: String },
    value: { type: [String, Number] }
  }
}
</script>

<style lang="scss" scoped>
.circle_number_chart {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 700;

  > div {
    margin-bottom: 12px;
    width: 180px;
    height: 180px;
    min-width: 138px;
    min-height: 138px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 26px;
    border: 36px solid #eff1f4;
    color: #888;
    position: relative;

    &::before {
      content: '';
      display: block;
      border: 20px solid $--color-primary;
      border-radius: inherit;
      box-sizing: border-box;
      position: absolute;
      left: -28px;
      top: -28px;
      right: -28px;
      bottom: -28px;
    }

    &::after {
      content: attr(data-unit);
      display: block;
      font-size: 12px;
      color: #8c8c8c;
    }
  }

  &::after {
    content: attr(data-title);
    font-size: 15px;
  }
}
</style>
