<template>
    <view>
        <view class="filterCriteria">
            <!-- 筛选条件 -->
            <Cn-filterCriteria @select="select" :showDatetime="false"> </Cn-filterCriteria>
            <view class="choose1">
                <view>
                    <checkbox-group @change="changeBox"
                        ><checkbox value="true" :checked="checkedAll" />全选
                    </checkbox-group></view
                >
                <view class="nav-menu nav-menu-btn" @click="selectDevice('transfer')">申请报表 </view>
            </view>
        </view>
        <view class="smallLabel mt20">
            <view> 共 {{ store.total }} 条事件 | 已选择 {{ checkedTotal }} 条事件 </view>
            <view style="width: 180rpx">
                <picker @change="bindPickerChange" :value="sort" :range="array">
                    <view class="uni-input"
                        >{{ array[sort] }}排序
                        <uni-icons custom-prefix="iconfont" type="icon-paixu1" size="10" color="#2563EB"></uni-icons>
                    </view>
                </picker>
            </view>
        </view>
        <!-- 卡片 -->
        <view class="event-list" :style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }">
            <!-- 循环渲染事件项 -->
            <uni-card
                class="event-item"
                :class="judgment(item.showName)"
                v-for="(item, index) in store.data"
                :key="index"
                @click="clackCard(item)"
            >
                <!-- 头部：图标 + 信息 + 操作 -->
                <view class="event-header">
                    <view class="event-icon">
                        <!-- 动态图标：根据类型切换 -->
                        <uni-icons
                            :custom-prefix="judgment(item.showName) == 'interrupt' ? 'custom-icon' : 'iconfont'"
                            :type="
                                judgment(item.showName) == 'sag'
                                    ? 'icon-xiajiang'
                                    : judgment(item.showName) == 'swell'
                                      ? 'icon-shangsheng'
                                      : 'minus'
                            "
                            :color="
                                judgment(item.showName) == 'sag'
                                    ? '#2563eb '
                                    : judgment(item.showName) == 'swell'
                                      ? '#e6a23c'
                                      : '#909399'
                            "
                            :size="judgment(item.showName) == 'interrupt' ? '50' : '25'"
                        ></uni-icons>
                    </view>
                    <view class="event-info">
                        <view class="event-title">
                            <text class="event-id">{{ item.equipmentName }}</text>
                            <text class="event-tag" :class="`${judgment(item.showName)}-tag`">{{ item.showName }}</text>
                        </view>
                        <view class="event-desc">
                            <text>工程名称：{{ item.engineeringName }}</text>
                            <text>项目名称：{{ item.projectName }}</text>
                            <text>监测点名称：{{ item.lineName }}</text>
                        </view>
                    </view>
                    <view class="event-action">
                        <!-- 选择 -->
                        <checkbox-group @change="changeChild($event, item)"
                            ><checkbox value="true" :checked="item.checked" />
                        </checkbox-group>
                    </view>
                </view>
                <!-- 详情区域 -->
                <view class="event-detail">
                    <text>
                        发生时间：{{ item.startTime }}，幅值：{{ item.evtParamVVaDepth }}，持续时间：{{
                            item.evtParamTm
                        }}，相别：{{ item.evtParamPhase }}
                    </text>
                </view>
            </uni-card>
            <uni-load-more
                v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
                :status="store.status"
            ></uni-load-more>
            <Cn-empty v-else style="top: 20%"></Cn-empty>
        </view>
    </view>
</template>
<script>
import list from '@/common/js/list'
export default {
    components: {},
    props: {
        navHeight: {
            type: Number,
            default: 0,
        },
    },
    mixins: [list],
    data() {
        return {
            selectValue: {},
            height: 0,
            checkedAll: false,
            checkedTotal: 0,
            sort: 0,
            array: ['发生时间', '暂降深度', '持续时间'],
        }
    },
    mounted() {},

    methods: {
        setHeight() {
            uni.createSelectorQuery()
                .select('.filterCriteria')
                .boundingClientRect((rect) => {
                    console.log('🚀 ~ rect:', rect)
                    //
                    // #ifdef H5
                    this.height = rect?.height + 100 || 0
                    // #endif
                    // #ifdef APP-PLUS
                    this.height = rect?.height + 100 || 0
                    // #endif
                })
                .exec()
        },
        async select(val) {
            this.selectValue = val
            await this.init()
            this.setHeight()
        },
        init() {
            this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
            this.store.params.type = 0
            this.store.params.pageSize = 10000
            this.store.params.sortField = this.sort
            this.store.params.engineeringid = this.selectValue.engineeringId
            this.store.params.projectId = this.selectValue.projectId
            this.store.params.deviceId = this.selectValue.deviceId
            this.store.params.lineId = this.selectValue.lineId
            this.store.params.startTime = this.selectValue.range[0]
            this.store.params.endTime = this.selectValue.range[1]
            this.store.loadedCallback = () => {
                this.checkedTotal = 0
                this.store.data = this.store.data.map((item) => {
                    item.checked = false
                    return item
                })
            }
            this.store.reload()
        },
        // 全选
        changeBox(e) {
            this.checkedAll = !this.checkedAll
            if (e.target.value.length > 0) {
                this.store.data = this.store.data.map((item) => {
                    item.checked = true
                    return item
                })
                this.checkedTotal = this.store.total
            } else {
                this.store.data = this.store.data.map((item) => {
                    item.checked = false
                    return item
                })
                this.checkedTotal = 0
            }
        },
        changeChild(e, item) {
            item.checked = !item.checked
            this.checkedAll = this.store.data.every((item) => item.checked === true)
            this.checkedTotal = this.store.data.filter((item) => item.checked === true).length
        },
        // 点击卡片
        clackCard() {},
        // 切换排序
        bindPickerChange(e) {
            this.sort = e.detail.value
            this.init()
        },
        judgment(val) {
            switch (val) {
                case '电压暂降':
                    return 'sag'
                case '电压暂升':
                    return 'swell'
                case '电压中断':
                    return 'interrupt'
            }
        },
    },

    computed: {},

    watch: {},
}
</script>
<style lang="scss" scoped>
@import '@/pages/message1/index.scss';
.filterCriteria {
    .nav {
        background-color: #fff;
    }
    .choose1 {
        background-color: #fff;
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;
        /deep/ .uni-checkbox-input {
            width: 30rpx;
            height: 30rpx;
        }
        font-size: 26rpx;
    }
}
.nav-menu {
    padding: 6rpx 20rpx;
    margin-left: 20rpx;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    border-radius: 8rpx;
    background: #ebeaec;
    color: #666;
    &-active {
        background: #dfe5f7;
        color: $uni-theme-color;
    }
    &-btn {
        background: $uni-theme-color;
        color: #fff;
    }
}
/deep/.uni-card__content {
    padding: 20rpx !important;
}
.smallLabel {
    justify-content: space-between;
    font-size: 24rpx !important;
}
</style>
