ss_dc_wechat_mini_program/pages/bjdm/bjdm_bzrDm.vue

<template>
    <!--
        班主任点名页面
        功能：支持班级考勤管理，包括学生状态切换、表格显示等
    -->
    <view class="page-container">
        <!-- 固定头部区域 -->
        <view class="fixed-header">
            <!-- 筛选条件区域 -->
            <view class="filter-area" :class="{ 'simple-mode': isSimpleMode }">
                <!-- 完整模式：显示表单 -->
                <view v-if="!isSimpleMode" class="full-form" style="position: relative;z-index: 1000;">
                    <Form :rules="fieldConfigs" v-model="formData" ref="formRef">
                        <up-table>
                            <up-tr>
                                <up-th>班级</up-th>
                                <Td field="bjid">
                                    <SsSelect v-model="formData.bjid" :options="bjOption" :loading="bjLoading"
                                        placeholder="请选择班级" @change="onXcTypeChange" />
                                </Td>
                            </up-tr>
                            <up-tr>
                                <up-th>日期</up-th>
                                <Td field="rq">
                                    <SsDatetimePicker v-model="formData.rq" mode="date" :max-date="maxDate"
                                        :z-index="99999" placeholder="请选择日期" @change="onDateChange" />
                                    <text v-if="weekdayText" class="weekday-text">{{ weekdayText }}</text>
                                </Td>
                            </up-tr>
                            <up-tr>
                                <up-th>节次</up-th>
                                <Td field="jc">
                                    <view class="onoff-button-group">
                                        <SsOnoffButton v-model="formData.jc" name="jc" label="上午" value="1" />
                                        <SsOnoffButton v-model="formData.jc" name="jc" label="下午" value="2" />
                                        <SsOnoffButton v-model="formData.jc" name="jc" label="晚上" value="3" />
                                    </view>
                                </Td>
                            </up-tr>
                        </up-table>
                    </Form>
                </view>

                <!-- 简化模式：显示回显信息 -->
                <view v-else class="simple-display">
                    <text class="display-text">{{ displayText }}</text>
                </view>
            </view>

            <!-- 考勤统计 -->
            <view class="stats-area">
                <view class="stat-item "><text class="stat-absent">缺勤：</text>{{ stats.absent }}人</view>
                <view class="stat-item "><text class="stat-sick">请假：</text>{{ stats.leave }}人</view>
                <view class="stat-item "><text class="stat-parent">家长请假：</text>{{ stats.parent }}人</view>
            </view>
        </view>

        <!-- 学生列表区域 -->
        <view class="student-list-area" :style="studentListStyle">
            <!-- 学生表格 -->
            <view class="student-table">
                <!-- 表头 -->
                <view class="table-header">
                    <text class="col-number">序号</text>
                    <text class="col-name">姓名</text>
                    <text class="col-status">状态</text>
                </view>

                <!-- 学生行 -->
                <view v-for="(student, index) in studentList" :key="student.id" class="table-row"
                    :class="getRowClass(student.kqlbm, student.rcid)" @click="handleStudentClick(student)">
                    <text class="col-number">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</text>
                            <text class="col-name">{{ student.xm }}</text>
                            <text class="col-status">{{ getStatusText(student.kqlbm, student.rcid) }}</text>
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <SsBottom :buttons="bottomButtons" @button-click="handleBottomAction" />

        <!-- 二次确认弹窗 -->
        <SsConfirm v-model:visible="showConfirm" title="点名情况" width="90%" height="42vh" :bottom-buttons="confirmButtons"
            @button-click="handleConfirmAction" @close="handleConfirmClose">
            <!-- 统计信息 -->
            <view class="stats-section">
                <view class="stat-item">
                    <text class="stat-label">出勤:</text>
                    <text class="stat-value present">{{ attendanceStats.present }}人</text>
                </view>
                <view class="stat-item">
                    <text class="stat-label">缺勤:</text>
                    <text class="stat-value absent">{{ attendanceStats.absent }}人</text>
                </view>
                <view class="stat-item">
                    <text class="stat-label">事假:</text>
                    <text class="stat-value leave">{{ attendanceStats.leave }}人</text>
                </view>
                <view class="stat-item">
                    <text class="stat-label">病假:</text>
                    <text class="stat-value sick">{{ attendanceStats.sick }}人</text>
                </view>
                <view class="stat-item">
                    <text class="stat-label">家长请假:</text>
                    <text class="stat-value parent-leave">{{ attendanceStats.parentLeave }}人</text>
                </view>
            </view>
        </SsConfirm>
    </view>
</template>

<script setup>
/**
 * 班主任点名页面
 *
 * 主要功能：
 * 1. 筛选条件管理（班级、日期、节次）
 * 2. 学生表格显示和状态管理
 * 3. 三行变一行的下拉切换
 * 4. 学生考勤状态管理
 * 5. 考勤数据保存和提交
 */

import { ref, computed, onMounted, onUnmounted } from 'vue'
import Form from '@/components/Form/index.vue'
import Td from '@/components/Td/index.vue'
import SsDatetimePicker from '@/components/SsDatetimePicker/index.vue'
import SsSelect from '@/components/SsSelect/index.vue'
import SsOnoffButton from '@/components/SsOnoffButton/index.vue'
import SsBottom from '@/components/SsBottom/index.vue'
import SsConfirm from '@/components/SsConfirm/index.vue'
import { commonApi } from '@/api/common'
import { kqjlApi } from '@/api/kqjl'
import { goBack } from '@/utils/navigation'

// ==================== 数据定义 ====================

/**
 * 表单数据
 * @property {string} bjid - 班级ID
 * @property {string} rq - 日期
 * @property {string} jc - 节次 (1-上午, 2-下午, 3-晚上)
 */
const formData = ref({
    bjid: '',
    rq: '', // 将在初始化时设置为今天
    jc: '', // 将根据当前时间自动设置
})

// 日期相关数据
const maxDate = ref(new Date()) // 最大日期为今天，禁止选择今天之后的
const weekdayText = ref('') // 星期几的显示文本

/**
 * 页面状态管理
 * @property {boolean} isSimpleMode - 是否为简化模式（三行变一行）
 * @property {Array} studentList - 学生列表数据
 * @property {boolean} refresherTriggered - 下拉刷新状态
 */
const isSimpleMode = ref(false) // 是否为简化模式
const studentList = ref([]) // 学生列表

// 确认弹窗相关
const showConfirm = ref(false) // 是否显示确认弹窗

/**
 * 计算回显文本
 * 在简化模式下显示的筛选条件摘要
 * 格式：班级名称 + 日期 + 节次
 */
const displayText = computed(() => {
    // const bjText = bjOption.value.find(item => item.v === formData.value.bjid)?.n || '未选择班级'
    const jcText = formData.value.jc === '1' ? '上午' : formData.value.jc === '2' ? '下午' : '晚上'
    return `${formData.value.rq}  ${jcText}`
})

/**
 * 计算考勤统计
 */
const stats = computed(() => {
    const absent = studentList.value.filter(s => s.kqlbm === 1).length // 缺勤
    const sick = studentList.value.filter(s => s.kqlbm === 41).length // 病假
    const personal = studentList.value.filter(s => s.kqlbm === 31).length // 事假
    const leave = sick + personal // 请假 = 病假 + 事假
    const parent = studentList.value.filter(s => s.rcid > 0).length // 家长请假
    return { absent, leave, parent }
})

/**
 * 计算学生列表区域的样式
 */
const studentListStyle = computed(() => {
    return {
        marginTop: headerHeight.value + 'rpx'
    }
})



// ==================== 确认弹窗配置 ====================

/**
 * 确认弹窗按钮配置
 */
const confirmButtons = ref([
    { text: '取消', action: 'cancel', type: 'default' },
    { text: '确认提交', action: 'confirm', type: 'primary' }
])

/**
 * 考勤统计数据
 */
const attendanceStats = computed(() => {
    const stats = {
        present: 0,
        absent: 0,
        leave: 0,
        sick: 0,
        parentLeave: 0
    }

    studentList.value.forEach(student => {
        if (student.rcid > 0) {
            stats.parentLeave++ // 家长请假（优先判断）
        } else if (student.kqlbm === 81) {
            stats.present++  // 出勤
        } else if (student.kqlbm === 1) {
            stats.absent++   // 缺勤
        } else if (student.kqlbm === 31) {
            stats.leave++    // 事假
        } else if (student.kqlbm === 41) {
            stats.sick++     // 病假
        } else {
            stats.absent++   // 其他情况默认为缺勤
        }
    })

    console.log('考勤统计更新:', stats, '学生总数:', studentList.value.length)
    return stats
})

// ==================== 表单配置 ====================

/**
 * 表单字段校验配置
 * 定义各个字段的校验规则
 */
const fieldConfigs = {
    bjid: {
        rules: [{ required: true, message: '班级不能为空' }]
    },
    rq: {
        rules: [{ required: true, message: '日期不能为空' }]
    },
    jc: {
        rules: [{ required: true, message: '请选择节次' }]
    }
}

/**
 * 表单引用
 * 用于表单校验和数据提交
 */
const formRef = ref(null)

/**
 * 班级下拉框配置
 * 通过字典API获取班级列表数据
 */
const bjOption = ref([])
const bjLoading = ref(false) // 班级数据加载状态

/**
 * 加载班级选项
 */
const loadClassOptions = async () => {
    bjLoading.value = true
    try {
        const result = await commonApi.getDictOptionsByCbName('bj')
        console.log('班级字典数据:', result)

        // 现在后端返回正常的JSON对象格式
        if (result.data && result.data.result) {
            const resultData = result.data.result
            console.log('班级result数据:', resultData)

            // 转换为SsSelect需要的格式：{"40211":"A班","40212":"A2班"} -> [{n:"A班",v:"40211"}]
            bjOption.value = Object.keys(resultData).map(key => ({
                n: resultData[key], // 显示名称：A班、A2班
                v: key // 值：40211、40212
            }))

            // 默认选中第一个
            if (bjOption.value.length > 0 && !formData.value.bjid) {
                formData.value.bjid = bjOption.value[0].v
                console.log('默认选中班级:', bjOption.value[0])
                loadStudentData()
            }
        } else {
            console.error('数据格式不正确:', result.data)
        }
    } catch (error) {
        console.error('加载班级选项失败:', error)
        uni.showToast({
            title: '加载班级失败',
            icon: 'error'
        })
    } finally {
        bjLoading.value = false
    }
}

/**
 * 初始化表单默认值
 */
const initFormDefaults = () => {
    // 设置默认日期为今天
    const today = new Date()
    const year = today.getFullYear()
    const month = String(today.getMonth() + 1).padStart(2, '0')
    const day = String(today.getDate()).padStart(2, '0')
    formData.value.rq = `${year}-${month}-${day}`

    // 更新星期几显示
    updateWeekdayText(formData.value.rq)

    // 根据当前时间设置默认节次 - 使用国际通用标准
    const currentTime = new Date()
    const currentHour = currentTime.getHours()

    let currentPeriod = ''
    let jcValue = '1'

    if (currentHour >= 0 && currentHour < 12) {
        // 0-12点：上午
        currentPeriod = '上午'
        jcValue = '1'
    } else if (currentHour >= 12 && currentHour < 18) {
        // 12-18点：下午
        currentPeriod = '下午'
        jcValue = '2'
    } else {
        // 18-24点：晚上
        currentPeriod = '晚上'
        jcValue = '3'
    }

    formData.value.jc = jcValue
    console.log('初始化表单默认值:', formData.value, '当前时间:', currentHour + '点', '时间段:', currentPeriod)
}

/**
 * 更新星期几显示文本
 */
const updateWeekdayText = (dateStr) => {
    if (!dateStr) {
        weekdayText.value = ''
        return
    }

    try {
        const date = new Date(dateStr)
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        weekdayText.value = weekdays[date.getDay()]
    } catch (error) {
        console.error('解析日期失败:', error)
        weekdayText.value = ''
    }
}

/**
 * 日期选择变化处理
 */
const onDateChange = (value) => {
    console.log('日期选择变化:', value)
    updateWeekdayText(value)
}

// ==================== 事件处理方法 ====================

/**
 * 班级选择变化处理
 * 当用户选择不同班级时触发，重新加载该班级的学生数据
 * @param {string} value - 选中的班级ID
 * @param {Object} option - 选中的班级选项对象
 */
const onXcTypeChange = (value, option) => {
    console.log('班级选择变化:', value, option)
    console.log('当前formData.bj:', formData.value.bjid)

    // 重新加载学生数据
    loadStudentData()
}

/**
 * 加载学生数据
 * 根据当前选择的班级、日期、节次加载学生列表
 * TODO: 替换为真实的接口调用
 */
const loadStudentData = async () => {
    try {

        const res = await kqjlApi.bjdm_initBzrDm({ bjid: formData.value.bjid })
        console.log('返回数据:', res.data.bjList)

        if (res.data.bjList && res.data.bjList.length > 0) {
            studentList.value = res.data.bjList[0]
        } else {
            console.log('没有数据:', res.data.msg)
            uni.showToast({
                title: res.data.msg,
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('加载学生数据失败:', error)
        uni.showToast({
            title: '加载学生数据失败',
            icon: 'none'
        })
    }
}

/**
 * 处理学生点击
 * 切换学生的考勤状态
 * @param {Object} student - 被点击的学生对象
 */
const handleStudentClick = (student) => {
    console.log('点击学生:', student)

    // 状态切换逻辑：出勤(0) → 缺勤(1) → 病假(2) → 事假(3) → 家长请假(4) → 出勤(0)
    let newStatus
    switch (student.kqlbm) {

        case 81: // 出勤 → 缺勤
            newStatus = 1
            break
        case 1: // 缺勤 → 病假
            newStatus = 41
            break
        case 41: // 病假 → 事假
            newStatus = 31
            break
        case 31: // 事假 → 出勤
            newStatus = 81
            break
        case 4: // 家长请假 → 不可点击
            newStatus = 4
            break;
        default: // 其他状态 → 出勤
            newStatus = 81
    }

    // 更新本地数据
    const targetStudent = studentList.value.find(s => s.ryid === student.ryid)
    if (targetStudent) {
        targetStudent.kqlbm = newStatus
    }
}

// 页面滚动位置跟踪
const pageScrollTop = ref(0)
const initialFilterHeight = ref(0) // 筛选区域的初始高度
const headerHeight = ref(300) // 固定头部高度（rpx），初始值设大一点避免遮挡

/**
 * 处理页面滚动事件
 * 监听整个页面的滚动位置
 */
const handlePageScroll = (scrollTop) => {
    const previousScrollTop = pageScrollTop.value
    pageScrollTop.value = scrollTop

    console.log('页面滚动位置:', scrollTop, '初始高度:', initialFilterHeight.value)

    // 检测滚动方向和位置
    const isScrollingDown = scrollTop > previousScrollTop
    const isScrollingUp = scrollTop < previousScrollTop

    // 三行变一行：向下滚动超过筛选区域高度的30px时触发
    if (isScrollingDown &&
        scrollTop > (initialFilterHeight.value + 30) &&
        !isSimpleMode.value) {
        console.log('向下滚动超过阈值，切换到简化模式')
        isSimpleMode.value = true
    }

    // 一行变三行：向上滚动回到接近顶部时触发
    if (isScrollingUp &&
        scrollTop <= 10 &&
        isSimpleMode.value) {
        console.log('向上滚动回到顶部，切换到完整模式')
        isSimpleMode.value = false
    }
}



/**
 * 获取表格行的样式类
 * 根据学生状态返回对应的CSS类名
 * @param {number} status - 学生状态
 * @param {number} rcid - 日程id
 * @returns {string} CSS类名
 */
const getRowClass = (status, rcid) => {
    if (rcid > 0) {
        return 'row-parent' // 家长请假
    } else {
        switch (status) {
            case 1: return 'row-absent' // 缺勤
            case 41: return 'row-sick' // 病假
            case 31: return 'row-personal' // 事假
            default: return 'row-normal' // 出勤
        }
    }
}

/**
 * 获取考勤状态文本
 * 将数字状态码转换为可读的文本描述
 * @param {number} status - 状态码
 * @param {number} rcid - 日程id
 * @returns {string} 状态文本
 */
const getStatusText = (status, rcid) => {
    if (rcid > 0) {
        return '家长请假'
    } else {
        switch (status) {
            case 81: return '出勤'
            case 1: return '缺勤'
            case 41: return '病假'
            case 31: return '事假'
            // case 4: return '家长请假'
            default: return '出勤'

        }
    }

}

// ==================== 底部按钮配置 ====================

/**
 * 底部按钮配置
 * 只在非点名模式下显示，提供取消和保存功能
 */
const bottomButtons = [
    { text: '取消', action: 'back' },
    { text: '保存', action: 'save' }
]

/**
 * 底部按钮事件处理
 * 处理取消和保存操作
 * @param {Object} data - 按钮数据
 * @param {string} data.action - 按钮动作类型
 */
const handleBottomAction = (data) => {
    console.log('底部按钮操作:', data)

    switch (data.action) {
        case 'back':
            // 返回处理
            goBack()
            break
        case 'save':
            // 显示二次确认弹窗
            showConfirm.value = true
            break
    }
}


/**
 * 确认弹窗按钮点击处理
 */
const handleConfirmAction = (data) => {
    console.log('确认弹窗按钮点击:', data)

    switch (data.action) {
        case 'cancel':
            showConfirm.value = false
            break
        case 'confirm':
            // 执行实际的保存操作
            showConfirm.value = false
            handleSave()
            break
    }
}

/**
 * 确认弹窗关闭处理
 */
const handleConfirmClose = () => {
    console.log('确认弹窗关闭')
    showConfirm.value = false
}


const getKssj = () => {
    let kssj = ''
    if (formData.value.jc === '1') {
        kssj = formData.value.rq + ' 06:00:00'
    } else if (formData.value.jc === '2') {
        kssj = formData.value.rq + ' 13:40:00'
    } else if (formData.value.jc === '3') {
        kssj = formData.value.rq + ' 18:30:00'
    }
    return kssj
}

const getJssj = () => {
    let jssj = ''
    if (formData.value.jc === '1') {
        jssj = formData.value.rq + ' 12:00:00'
    } else if (formData.value.jc === '2') {
        jssj = formData.value.rq + ' 16:00:00'
    } else if (formData.value.jc === '3') {
        jssj = formData.value.rq + ' 21:00:00'
    }
    return jssj
}

const getKkrs = () => {
    let kkrs = 0
    studentList.value.forEach(student => {
        if (student.kqlbm === 1) {
            kkrs++
        }
    })
    return kkrs
}

const getQjrs = () => {
    let qjrs = 0
    studentList.value.forEach(student => {
        if (student.kqlbm === 41 || student.kqlbm === 31 || student.rcid > 0) {
            qjrs++
        }
    })
    return qjrs
}


/**
 * 保存学生考勤数据
 * 收集所有学生的考勤状态并提交到后端
 */
const handleSave = async () => {
    console.log('保存学生考勤数据')

    try {
        const params = {
            bjid: formData.value.bjid,
            kkrs: getKkrs(), //缺勤人数
            qjrs: getQjrs(), //请假人数
            // rq: formData.value.rq + ' 00:00:00', //补齐时间
            jkssj: getKssj(),
            jjssj: getJssj(),
            ryList: JSON.stringify(studentList.value
                .filter(student => student.kqlbm !== 81)
                .map(student => ({
                    ryid: student.ryid,
                    kqlbm: student.kqlbm
                })))
        }
        console.log(JSON.stringify(params))

        const response = await kqjlApi.bjdm_saveBzrDm(params)
        console.log('保存考勤数据成功:', response)
        if (response.data.ssCode === 0) {
            uni.showToast({
                title: response.data.msg,
                icon: 'success'
            })
            goBack()
        }



    } catch (error) {
        console.error('保存考勤数据失败:', error)
        uni.showToast({
            title: '保存失败',
            icon: 'none'
        })
    }
}

// ==================== 页面初始化 ====================

/**
 * 页面挂载时的初始化
 */
onMounted(() => {
    // 初始化表单默认值
    initFormDefaults()

    // 加载班级选项
    loadClassOptions()

    // 加载学生数据
    // loadStudentData()

    // 多次尝试获取固定头部的高度，确保准确
    const measureHeader = () => {
        uni.createSelectorQuery().select('.fixed-header').boundingClientRect((rect) => {
            if (rect && rect.height > 0) {
                initialFilterHeight.value = rect.height
                const headerHeightRpx = rect.height * 2 // px转rpx
                headerHeight.value = headerHeightRpx
                console.log('固定头部高度:', rect.height, 'px =', headerHeightRpx, 'rpx')
            } else {
                // 如果还没获取到，再试一次
                setTimeout(measureHeader, 50)
            }
        }).exec()
    }

    // 立即尝试测量，然后延迟再测量一次确保准确
    measureHeader()
    setTimeout(measureHeader, 200)
})



/**
 * 页面卸载时清理
 */
onUnmounted(() => {
    // 清理工作
})

// 在uni-app中，我们需要在页面级别定义onPageScroll
// 这里先定义函数，然后在页面配置中使用

// ==================== 接口预留 ====================

/**
 * TODO: 需要实现的接口方法
 *
 * 1. getClassList() - 获取班级列表
 *    返回格式：[{ n: '班级名称', v: '班级ID' }]
 *
 * 2. getStudentList(params) - 获取学生列表
 *    参数：{ classId, date, period }
 *    返回格式：[{ id, name, code, avatar, row, col, status }]
 *
 * 3. updateStudentStatus(params) - 更新学生状态
 *    参数：{ studentId, status, classId, date, period }
 *
 * 4. submitAttendanceData(params) - 提交考勤数据
 *    参数：{ classId, date, period, attendanceList }
 *
 * 5. getAttendanceHistory(params) - 获取历史考勤记录
 *    参数：{ classId, startDate, endDate }
 */

// 将handlePageScroll挂载到全局，供页面配置使用
if (typeof globalThis !== 'undefined') {
    globalThis.pageScrollHandler = handlePageScroll
}

</script>

<script>
// 页面配置，监听页面滚动
export default {
    onPageScroll(e) {
        // 调用全局的滚动处理函数
        if (typeof globalThis !== 'undefined' && globalThis.pageScrollHandler) {
            globalThis.pageScrollHandler(e.scrollTop)
        }
    }
}
</script>

<style lang="scss" scoped>
.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f2f3f4;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #f2f3f4;
}

.filter-area {
    // background-color: #fff;
    transition: all 0.3s ease;
    border-bottom: 1rpx solid #eceded;


    // 完整模式
    .full-form {
        padding: 18rpx 0;
    }

    // 简化模式
    &.simple-mode {
        .simple-display {
            padding: 45rpx 0;
            background-color: #f2f3f4;
            border-bottom: 1rpx solid #eceded;

            .display-text {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                text-align: center;
                display: block;
            }
        }
    }
}

.onoff-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    align-items: flex-start;
}

.stats-area {
    background-color: #fff;
    padding: 20rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;

    .stat-item {
        font-size: 24rpx;
        font-weight: 500;
    }

    .stat-absent {
        color: #ff0000;
    }

    .stat-sick {
        color: #ee9700;
    }

    .stat-parent {
        color: #00a0e9;
    }
}

.student-list-area {
    flex: 1;
    background-color: #ffffff;
    padding-bottom: 120rpx; // 给底部按钮留出空间
}

.student-table {
    width: calc(100% - 32rpx);
    margin: 0 auto;
    border: 1rpx solid #d2d2d2;

    .table-header {
        display: flex;
        background-color: #efefef;
        border-bottom: 1rpx solid #d2d2d2;
        padding: 20rpx;

        .col-number {
            width: 120rpx;
            text-align: center;
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
        }

        .col-name {
            padding-left: 30rpx;
            flex: 1;
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
        }

        .col-status {
            width: 200rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            text-align: left;
        }
    }

    .table-row {
        display: flex;
        padding: 20rpx;
        border-bottom: 1rpx solid #d2d2d2;
        transition: background-color 0.3s ease;

        &:last-child {
            border-bottom: none;
        }

        &:active {
            background-color: #f0f0f0;
        }

        .col-number {
            width: 120rpx;
            font-size: 28rpx;
            color: #333;
            text-align: center;
        }

        .col-name {
            padding-left: 30rpx;
            flex: 1;
            font-size: 28rpx;
            color: #333;
        }

        .col-status {
            width: 200rpx;
            font-size: 28rpx;
            text-align: left;
            color: #333;
        }

        // 状态行样式
        &.row-normal {
            background-color: #fff;
        }

        &.row-absent {
            background-color: #ff0000;
            color: #fff;

            .col-number,
            .col-name,
            .col-status {
                color: #fff;
            }
        }

        &.row-sick {
            background-color: #ee9700;
            color: #fff;

            .col-number,
            .col-name,
            .col-status {
                color: #fff;
            }
        }

        &.row-personal {
            background-color: #eb6100;
            color: #fff;

            .col-number,
            .col-name,
            .col-status {
                color: #fff;
            }
        }

        &.row-parent {
            background-color: #00a0e9;
            color: #fff;

            .col-number,
            .col-name,
            .col-status {
                color: #fff;
            }
        }
    }
}

// 星期几显示样式
.weekday-text {
    font-size: 32rpx;
    color: #333;
    position: absolute;
    right: 100rpx;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom: 6rpx;
}

// ==================== 确认弹窗样式 ====================

// 统计信息样式
.stats-section {
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .stat-item {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34rpx;
        color: #333;

        .stat-label {

            text-align: right;
            flex: 1;
            margin-right: 20rpx;
        }

        .stat-value {
            flex: 1;


        }
    }
}
</style>