<!-- 数据卡片 -->
<script setup lang="ts">
import { TransitionPresets, useTransition } from "@vueuse/core";

const props = defineProps({
  students: {
    type: Number,
    default: 0,
    required: true,
  },
  focuses: {
    type: Number,
    default: 0,
    required: true,
  },
  trainings: {
    type: Number,
    default: 0,
    required: true,
  },
});
// 卡片数字动效
function countNumber(number) {
  return useTransition(number, {
    duration: 5000,
    transition: TransitionPresets.easeOutExpo,
  });
}
// 学生
const studentCount = ref(0);
const studentCountOutput = countNumber(studentCount);
// 脑电专注力测评次数
const focusCount = ref(0);
const focusCountOutput = countNumber(focusCount);
// 脑电检测次数
const trainingCount = ref(0);
const trainingCountOutput = countNumber(trainingCount);
onMounted(() => {
  studentCount.value = <number>props.students;
  focusCount.value = <number>props.focuses;
  trainingCount.value = <number>props.trainings;
});
</script>
<template>
  <div class="clear">
    <div class="data-card c1">
      <span class="n">{{ Math.round(studentCountOutput) }}</span
      ><span>参与测评学生总计</span>
    </div>
    <div class="data-card c2">
      <span class="n">{{ Math.round(focusCountOutput) }}</span
      ><span>脑电专注力测评次数</span>
    </div>
    <div class="data-card c3">
      <span class="n">{{ Math.round(trainingCountOutput) }}</span
      ><span>脑电检测次数</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.data-card {
  float: left;
  box-sizing: border-box;
  width: 300px;
  height: 140px;
  padding: 30px 0 0 30px;
  border: 1px solid #e6e8eb;
  margin: 0 20px 20px 0;
  border-radius: 30px;
  span {
    display: block;
    font-size: 18px;
    color: #23283c;
    &.n {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 15px;
    }
  }
  &.c1 {
    background: #fef6e9 url("../../../assets/evaluate/student.png") 90% 50%
      no-repeat;
    span.n {
      color: #e08e0a;
    }
  }
  &.c2 {
    background: #feeeee url("../../../assets/evaluate/focus.png") 90% 50%
      no-repeat;
    span.n {
      color: #ca7676;
    }
  }
  &.c3 {
    background: #d0f6f1 url("../../../assets/evaluate/training.png") 90% 50%
      no-repeat;
    span.n {
      color: #45a498;
    }
  }
}
</style>
