<template>
    <view class="dashboard-page" :style="safeAreaStyle">
        <!-- 左侧面板：用户信息 -->
        <view class="left-panel">
            <view class="brand">
                <view class="brand-title" data-content="学小乐AI">学小乐AI</view>
                <view class="brand-sub">教师端</view>
            </view>

            <view class="user-card" v-if="isLoggedIn">
                <image class="user-avatar" :src="teacherInfo.avatarUrl || defaultAvatar" mode="aspectFill" />
                <text class="user-name">{{ teacherInfo.nickName || teacherInfo.account || '老师' }}</text>
                <text class="user-school">{{ teacherInfo.schoolName || '' }}</text>
            </view>
            <view class="user-card login-card" v-else @click="goLogin">
                <image class="user-avatar" :src="defaultAvatar" mode="aspectFill" />
                <text class="user-name">点击登录</text>
            </view>

            <!-- 班级选择 -->
            <picker :range="classNames" @change="onClassPickerChange" :value="classPickerIndex" class="class-picker-wrap">
                <view class="class-picker-btn" :class="{ active: !!selectedClassId }">
                    <text class="class-picker-text">{{ selectedClassName || '选择班级' }}</text>
                    <text class="class-picker-arrow">▼</text>
                </view>
            </picker>

            <view class="left-actions">
                <view class="action-item" @click="handleNavigate('/pages/teacher/homework/filter')">
                    <text class="action-icon">📊</text>
                    <text class="action-label">学情报告</text>
                </view>
                <view class="action-item logout" v-if="isLoggedIn" @click="handleLogout">
                    <text class="action-label">退出登录</text>
                </view>
            </view>
        </view>

        <!-- 右侧面板：数据看板 -->
        <view class="right-panel">
            <!-- 顶部筛选栏 -->
            <view class="filter-bar" :style="topRightPaddingStyle">
                <!-- 学科标签（横向滚动） -->
                <scroll-view v-if="subjectList.length > 0" class="subject-scroll" scroll-x enhanced :show-scrollbar="false">
                    <view class="subject-tags">
                        <view
                            v-for="sub in subjectList"
                            :key="sub.value"
                            class="subject-tag"
                            :class="{ active: selectedSubjectIds.includes(sub.value) }"
                            @click="toggleSubject(sub.value)"
                        >
                            <text>{{ sub.label }}</text>
                        </view>
                    </view>
                </scroll-view>

                <!-- 日期选择 -->
                <view class="date-group">
                    <picker mode="date" :value="startTime" @change="onStartChange">
                        <view class="date-chip" :class="{ filled: !!startTime }">
                            <text>{{ startTime || '开始' }}</text>
                        </view>
                    </picker>
                    <text class="date-sep">~</text>
                    <picker mode="date" :value="endTime" @change="onEndChange">
                        <view class="date-chip" :class="{ filled: !!endTime }">
                            <text>{{ endTime || '结束' }}</text>
                        </view>
                    </picker>
                </view>

                <!-- 查询按钮 -->
                <view class="query-btn" @click="fetchOverview">
                    <text>查询</text>
                </view>
            </view>

            <!-- 看板内容区 -->
            <scroll-view class="dashboard-body" scroll-y enhanced :show-scrollbar="false">
                <!-- 加载 / 空状态 -->
                <view v-if="loading" class="status-box">
                    <text class="status-text">加载中...</text>
                </view>
                <view v-else-if="!selectedClassId" class="status-box">
                    <text class="status-text">请选择班级查看数据</text>
                </view>
                <view v-else-if="errorMsg" class="status-box error">
                    <text class="status-text">{{ errorMsg }}</text>
                </view>
                <view v-else-if="overviewData" class="dashboard-content">
                    <!-- 核心指标卡片 -->
                    <view class="metrics-row">
                        <view class="metric-card paper">
                            <view class="metric-icon">📄</view>
                            <view class="metric-info">
                                <text class="metric-value">{{ overviewData.aiPaperCount || 0 }}<text class="metric-unit">份</text></text>
                                <text class="metric-label">AI小助手为您批改试卷</text>
                            </view>
                        </view>
                        <view class="metric-card title">
                            <view class="metric-icon">📝</view>
                            <view class="metric-info">
                                <text class="metric-value">{{ overviewData.aiTitleCount || 0 }}<text class="metric-unit">个</text></text>
                                <text class="metric-label">AI小助手为您批改题目</text>
                            </view>
                        </view>
                    </view>

                    <!-- 节约时间提示横幅 -->
                    <view class="save-time-banner">
                        <text class="save-time-icon">🎉</text>
                        <text class="save-time-text">{{ saveTimeText }}</text>
                    </view>

                    <!-- 成绩分布（全宽） -->
                    <view class="grade-section">
                        <view class="section-head">
                            <text class="section-title">成绩分布</text>
                        </view>
                        <view class="grade-cards">
                            <view class="grade-card excellent">
                                <view class="grade-card-top">
                                    <text class="grade-card-count">{{ overviewData.excellentCount || 0 }}</text>
                                    <text class="grade-card-rate">{{ formatRate(overviewData.excellentRate) }}</text>
                                </view>
                                <view class="grade-card-bar">
                                    <view class="grade-card-fill" :style="{ width: (overviewData.excellentRate || 0) + '%' }" />
                                </view>
                                <text class="grade-card-label">优秀</text>
                            </view>
                            <view class="grade-card good">
                                <view class="grade-card-top">
                                    <text class="grade-card-count">{{ overviewData.goodCount || 0 }}</text>
                                    <text class="grade-card-rate">{{ formatRate(overviewData.goodRate) }}</text>
                                </view>
                                <view class="grade-card-bar">
                                    <view class="grade-card-fill" :style="{ width: (overviewData.goodRate || 0) + '%' }" />
                                </view>
                                <text class="grade-card-label">良好</text>
                            </view>
                            <view class="grade-card pass">
                                <view class="grade-card-top">
                                    <text class="grade-card-count">{{ overviewData.passCount || 0 }}</text>
                                    <text class="grade-card-rate">{{ formatRate(overviewData.passRate) }}</text>
                                </view>
                                <view class="grade-card-bar">
                                    <view class="grade-card-fill" :style="{ width: (overviewData.passRate || 0) + '%' }" />
                                </view>
                                <text class="grade-card-label">合格</text>
                            </view>
                            <view class="grade-card unsub">
                                <view class="grade-card-top">
                                    <text class="grade-card-count">{{ overviewData.unsubmittedCount || 0 }}</text>
                                    <text class="grade-card-rate">{{ formatRate(overviewData.unsubmittedRate) }}</text>
                                </view>
                                <view class="grade-card-bar">
                                    <view class="grade-card-fill" :style="{ width: (overviewData.unsubmittedRate || 0) + '%' }" />
                                </view>
                                <text class="grade-card-label">未提交</text>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { teacher } from '@/store/teacher';
import { user } from '@/store';
import { storeToRefs } from 'pinia';
import {
    getClassListByTeacher,
    getSubjectListByClassId,
    getAiCorrectionOverview,
} from '@/api/teacher';
import type { AiCorrectionOverview } from '@/api/teacher';

const OSS_URL = 'https://xxl-1313840333.cos.ap-guangzhou.myqcloud.com';
const defaultAvatar = `${OSS_URL}/urm/logo.png`;

const teacherStore = teacher();
const userStore = user();
const { teacherInfo, schoolId } = storeToRefs(teacherStore);
const { token } = storeToRefs(userStore);

const isLoggedIn = computed(() => !!token.value && !!teacherInfo.value.id);

// ==================== 安全区域 / 胶囊 ====================
const topPaddingRightRpx = ref(0);
const safeAreaLeftRpx = ref(0);
const topRightPaddingStyle = computed(() =>
    topPaddingRightRpx.value > 0 ? { paddingRight: topPaddingRightRpx.value + 'rpx' } : {},
);
const safeAreaStyle = computed(() => {
    const style: Record<string, string> = {};
    if (safeAreaLeftRpx.value > 0) style.paddingLeft = safeAreaLeftRpx.value + 'rpx';
    return style;
});
function getCapsulePadding() {
    try {
        // #ifdef MP-WEIXIN
        const menuButton = uni.getMenuButtonBoundingClientRect();
        const sys = uni.getSystemInfoSync();
        if (menuButton && sys?.windowWidth) {
            const r = 750 / sys.windowWidth;
            topPaddingRightRpx.value = Math.ceil((sys.windowWidth - menuButton.left) * r) + 24;
        } else {
            topPaddingRightRpx.value = 140;
        }
        if (sys?.safeArea && sys.safeArea.left > 0) {
            safeAreaLeftRpx.value = Math.ceil(sys.safeArea.left * (750 / (sys.windowWidth || sys.screenWidth))) + 4;
        }
        // #endif
    } catch {
        topPaddingRightRpx.value = 140;
    }
}

// ==================== 导航 / 操作 ====================
const handleNavigate = (url: string) => {
    if (!token.value) {
        uni.navigateTo({ url: `/pages/login/index?redirect=${encodeURIComponent(url)}` });
        return;
    }
    uni.navigateTo({ url });
};
const goLogin = () => uni.navigateTo({ url: '/pages/login/index' });
const handleLogout = () => {
    uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                teacherStore.clear();
                userStore.logout();
            }
        },
    });
};

// ==================== 筛选状态 ====================
// 班级
const classList = ref<{ id: string; name: string }[]>([]);
const classPickerIndex = ref(0);
const selectedClassId = ref('');
const selectedClassName = computed(() => {
    const cls = classList.value.find((c) => c.id === selectedClassId.value);
    return cls?.name || '';
});
const classNames = computed(() => classList.value.map((c) => c.name));

function onClassPickerChange(e: any) {
    const idx = Number(e.detail.value);
    classPickerIndex.value = idx;
    if (classList.value[idx]) {
        selectedClassId.value = classList.value[idx].id;
    }
}

// 学科
const subjectList = ref<{ value: number; label: string }[]>([]);
const selectedSubjectIds = ref<number[]>([]);

function toggleSubject(value: number) {
    const idx = selectedSubjectIds.value.indexOf(value);
    if (idx >= 0) {
        selectedSubjectIds.value = selectedSubjectIds.value.filter((v) => v !== value);
    } else {
        selectedSubjectIds.value = [...selectedSubjectIds.value, value];
    }
}

// 监听班级变化 → 加载学科
watch(() => selectedClassId.value, async (newId) => {
    selectedSubjectIds.value = [];
    subjectList.value = [];
    if (!newId) return;
    try {
        const res = await getSubjectListByClassId(newId);
        const data = res?.data ?? res;
        if (Array.isArray(data)) {
            subjectList.value = data.map((item: any) => ({
                value: Number(item.subjectId ?? item.id ?? item.value),
                label: item.subjectName ?? item.name ?? item.label ?? '',
            }));
        }
        // 自动选中老师对应学科
        const tid = Number(teacherInfo.value?.subjectId);
        if (!isNaN(tid) && tid && subjectList.value.some((s) => s.value === tid)) {
            selectedSubjectIds.value = [tid];
        }
    } catch (e) {
        console.error('获取学科列表失败', e);
    }
    // 选择班级后自动查询
    fetchOverview();
});

// 日期（默认当天）
function getTodayStr() {
    const d = new Date();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}
const startTime = ref(getTodayStr());
const endTime = ref(getTodayStr());
function onStartChange(e: any) { startTime.value = e.detail?.value || ''; }
function onEndChange(e: any) { endTime.value = e.detail?.value || ''; }

// ==================== 看板数据 ====================
const overviewData = ref<AiCorrectionOverview | null>(null);
const loading = ref(false);
const errorMsg = ref('');

// 节约时间友好文案
const saveTimeText = computed(() => {
    const mins = overviewData.value?.teacherSaveTimeMinutes || 0;
    const suffix = '，请您注意休息！';
    if (mins <= 0) return 'AI小助手已就绪，随时为您节省批阅时间' + suffix;
    if (mins >= 1440) {
        const days = (mins / 1440).toFixed(1).replace(/\.0$/, '');
        return 'AI小助手已为您节省了 ' + days + ' 天的批阅时间' + suffix;
    }
    if (mins >= 60) {
        const hours = (mins / 60).toFixed(1).replace(/\.0$/, '');
        return 'AI小助手已为您节省了 ' + hours + ' 小时的批阅时间' + suffix;
    }
    return 'AI小助手已为您节省了 ' + mins + ' 分钟的批阅时间' + suffix;
});

function formatRate(rate: number | undefined | null): string {
    if (rate == null) return '0%';
    return (typeof rate === 'number' ? (rate > 1 ? rate.toFixed(1) : (rate * 100).toFixed(1)) : rate) + '%';
}

async function fetchOverview() {
    if (!selectedClassId.value) return;
    loading.value = true;
    errorMsg.value = '';
    try {
        const params: any = { classId: selectedClassId.value };
        if (schoolId.value) params.schoolId = schoolId.value;
        if (selectedSubjectIds.value.length > 0) params.subjectIds = selectedSubjectIds.value;
        if (startTime.value?.trim()) params.startTime = startTime.value.trim();
        if (endTime.value?.trim()) params.endTime = endTime.value.trim();

        const res = await getAiCorrectionOverview(params);
        overviewData.value = (res?.data ?? res) as AiCorrectionOverview;
    } catch (e) {
        console.error('获取看板数据失败', e);
        errorMsg.value = '加载失败，请重试';
        overviewData.value = null;
    } finally {
        loading.value = false;
    }
}

// ==================== 初始化 ====================
const fetchClassList = async () => {
    try {
        const res = await getClassListByTeacher();
        const data = res?.data ?? res;
        classList.value = Array.isArray(data) ? data : data?.list ?? data?.rows ?? [];
        // 如果只有一个班级，自动选中
        if (classList.value.length === 1) {
            selectedClassId.value = classList.value[0].id;
            classPickerIndex.value = 0;
        }
    } catch (e) {
        console.error('获取班级列表失败', e);
    }
};

const fetchTeacherInfo = async () => {
    if (!token.value) return;
    try {
        await teacherStore.getLoginUser();
    } catch (e) {
        console.error('获取老师信息失败', e);
    }
};

onShow(async () => {
    getCapsulePadding();
    if (token.value) {
        await fetchTeacherInfo();
        if (classList.value.length === 0) {
            await fetchClassList();
        }
    }
});
</script>

<style lang="scss" scoped>
$teacher-bg: 'https://xxl-1313840333.cos.ap-guangzhou.myqcloud.com/urm/main_bg.svg';

.dashboard-page {
    height: 100vh;
    width: 100vw;
    background-image: url($teacher-bg);
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

// ========== 左侧面板 ==========
.left-panel {
    width: 140rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16rpx 8rpx;
    box-sizing: border-box;
    flex-shrink: 0;
}

.brand {
    text-align: center;
    margin-bottom: 12rpx;

    .brand-title {
        font-family: $font-special;
        font-size: 20rpx;
        color: #fff;
        @include font-stroke($font-color, 2rpx);
    }
    .brand-sub {
        font-size: 12rpx;
        color: rgba(255, 255, 255, 0.9);
        margin-top: 2rpx;
    }
}

.user-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12rpx;
    padding: 10rpx 6rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: 1rpx solid rgba(196, 181, 255, 0.25);

    .user-avatar {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        border: 2rpx solid rgba(196, 181, 255, 0.4);
        margin-bottom: 6rpx;
    }
    .user-name {
        font-family: $font-special;
        font-size: 14rpx;
        color: $font-color;
        @include single-ellipsis;
        max-width: 100%;
        text-align: center;
    }
    .user-school {
        font-size: 10rpx;
        color: #888;
        margin-top: 2rpx;
        @include single-ellipsis;
        max-width: 100%;
        text-align: center;
    }

    &.login-card {
        cursor: pointer;
    }
}

// 班级选择器
.class-picker-wrap {
    width: 100%;
    margin-top: 8rpx;
}

.class-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rpx;
    padding: 8rpx 6rpx;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8rpx;
    border: 1rpx solid rgba(196, 181, 255, 0.3);

    .class-picker-text {
        font-family: $font-special;
        font-size: 13rpx;
        color: #666;
        @include single-ellipsis;
        max-width: 100rpx;
    }
    .class-picker-arrow {
        font-size: 10rpx;
        color: #aaa;
    }

    &.active {
        background: linear-gradient(135deg, #8f9df7 0%, #cab5ff 100%);
        border-color: #8f9df7;
        .class-picker-text { color: #fff; font-weight: 600; }
        .class-picker-arrow { color: rgba(255, 255, 255, 0.8); }
    }

    &:active { opacity: 0.85; }
}

.left-actions {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6rpx;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8rpx 4rpx;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8rpx;
    border: 1rpx solid rgba(196, 181, 255, 0.2);

    .action-icon {
        font-size: 18rpx;
        margin-bottom: 2rpx;
    }
    .action-label {
        font-family: $font-special;
        font-size: 11rpx;
        color: #666;
    }

    &.logout {
        background: rgba(255, 255, 255, 0.6);
        .action-label { color: #999; }
    }

    &:active { opacity: 0.8; }
}

// ========== 右侧面板 ==========
.right-panel {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 12rpx 0 6rpx;
}

// ========== 筛选栏 ==========
.filter-bar {
    display: flex;
    align-items: center;
    gap: 6rpx;
    padding: 6rpx 0 4rpx;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 3rpx;
    padding: 4rpx 10rpx;
    background: rgba(255, 255, 255, 0.9);
    border: 1rpx solid rgba(196, 181, 255, 0.3);
    border-radius: 6rpx;
    flex-shrink: 0;

    .filter-chip-text {
        font-family: $font-special;
        font-size: 13rpx;
        color: #666;
        max-width: 120rpx;
        @include single-ellipsis;
    }
    .filter-chip-arrow {
        font-size: 10rpx;
        color: #aaa;
    }

    &.active {
        background: linear-gradient(135deg, #8f9df7 0%, #cab5ff 100%);
        border-color: #8f9df7;
        .filter-chip-text { color: #fff; font-weight: 600; }
        .filter-chip-arrow { color: rgba(255, 255, 255, 0.8); }
    }
}

.subject-scroll {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.subject-tags {
    display: inline-flex;
    gap: 4rpx;
    padding-right: 4rpx;
}

.subject-tag {
    padding: 3rpx 8rpx;
    border-radius: 6rpx;
    background: rgba(255, 255, 255, 0.8);
    border: 1rpx solid rgba(196, 181, 255, 0.25);
    flex-shrink: 0;

    text {
        font-family: $font-special;
        font-size: 12rpx;
        color: #888;
    }

    &.active {
        background: linear-gradient(135deg, #5b6ef7 0%, #8f6df7 100%);
        border-color: #5b6ef7;
        text { color: #fff; font-weight: 600; }
    }
}

.date-group {
    display: flex;
    align-items: center;
    gap: 3rpx;
    flex-shrink: 0;
}

.date-chip {
    padding: 3rpx 8rpx;
    border-radius: 6rpx;
    background: rgba(255, 255, 255, 0.8);
    border: 1rpx solid rgba(196, 181, 255, 0.25);

    text {
        font-size: 12rpx;
        color: #999;
    }

    &.filled {
        border-color: #8f9df7;
        text { color: #8f9df7; }
    }
}

.date-sep {
    font-size: 11rpx;
    color: #999;
}

.query-btn {
    padding: 4rpx 14rpx;
    border-radius: 6rpx;
    background: linear-gradient(135deg, #8f9df7 0%, #cab5ff 100%);
    flex-shrink: 0;

    text {
        font-family: $font-special;
        font-size: 12rpx;
        color: #fff;
        font-weight: 600;
    }

    &:active { opacity: 0.8; }
}

// ========== 看板主体 ==========
.dashboard-body {
    flex: 1;
    height: 0;
}

.status-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60rpx 20rpx;

    .status-text {
        font-family: $font-special;
        font-size: 16rpx;
        color: #fff;
        text-shadow: 0 1rpx 4rpx rgba(143, 157, 247, 0.5);
    }

    &.error .status-text { color: #ffb3b3; text-shadow: 0 1rpx 4rpx rgba(224, 80, 64, 0.4); }
}

.dashboard-content {
    padding: 2rpx 0 12rpx;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

// ========== 核心指标卡片 ==========
.metrics-row {
    display: flex;
    gap: 10rpx;
}

.metric-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10rpx;
    padding: 16rpx 14rpx;
    border-radius: 12rpx;
    border: 1rpx solid rgba(196, 181, 255, 0.18);
    background: rgba(255, 255, 255, 0.95);

    .metric-icon {
        font-size: 32rpx;
        flex-shrink: 0;
    }

    .metric-info {
        display: flex;
        flex-direction: column;
    }

    .metric-value {
        font-family: $font-special;
        font-size: 32rpx;
        font-weight: 700;
        color: $font-color;
        line-height: 1.1;
    }

    .metric-unit {
        font-size: 14rpx;
        font-weight: 400;
        color: #999;
        margin-left: 2rpx;
    }

    .metric-label {
        font-size: 13rpx;
        color: #999;
        margin-top: 3rpx;
    }

    &.paper {
        background: linear-gradient(135deg, #eee8ff 0%, #fff 100%);
        border-color: rgba(143, 157, 247, 0.3);
        .metric-value { color: #6c5ce7; }
    }
    &.title {
        background: linear-gradient(135deg, #e3ecff 0%, #fff 100%);
        border-color: rgba(91, 141, 239, 0.3);
        .metric-value { color: #3867d6; }
    }
}

// ========== 节约时间横幅 ==========
.save-time-banner {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 10rpx 16rpx;
    background: linear-gradient(135deg, rgba(47, 173, 99, 0.1) 0%, rgba(80, 216, 128, 0.08) 100%);
    border: 1rpx solid rgba(47, 173, 99, 0.2);
    border-radius: 10rpx;

    .save-time-icon {
        font-size: 20rpx;
        flex-shrink: 0;
    }
    .save-time-text {
        font-family: $font-special;
        font-size: 15rpx;
        color: #fff;
        font-weight: 500;
    }
}

// ========== 成绩分布标题 ==========
.section-head {
    margin-bottom: 8rpx;

    .section-title {
        font-family: $font-special;
        font-size: 18rpx;
        font-weight: 600;
        color: $font-color;
    }
}

// ========== 成绩分布 ==========
.grade-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12rpx;
    padding: 14rpx 16rpx;
    border: 1rpx solid rgba(196, 181, 255, 0.18);
    flex: 1;
}

.grade-cards {
    display: flex;
    gap: 10rpx;
}

.grade-card {
    flex: 1;
    padding: 12rpx 14rpx;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;

    .grade-card-top {
        display: flex;
        align-items: baseline;
        gap: 6rpx;
        margin-bottom: 6rpx;
    }

    .grade-card-count {
        font-family: $font-special;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 1;
    }

    .grade-card-rate {
        font-size: 13rpx;
        opacity: 0.7;
    }

    .grade-card-bar {
        height: 6rpx;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 6rpx;
        overflow: hidden;
        margin-bottom: 6rpx;
    }

    .grade-card-fill {
        height: 100%;
        border-radius: 6rpx;
        background: rgba(255, 255, 255, 0.7);
        transition: width 0.5s ease;
    }

    .grade-card-label {
        font-family: $font-special;
        font-size: 13rpx;
        font-weight: 500;
    }

    &.excellent {
        background: linear-gradient(135deg, #e0fae9 0%, #c8f5d8 100%);
        border: 1rpx solid rgba(47, 173, 99, 0.15);
        .grade-card-count { color: #20a04b; }
        .grade-card-rate { color: #20a04b; }
        .grade-card-label { color: #2fad63; }
        .grade-card-fill { background: #2fad63; }
    }
    &.good {
        background: linear-gradient(135deg, #e3ecff 0%, #d0dfff 100%);
        border: 1rpx solid rgba(91, 141, 239, 0.15);
        .grade-card-count { color: #3867d6; }
        .grade-card-rate { color: #3867d6; }
        .grade-card-label { color: #5b8def; }
        .grade-card-fill { background: #5b8def; }
    }
    &.pass {
        background: linear-gradient(135deg, #fff5e0 0%, #ffeccc 100%);
        border: 1rpx solid rgba(247, 166, 53, 0.15);
        .grade-card-count { color: #d68f00; }
        .grade-card-rate { color: #d68f00; }
        .grade-card-label { color: #f7a635; }
        .grade-card-fill { background: #f7a635; }
    }
    &.unsub {
        background: linear-gradient(135deg, #ffe8e5 0%, #ffd6d2 100%);
        border: 1rpx solid rgba(224, 80, 64, 0.15);
        .grade-card-count { color: #c0392b; }
        .grade-card-rate { color: #c0392b; }
        .grade-card-label { color: #e05040; }
        .grade-card-fill { background: #e05040; }
    }
}

</style>
