<template>
    <!-- 班主任点名列表 -->
    <view class="list-page">
        <view class="search-container">
            <ss-search-button
                text="新增点名"
                @click="handleAddDm"
                pre-icon="icon-jiahao"
            />

            
        </view>
        <view class="list-container">
            <ss-card
                v-for="item in list"
                :key="item.time"
                :item="item"
                @click="handleCardClick(item)"
            >
                <view class="card-content">
                    <!-- 卡片头部：日期和时间段 -->
                    <view class="card-header">
                       
                        <view class="card-date">{{ toChineseDate(item.bjdm?.jkssj) }}</view>
                        <view class="card-period">{{ getDayPeriod(item.bjdm?.jkssj) }}</view>
                    </view>

                    <!-- 班级信息 -->
                    <view class="card-class">
                        <text>{{ getClassNameSync(item.bjdm?.bjid) }}</text>
                    </view>

                    <!-- 考勤统计 -->
                    <view class="attendance-stats">
                        <view class="stat-item "><text class="stat-absent">缺勤：</text>{{ item.bjdm?.kkrs }}人</view>
                        <view class="stat-item "><text class="stat-leave">请假：</text>{{ item.bjdm?.qjrs }}人</view>
                        <view class="stat-item "><text class="stat-parent-leave">家长请假：</text>{{ item.bjdm?.qjrs }}人</view>
                    </view>
                </view>
            </ss-card>
        </view>
    </view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import SsSearchButton from '@/components/SsSearchButton/index.vue'
import SsCard from '@/components/SsCard/index.vue'
import { kqjlApi } from '@/api/kqjl'
import { toChineseDate, getDayPeriod } from '@/utils/date.js'
import { commonApi } from '@/api/common'

const handleAddDm = () => {
    console.log('点击了新增点名')
    uni.navigateTo({
        url: '/pages/bjdm/bjdm_bzrDm'
    })
   
}

const handleCardClick = (item) => {
    console.log('点击了卡片', item)
    // 跳转到点名详情页面
    uni.navigateTo({
        url: `/pages/bjdm/bjdm_bzrDm?time=${item.time}&period=${item.period}&class=${item.class}`
    })
}

// 原始列表数据
const rawList = [
    {
        time: '2025/06/30',
        period: "上午",
        class: '一年级一班',
        qq:1, //缺勤
        qj:2, //请假
        jzqj:3 //家长请假
    },
    {
        time: '2025/06/29',
        period: "晚上",
        class: '一年级一班',
        qq:1, //缺勤
        qj:2, //请假
        jzqj:3 //家长请假
    }
]

// 为每个项目添加按钮配置
const list = ref([])
const classNameMap = ref(new Map()) // 缓存班级ID对应的中文名称

/**
 * 同步获取班级名称（从缓存中获取）
 * @param {string} bjid - 班级ID
 * @returns {string} 班级中文名称
 */
const getClassNameSync = (bjid) => {
    if (!bjid) return '班级未知'
    return classNameMap.value.get(bjid) || bjid
}

/**
 * 根据班级ID获取班级中文名称
 * @param {string} bjid - 班级ID
 * @returns {Promise<string>} 班级中文名称
 */
const getClassName = async (bjid) => {
    if (!bjid) return '班级未知'

    // 先从缓存中查找
    if (classNameMap.value.has(bjid)) {
        return classNameMap.value.get(bjid)
    }

    try {
        console.log(`获取班级名称: bjid=${bjid}`)
        const result = await commonApi.getDictByCbNameAndValue('bj', bjid)
        console.log(`班级${bjid}的API返回:`, result)

        // 处理新的数据格式：{"result":{"40211":"A班","40212":"A2班"}}
        let className = bjid // 默认返回原ID
        if (result && result.data && result.data.result) {
            // 从result对象中根据bjid查找对应的班级名称
            className = result.data.result[bjid] || bjid
            console.log(`从result中找到班级名称: ${bjid} -> ${className}`)
        }

        // 缓存结果
        classNameMap.value.set(bjid, className)
        console.log(`班级${bjid}的中文名称: ${className}`)

        return className
    } catch (error) {
        console.error(`获取班级${bjid}名称失败:`, error)
        // 失败时也缓存，避免重复请求
        classNameMap.value.set(bjid, bjid)
        return bjid
    }
}




onMounted(async () => {
    try {
        // 使用通用查询接口替换原来的kqjlApi.bjdm_cx
        const res = await commonApi.universalQuery('bjdm_cx', {pageNo: 1})
        console.log('通用查询接口返回的全部数据:', res)
        console.log('通用查询接口返回的objectList数据:', res.data.objectList)
        console.log('通用查询接口返回的ssPaging:', res.data.ssPaging)
        console.log('通用查询接口返回的buttonList:', res.data.buttonList)

        list.value = res.data.objectList

        // 为每个列表项获取班级中文名称
        console.log('开始为每个列表项获取班级名称')
        for (const item of list.value) {
            if (item.bjdm && item.bjdm.bjid) {
                console.log(`处理列表项，班级ID: ${item.bjdm.bjid}`)
                // 异步获取班级名称，不阻塞页面渲染
                getClassName(item.bjdm.bjid).then(className => {
                    console.log(`班级${item.bjdm.bjid}获取到名称: ${className}`)
                    // 可以在这里触发页面更新，或者直接在模板中使用getClassName
                }).catch(error => {
                    console.error(`获取班级${item.bjdm.bjid}名称失败:`, error)
                })
            }
        }
    } catch (error) {
        console.error('获取点名列表数据失败', error)
    }
})
</script>

<style lang="scss" scoped>
.list-page {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;

    .search-container {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30rpx;
    }

    .list-container {
        .card-content {
            padding: 2rpx 1rpx 16rpx 16rpx;

            .card-header {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 27rpx;

                .card-date {
                    font-size: 34rpx;
                    font-weight: bold;
                    color: #000;
                }

                .card-period {
                    margin-left: 62rpx;
                    font-size: 34rpx;
                    font-weight: bold;
                    color: #000;
                }
            }

            .card-class {
                font-size: 31rpx;
                color: #333;
                margin-bottom: 41rpx;
            }

            .attendance-stats {
                display: flex;
                gap: 20rpx;
                flex-wrap: wrap;

                .stat-item {
                    font-size: 31rpx;
                    color: #333333;

                   
                    font-weight: 500;
                }

                .stat-absent {
                    color: #ff0000;
                }

                .stat-leave {
                    color: #ee9700;
                }

                .stat-parent-leave {
                    color: #00a0e9;
                }
            }
        }
    }
}
</style>