<template>
    <view class="dateReport">
        <view class="pd20">
            <uni-segmented-control
                :current="curSub"
                class="subsection"
                active-color="#376cf3"
                :values="subsectionList"
                @clickItem="sectionChange"
            />
        </view>
    
        <!-- 卡片 -->
        <view
            class="event-list"
            v-if="eventList.length != 0"
            :style="{ height: 'calc(100vh - ' + (navHeight + 56) + 'px)', overflow: 'auto' }"
        >
            <!-- 循环渲染事件项 -->
            <uni-card class="event-item" :class="item.type" v-for="(item, index) in eventList" :key="index">
                <!-- 头部：图标 + 信息 + 操作 -->
                <view class="event-header">
                    <view class="event-info">
                        <view class="event-title">
                            <text class="event-id" >{{ item.id }}</text>
                            <text class="event-tags">{{ item.tag }}</text>
                        </view>
                    </view>
                </view>
                <!-- 详情区域 -->
                <view class="event-detail">
                    <text>频率偏差越限111次</text>
                    <text>不平衡度越限3次</text>
                    <text>电压畸变率越限5次</text>
                    <text>偶次电压越限5次</text>
                </view>
                <view class="downloadReport">
                    <uni-icons type="download" size="16" color="#376cf3"></uni-icons>下载报告
                </view>
            </uni-card>
            <uni-load-more :status="status"></uni-load-more>
        </view>
        <Cn-empty v-else></Cn-empty>
    </view>
</template>
<script>
export default {
    components: {},
    props: {
        indexList: {
            type: Array,
            default: () => [],
        },
        total: {
            type: Number,
            default: 0,
        },
        navHeight: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            status: 'noMore',
            curSub: 0,
            subsectionList: ['周报', '月报'],
            eventList: [
                {
                    id: '测试监测点',
                    tag: '2026-01-23至2026-01-23',

                    status: '1',
                },
            ],
        }
    },
    created() {},

    methods: {
        sectionChange(index) {
            this.curSub = index.currentIndex
        },
        scrolltolower() {
            if (this.total != this.indexList.length) {
                this.$emit('scrolltolower')
            } else {
                // this.status = 'noMore'
            }
        },
    },

    computed: {},

    watch: {},
}
</script>
<style lang="scss" scoped>
@import '@/pages/message1/index.scss';
.event-title {
    justify-content: space-between;
}
.event-tags {
    font-size: 24rpx;
}

.event-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.downloadReport {
    width: 100%;
    background: #376cf320;
    height: 60rpx;
    line-height: 60rpx;
    color: #376cf3;
    font-weight: 600;
    border-radius: 15rpx;
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
}

</style>
