<template>
    <home-container>
        <div class="question-statistics-container">



            <!-- 加载状态 -->
            <div v-if="loading" class="loading-container">
                <text>加载中...</text>
            </div>

            <!-- 统计表格区域 - 遍历分组后的数据 -->
            <div v-else class="statistics-section">
                <div v-for="(group, index) in groupedData" :key="index" class="statistic-table-wrapper">
                    <!-- 每个统计表格的标题 - 使用deptName -->
                    <h2 class="table-title">{{ group.title }}</h2>

                    <!-- statistic-table组件 -->
                    <statistic-table :columns="tableColumns" :data="group.data" >
                        <template #column-progress="{ row, index }">
                            <view class="progress-container">
                                <u-line-progress :percentage="Math.round(row.progress * 100)" :showText="false"
                                    :activeColor="getProgressColor(row.progress * 100)" height="20rpx"
                                    width="200rpx"></u-line-progress>
                                <text class="progress-text">{{ Math.round(row.progress * 100) }}%</text>
                            </view>
                        </template>
                    </statistic-table>
                </div>

                <!-- 无数据提示 -->
                <div v-if="groupedData.length === 0" class="no-data">
                    <text>暂无统计数据</text>
                </div>
            </div>
        </div>
    </home-container>
</template>

<script>
import HomeContainer from "@/components/HomeContainer.vue";
import StatisticTable from "@/components/statistic-table/statistic-table.vue";
import { getDailyAllUsersRanking } from "@/api/questionStatistics/questionStatistics";

export default {
    name: 'QuestionStatistics',
    components: {
        HomeContainer,
        StatisticTable
    },
    data() {
        return {
            loading: false,
            // 固定的表格列配置
            tableColumns: [
                { props: 'userName', title: '姓名' },
                { props: 'completedTasks', title: '答题进度' },
                { props: 'avgScore', title: '平均分' },
                { props: 'progress', title: '完成率', slot: true }
            ],
            // 分组后的数据
            groupedData: [],
            // 原始接口数据
            apiData: []
        };
    },
    mounted() {
        this.getDailyAllUsersRanking();
    },
    methods: {
        async getDailyAllUsersRanking() {
            const res = await getDailyAllUsersRanking({
                pageNum: 1,
                pageSize: 100
            });
            console.log('getDailyAllUsersRanking', res);
            if (res.code === 200) {
                this.apiData = res.data.rows || [];

                this.groupDataByDept();
            } else {
                uni.showToast({
                    title: '获取数据失败',
                    icon: 'none'
                });
            }
        },
        // 按照deptName分组数据
        groupDataByDept() {
            if (!this.apiData || this.apiData.length === 0) {
                this.groupedData = [];
                return;
            }

            // 使用Map来分组数据
            const deptMap = new Map();

            this.apiData.forEach(item => {
                const deptName = item.deptName || '未知部门';

                if (!deptMap.has(deptName)) {
                    deptMap.set(deptName, []);
                }

                // 格式化数据，确保包含所有需要的字段
                const formattedItem = {
                    userName: item.userName || '未知用户',
                    completedTasks: item.completedTasks,
                    avgScore: item.avgScore || 0,
                    progress: item.completedTasks == 0 ? 0 : item.completedTasks / item.totalTasks
                };

                deptMap.get(deptName).push(formattedItem);
            });

            // 转换为数组格式
            this.groupedData = Array.from(deptMap.entries()).map(([deptName, data]) => ({
                title: deptName,
                data: data
            }));

            console.log('分组后的数据:', this.groupedData);
        },
        // 根据完成比例返回对应的颜色
        getProgressColor(percentage) {
            if (percentage >= 100) {
                return '#2B7BFF'; // 大于等于100%时使用蓝色
            } else if (percentage > 0 && percentage < 100) {
                return '#03AF43'; // 0-100%之间使用绿色
            } else {
                return '#E40808'; // 0%时使用红色
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.question-statistics-container {
    padding: 32rpx;
}



.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    font-size: 32rpx;
    color: #666;
}

.statistics-section {
    display: flex;
    flex-direction: column;
    gap: 48rpx;
}

.statistic-table-wrapper {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

    .table-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 24rpx;
        padding-bottom: 16rpx;
        border-bottom: 2rpx solid #f0f0f0;
    }
}

.no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    font-size: 32rpx;
    color: #999;
    background: #f8f8f8;
    border-radius: 16rpx;
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .progress-text {
        font-size: 24rpx;
        color: #4873E3;
        font-weight: 500;
        min-width: 60rpx;
    }
}
</style>