<template>
  <div class="statistic">
    <div class="statistic-number">
      {{ isDecimal ? parseFloat(outputValue.toFixed(2)) : parseInt(outputValue) }}{{ valueUnit }}
    </div>
    <div class="statistic-title" :title="tooltip">{{ title }}</div>
  </div>
</template>
<script setup>
import {useTransition} from "@vueuse/core";

const props = defineProps({
  tooltip: {
    type: String,
    default: '',
  },
  title: {
    type: String
  },
  value: {
    type: Number,
    default: 0,
  },
  valueUnit: {
    type: String,
  },
  // 是否是小数
  isDecimal: {
    type: Boolean,
    default: false
  }
});

const value = ref(props.value);
console.log(
    value
)
watch(() => props.value, (val) => {
  value.value = val || 0;

})
const outputValue = useTransition(value, {
  duration: 1500,
});
</script>
<style lang="scss" scoped>
.statistic {
  text-align: center;
  cursor: pointer;
  .statistic-number {
    font-size: 39px;
    font-weight: 700;
    height: 64px;
    line-height: 64px;
    background: linear-gradient(
            270deg,
            rgba(3, 11, 57, 0) 0%,
            #00117d 49%,
            rgba(3, 11, 57, 0) 100%
    );
    margin-bottom: 14px;

    &::before,
    &::after {
      display: block;
      content: "";
      height: 4px;
      width: 85%;
      margin: auto;
      background: linear-gradient(
              270deg,
              rgba(1, 7, 94, 0) 0%,
              #213ffb 49%,
              rgba(1, 7, 93, 0) 100%
      );
    }
  }

  .statistic-title {
    font-size: 27px;
    white-space: break-spaces;
  }

  .statistic-footer {
    font-size: 27px;
  }
}
</style>
