<script setup lang="ts">
import { ref, onMounted } from "vue";
import { teacherConsultStats } from "@/api";

interface TeacherStats {
  consultCount: number;
  replyCount: number;
  messageCount: number;
  [key: string]: number; // 添加索引签名
}

// 教师咨询数据
const teacherStats = ref<TeacherStats>({
  consultCount: 0,
  replyCount: 0,
  messageCount: 0,
});

// 获取教师咨询数据
const getTeacherStats = () => {
  teacherConsultStats().then((res) => {
    if (res.success) {
      teacherStats.value = res.data;
    }
  });
};

onMounted(() => {
  getTeacherStats();
});
</script>

<template>
  <div class="stats-container">
    <div class="stat-item blue-card">
      <div class="stat-icon">
        <img src="@/assets/img/zheke/ai-stats1.png" alt="咨询次数" />
      </div>
      <div class="stat-label">咨询次数</div>
      <div class="stat-value">
        {{ teacherStats.consultCount }}<span class="unit">次</span>
      </div>
    </div>

    <div class="stat-item orange-card">
      <div class="stat-icon">
        <img src="@/assets/img/zheke/ai-stats2.png" alt="回复数" />
      </div>
      <div class="stat-label">回复数</div>
      <div class="stat-value">
        {{ teacherStats.replyCount }}<span class="unit">次</span>
      </div>
    </div>

    <div class="stat-item cyan-card">
      <div class="stat-icon">
        <img src="@/assets/img/zheke/ai-stats4.png" alt="留言数" />
      </div>
      <div class="stat-label">留言数</div>
      <div class="stat-value">
        {{ teacherStats.messageCount }}<span class="unit">条</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.stats-container {
  display: flex;
  gap: 6px;
  height: 100%;
  margin-top: 10px;
}

.stat-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 10px;
  padding: 9px 0 0 14px;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  &.blue-card {
    background-image: url("@/assets/img/zheke/蓝色.png");
  }

  &.orange-card {
    background-image: url("@/assets/img/zheke/橙色.png");
  }

  &.cyan-card {
    background-image: url("@/assets/img/zheke/浅蓝色.png");
  }
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  img {
    width: 100%;
    height: 100%;
  }
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;

  .unit {
    font-size: 14px;
    margin-left: 2px;
  }
}

.stat-label {
  font-size: 14px;
  color: #fff;
  opacity: 0.9;
}
</style> 