<template>
    <!-- 班主任点名列表 -->
    <view class="list-page">
        <view class="search-container">
            <ss-search-button
                text="新增点名"
                @click="handleAddDm"
            />
        </view>
        <view class="list-container">
            <ss-card v-for="item in list" :key="item.time" @click="handleCardClick(item)">
                <view class="card-content">
                    <!-- 卡片头部：日期和时间段 -->
                    <view class="card-header">
                        <view class="card-date">{{ item.time }}</view>
                        <view class="card-period">{{ item.period }}</view>
                    </view>

                    <!-- 班级信息 -->
                    <view class="card-class">{{ item.class }}</view>

                    <!-- 考勤统计 -->
                    <view class="attendance-stats">
                        <!-- 迟到 - 270到360度弧形边框 -->
                        <view class="stat-item">
                            <view class="stat-circle late">
                                <text class="stat-text">迟</text>
                            </view>
                            <text class="stat-count">{{ item.chidao }}人</text>
                        </view>

                        <!-- 旷课 - 红色圆形边框 -->
                        <view class="stat-item">
                            <view class="stat-circle absent">
                                <text class="stat-text">旷</text>
                            </view>
                            <text class="stat-count">{{ item.kongke }}人</text>
                        </view>

                        <!-- 早退 - 180到270度弧形边框 -->
                        <view class="stat-item">
                            <view class="stat-circle early">
                                <text class="stat-text">退</text>
                            </view>
                            <text class="stat-count">{{ item.zaotui }}人</text>
                        </view>

                        <!-- 请假 - 图标显示 -->
                        <view class="stat-item">
                            <view class="stat-icon-wrapper">
                                <Icon name="icon-qingjia" size="32" color="#FFA500" />
                            </view>
                            <text class="stat-count">{{ item.qingjia }}人</text>
                        </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 Icon from '@/components/icon/index.vue'
import { kqjlApi } from '@/api/kqjl'

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

const handleCardClick = (item) => {
    console.log('点击了卡片', item)
    uni.showToast({
        title: `点击了${item.time} ${item.period}的点名`,
        icon: 'none'
    })
}

const list = ref([
    {
        time: '2025/06/30',
        period: "上午",
        class: '一年级一班',
        chidao: 10,
        zaotui: 0,
        kongke: 1,
        qingjia: 2,
    },
    {
        time: '2025/06/29',
        period: "晚上",
        class: '一年级一班',
        chidao: 10,
        zaotui: 1,
        kongke: 0,
        qingjia: 2,
    }
])

onMounted(async () => {
    try {
        const res = await kqjlApi.bjdm_cx({})
        console.log('点名列表数据', res)
        list.value = res.data
    } 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 {
            .card-header {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 20rpx;

                .card-date {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                }

                .card-period {
                    margin-left: 60rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                }
            }

            .card-class {
                font-size: 28rpx;
                color: #666;
                margin-bottom: 30rpx;
            }

            .attendance-stats {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .stat-item {
                    display: flex;
                    // flex-direction: column;
                    align-items: center;
                    gap: 10rpx;
                    flex: 1;

                    .stat-count {
                        font-size: 24rpx;
                        color: #333;
                        text-align: center;
                    }
                }



                // 圆形统计样式基础
                .stat-circle {
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    background: #fff;
                    // 基础灰色圆形边框 - 保持4rpx
                    border: 4rpx solid #E5E5E5;

                    .stat-text {
                        font-size: 20rpx;  // 字体也相应缩小
                        font-weight: bold;
                        z-index: 10;
                        position: relative;
                    }
                }

                // 迟到样式 - 270到360度弧形边框（左上角四分之一）
                .stat-circle.late {

                    // 创建左上角四分之一弧形 - 适配40rpx圆形
                    &::before {
                        content: '';
                        position: absolute;
                        top: -4rpx;   // 保持4rpx边框
                        left: -4rpx;  // 保持4rpx边框
                        width: 23rpx; // 按比例缩小 (34*40/60≈23)
                        height: 23rpx;
                        border: 4rpx solid transparent;
                        border-left: 4rpx solid #FF4444;
                        border-top: 4rpx solid #FF4444;
                        border-radius: 23rpx 0 0 0;
                        z-index: 5;
                    }
                }

                // 旷课样式 - 红色圆形边框（全遮住）
                .stat-circle.absent {
                    border: 4rpx solid #FF4444;  // 保持4rpx边框


                }

                // 早退样式 - 180到270度弧形边框（左下角四分之一）
                .stat-circle.early {


                    // 创建左下角四分之一弧形 - 适配40rpx圆形
                    &::before {
                        content: '';
                        position: absolute;
                        top: 17rpx;   // 调整位置 (26*40/60≈17)
                        left: -4rpx;  // 保持4rpx边框
                        width: 23rpx; // 按比例缩小
                        height: 23rpx;
                        border: 4rpx solid transparent;
                        border-left: 4rpx solid #FF4444;
                        border-bottom: 4rpx solid #FF4444;
                        border-radius: 0 0 0 23rpx;
                        z-index: 5;
                    }
                }

                // 请假图标样式 - 无边框
                .stat-icon-wrapper {
                    width: 40rpx;   // 与圆形保持一致
                    height: 40rpx;  // 与圆形保持一致
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: transparent;
                    border: none;
                }
            }
        }
    }
}
</style>