<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">
                    <picker v-if="current === 0" @change="bindPickerChange" :value="sortIndex" :range="sortOptions">
                        <view class="nav-menu nav-menu1">
                            <view class="nav-text">
                                {{ sortOptions[sortIndex] }}排序
                            </view>

                            <uni-icons type="bottom" size="14"></uni-icons>
                        </view>
                    </picker>
                </Cn-filterCriteria>
            </view>
            <view class="content">
                <Transient ref="TransientRef" v-if="current === 0" :navHeight="navHeight" :selectValue="selectValue"
                    :sortIndex="sortIndex" @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: [],
            sortIndex: 0,
            sortOptions: ['发生时间', '暂降幅值', '持续时间'],
        }
    },
    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)||0
            }
            if (params.engineeringName != '') {
                this.$refs.cnFilterCriteria && this.$refs.cnFilterCriteria.external(params)
            }
        })
    },
    // 页面销毁
    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)
        },
        bindPickerChange(e) {
            this.sortIndex = e.detail.value
            setTimeout(() => {
                if (this.$refs.TransientRef) {
                    this.$refs.TransientRef.init()
                }
            }, 0)
        },
        // 设置角标
        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;
        text-align: center;

        .uni-badge--x {
            left: 70rpx;
        }
    }

    .sort-picker {
        font-size: 24rpx;
        color: #2563eb;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }
}

.nav-menu {
    display: flex;
    align-items: center;
}


.nav-menu1 {
    display: flex;
    align-items: center;
    max-width: calc(100vw - 150px);
}

/* 文字容器：单行溢出省略 */
.nav-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    /* 强制不换行 */
    text-overflow: ellipsis;
    // -webkit-line-clamp: 1;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // text-overflow: ellipsis;
    // word-break: break-all;
    // white-space: nowrap;
    line-height: 1;
}

</style>
