<template>
    <Cn-page :loading="loading" class="messageBox" style="padding-top: 10px">
        <view slot="body" class="message">
            <view class="tabsBox">
                <uni-segmented-control
                    :current="current"
                    :values="items"
                    style-type="text"
                    active-color="#376cf3"
                    @clickItem="onClickItem"
                />
                <!-- 角标 -->
                <view class="badge-container">
                    <span v-for="(item, index) in items" :key="index" class="badge">
                        <uni-badge :text="badgeCounts[index] > 99 ? '99+' : badgeCounts[index]" />
                        <!-- {{ badgeCounts[index] > 99 ? '99+' : badgeCounts[index] }} -->
                    </span>
                </view>
                <!-- 筛选条件 -->
                <Cn-filterCriteria
                    ref="cnFilterCriteria"
                    :level="current === 0 ? 3 : current === 1 ? 3 : 2"
                    @select="select"
                >
                </Cn-filterCriteria>
            </view>
            <view class="content">
                <Transient
                    ref="TransientRef"
                    v-if="current === 0"
                    :navHeight="navHeight"
                    :selectValue="selectValue"
                    @getDevCount="getDevCount"
                />
                <SteadyState
                    ref="SteadyStateRef"
                    v-if="current === 1"
                    :navHeight="navHeight"
                    :selectValue="selectValue"
                    @getDevCount="getDevCount"
                />
                <Alarm
                    ref="AlarmRef"
                    v-if="current === 2"
                    :navHeight="navHeight"
                    :selectValue="selectValue"
                    @getDevCount="getDevCount"
                />
                <Run
                    ref="RunRef"
                    v-if="current === 3"
                    :navHeight="navHeight"
                    :selectValue="selectValue"
                    @getDevCount="getDevCount"
                />
            </view>
        </view>
    </Cn-page>
</template>
<script>
import Transient from '@/pages/message1/transient.vue'
import SteadyState from '@/pages/message1/steadyState.vue'
import Alarm from '@/pages/message1/alarm.vue'
import Run from '@/pages/message1/run.vue'
import { getDevCount } from '../../common/api/device.js'
import { updateStatus } from '@/common/api/message'
export default {
    components: { Transient, SteadyState, Alarm, Run },
    props: {},
    data() {
        return {
            items: ['暂态事件', '稳态事件'], //'运行告警', '运行事件'
            badgeCounts: [0, 0, 0, 0],
            current: 0,
            colorIndex: 0,
            item: '',
            loading: false,
            width: 0,
            navHeight: 0,
            selectValue: {},
            devCount: [],
            // 筛选数据
        }
    },
    onLoad() {},
    mounted() {
        this.setHeight()
    },
    onPullDownRefresh() {
        this.refresh()
    },
    onNavigationBarButtonTap(e) {
        uni.showModal({
            title: '提示',
            content: '确定要全部标记为已读吗？',
            success: (res) => {
                if (res.confirm) {
                    updateStatus({
                        // '暂态事件', 0
                        // '稳态事件', 1
                        //  '运行告警', 3
                        // '运行事件'   2
                        type: this.current == 2 ? 3 : this.current == 3 ? 2 : this.current,
                        eventIds: [],
                    }).then(() => {
                        this.refresh()
                        this.getDevCount()
                    })
                }
            },
        })
    },

    onShow() {
        if (uni.getStorageSync(this.$cacheKey.userInfo).authorities === 'operation_manager') {
            this.items = ['暂态事件', '稳态事件', '运行告警', '运行事件']
        }
        const params = uni.getStorageSync('messageParams')
        this.getDevCount()
        this.$nextTick(() => {
            if (params.type !== '') {
                this.current = params.type - 0
            }
            if (params.engineeringName != '') {
                this.$refs.cnFilterCriteria && this.$refs.cnFilterCriteria.external(params)
            }
            // this.refresh()
            this.$refs.TransientRef && this.$refs.TransientRef.getConfig()
        })
    },
    // 页面销毁
    onHide() {
        uni.setStorageSync('messageParams', {
            engineeringName: '',
            engineeringId: '', //工程ID
            projectName: '',
            projectId: '', //項目ID
            deviceName: '',
            deviceId: '', //设备ID
            lineName: '',
            lineId: '', //测点ID
            type: '',
        })
    },
    methods: {
        setHeight() {
            uni.createSelectorQuery()
                .select('.tabsBox')
                .boundingClientRect((rect) => {
                    this.width = rect.width
                    //
                    // #ifdef H5
                    this.navHeight = rect.height + 75
                    // #endif
                    // #ifdef APP-PLUS
                    this.navHeight = rect.height + 20
                    // #endif
                })
                .exec()
        },

        refresh() {
            switch (this.current) {
                case 0:
                    this.$refs.TransientRef.store.reload()
                    break
                case 1:
                    this.$refs.SteadyStateRef.store.reload()
                    break
                case 2:
                    this.$refs.AlarmRef.store.reload()
                    break
                case 3:
                    this.$refs.RunRef.store.reload()
                    break
            }
        },
        onClickItem(e) {
            if (this.current !== e.currentIndex) {
                this.current = e.currentIndex
            }
        },
        select(value) {
            this.selectValue = value
            setTimeout(() => {
                this.setHeight()
            }, 100)
        },
        // 设置角标
        getDevCount() {
            if (uni.getStorageSync('projectList')[1] != undefined) {
                getDevCount(uni.getStorageSync('projectList')[1].engineeringId).then((res) => {
                    this.devCount = res.data
                    this.badgeCounts = [
                        this.devCount.eventCount,
                        this.devCount.harmonicCount,
                        this.devCount.alarmCount,
                        this.devCount.runCount,
                    ]
                    uni.setStorage({
                        key: this.$cacheKey.messageCount,
                        data: this.devCount,
                    })

                    let messagePage =
                        this.devCount.eventCount +
                        this.devCount.harmonicCount +
                        (uni.getStorageSync(this.$cacheKey.userInfo).authorities == 'operation_manager'
                            ? this.devCount.alarmCount + this.devCount.runCount
                            : 0)
                    let minePage = this.devCount.feedBackCount

                    if (messagePage) {
                        uni.setTabBarBadge({
                            index: 1,
                            text: messagePage ? (messagePage > 99 ? '99+' : messagePage + '') : '',
                        })
                    } else {
                        uni.removeTabBarBadge({
                            index: 1,
                        })
                    }
                    if (minePage) {
                        uni.setTabBarBadge({
                            index: 2,
                            text: minePage + '',
                        })
                    } else {
                        uni.removeTabBarBadge({
                            index: 2,
                        })
                    }
                    // #ifdef APP-PLUS
                    plus.runtime.setBadgeNumber(messagePage + minePage)
                    // #endif
                })
            }
        },

        // 根据索引动态计算右侧偏移位置，使徽章对准每个标签的右上角
        getBadgeRightPosition(index) {
            if (this.items == 4) {
                return (index + 1) * (this.width / 4) + 'px'
            } else {
                return (index + 0) * (this.width / 2) + 'px'
            }
        },
    },

    computed: {},
}
</script>
<style lang="scss">
.messageBox {
    overflow: hidden;
    /deep/.tabsBox {
        position: relative;
        background-color: #fff;
        .segmented-control {
            // height: 40px;
            background-color: #fff;
            border-bottom: 1px solid #cccccc70;
            .segmented-control__item {
                align-items: baseline;
                margin-top: 5px;
            }
        }

        .segmented-control__text {
            font-size: 30rpx !important;
            color: rgb(96, 98, 102);
        }
        .segmented-control__item--text {
            font-weight: bold;
            padding: 0 0 5rpx;
        }
        .choose {
            // padding: 20rpx;
            // display: flex;
            // justify-content: space-between;
            // align-items: center;
            background: #fff;
        }
    }

    .subsection {
        width: 90%;
        margin: 20rpx auto;
    }
    .badge-container {
        position: absolute;
        top: -10rpx; /* 徽章向上偏移，与控件重叠 */
        display: flex;
        justify-content: space-around;
        right: 0;
        width: 100%;
        height: 0;
        pointer-events: none; /* 确保徽章不干扰点击事件 */
    }
    /deep/ .uni-badge--error {
        background-color: #ff3b30;
    }

    .badge {
        flex: 1;
        // position: absolute;
        // min-width: 18px;
        // height: 16px;
        // padding: 0 4px;
        // background-color: #ff3b30; /* 红色徽章 */
        // color: white;
        // font-size: 22rpx;
        // line-height: 16px;
        // text-align: center;
        // border-radius: 9px;
        //
        text-align: center;
        // transform: translateX(-110%); /* 使徽章中心对齐右上角 */
        .uni-badge--x {
            left: 70rpx;
        }
    }
}
</style>
