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

const props = defineProps({
  students: {
    type: Number,
    default: 0,
    required: true,
  },
  games: {
    type: Number,
    default: 0,
    required: true,
  },
  schools: {
    type: Number,
    default: 0,
    required: true,
  },
});
// 卡片数字动效
function countNumber(number: any) {
  return useTransition(number, {
    duration: 5000,
    transition: TransitionPresets.easeOutExpo,
  });
}
// 样本人数
const studentsCount = ref(0);
const studentsCountOutput = countNumber(studentsCount);
// 累计训练次数
const gamesCount = ref(0);
const gamesCountOutput = countNumber(gamesCount);
// 全部学校
const schoolsCount = ref(0);
const schoolsCountOutput = countNumber(schoolsCount);
// 监听数据变化
watchEffect(() => {
	studentsCount.value = <number>props.students;
	gamesCount.value = <number>props.games;
	schoolsCount.value = <number>props.schools;
});
</script>
<template>
  <div class="clear">
    <div class="data-card c1">
      <span class="n">{{ Math.round(Number(studentsCountOutput)) }}</span
      ><span>样本人数</span>
    </div>
    <div class="data-card c2">
      <span class="n">{{ Math.round(Number(gamesCountOutput)) }}</span
      ><span>累计训练次数</span>
    </div>
    <div class="data-card c3">
      <span class="n">{{ Math.round(Number(schoolsCountOutput)) }}</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/areaboard/students.png") 90% 50%
      no-repeat;
    span.n {
      color: #e08e0a;
    }
  }
  &.c2 {
    background: #feeeee url("../../../assets/areaboard/games.png") 90% 50%
      no-repeat;
    span.n {
      color: #ca7676;
    }
  }
  &.c3 {
    background: #d0f6f1 url("../../../assets/areaboard/schools.png") 90% 50%
      no-repeat;
    span.n {
      color: #45a498;
    }
  }
}
</style>
