<template>
    <page-meta :page-style="'overflow:' + (indicatorPopupShow ? 'hidden' : 'visible')"></page-meta>
    <view class="itic2-page">
        <view class="itic2-content">
            <view class="project-header card">
                <view class="project-title-row">
                    <view class="project-title-left">
                        <uni-icons custom-prefix="iconfont" type="icon-gongcheng" size="22" color="#376cf3" />
                        <text class="project-name">{{ engineeringName }}</text>
                    </view>
                    <view class="switch-btn" @click="switchEngineering">
                        <uni-icons type="loop" size="14" color="#376cf3" />
                        <text>切换工程</text>
                    </view>
                </view>
                <view class="stats-row">
                    <view class="stats-item" v-for="(item, idx) in summaryStats" :key="idx" @click="jump(idx)">
                        <text class="stats-num">{{ item.value }}</text>
                        <text class="stats-label">{{ item.label }}</text>
                    </view>
                </view>
            </view>

            <view class="monitor-section-header mb16">
                <view class="section-title-row section-title-row--no-mb">
                    <uni-icons type="settings" size="18" color="#376cf3" />
                    <text class="section-title">已选展示指标</text>
                </view>
            </view>
            <view class="indicators-card card">
                <view class="indicator-group">
                    <text class="indicator-group-title">治理监测点指标</text>
                    <view class="indicator-tags">
                        <view
                            v-for="(tag, idx) in selectedIndicatorsPqCom"
                            :key="'governance-' + tag"
                            class="indicator-tag indicator-tag--active"
                            @click="removeIndicator(idx, 'governance')"
                        >
                            <text class="indicator-tag-text">{{ formatIndicatorTag(tag) }}</text>
                            <uni-icons type="closeempty" size="12" color="#376cf3" />
                        </view>
                        <view class="indicator-tag indicator-tag--add" @click="openIndicatorPopup('governance')">
                            <text>+添加指标</text>
                        </view>
                    </view>
                </view>
                <view class="indicator-group">
                    <text class="indicator-group-title">非治理监测点指标</text>
                    <view class="indicator-tags">
                        <view
                            v-for="(tag, idx) in selectedIndicators"
                            :key="'normal-' + tag"
                            class="indicator-tag indicator-tag--active"
                            @click="removeIndicator(idx, 'normal')"
                        >
                            <text class="indicator-tag-text">{{ formatIndicatorTag(tag) }}</text>
                            <uni-icons type="closeempty" size="12" color="#376cf3" />
                        </view>
                        <view class="indicator-tag indicator-tag--add" @click="openIndicatorPopup('normal')">
                            <text>+添加指标</text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="monitor-section">
                <view class="monitor-section-header">
                    <view class="section-title-row section-title-row--no-mb">
                        <uni-icons type="map-pin-ellipse" size="20" color="#376cf3" />
                        <text class="section-title">监测点信息</text>
                    </view>
                    <view class="legend-row">
                        <view class="legend-item" v-for="phase in phaseColors" :key="phase.name">
                            <view class="legend-dot" :style="{ background: phase.color }" />
                            <text class="legend-text">{{ phase.name }}</text>
                        </view>
                    </view>
                </view>
                <view class="monitor-search">
                    <uni-search-bar
                        v-model="filterKeyword"
                        bgColor="#fff"
                        placeholder="搜索项目、设备、监测点"
                        cancelButton="none"
                    />
                </view>

                <view class="monitor-list">
                    <view class="monitor-card card" v-for="(point, idx) in filteredMonitoringPoints" :key="idx">
                        <view class="card-header">
                            <view class="event-icon">
                                <Cn-icon-transient name="监测点" />
                            </view>
                            <view class="card-header-info">
                                <view class="point-name-row">
                                    <text class="point-name ellipsis">{{ point.pointName }}</text>
                                    <text class="event-tag" :class="point.runStatus == 0 ? 'zx-tag' : 'lx-tag'">
                                        {{ point.runStatus == 0 ? '在线' : '离线' }}
                                    </text>
                                </view>
                                <view class="meta-row">
                                    <text class="meta-item ellipsis">项目：{{ point.projectName }}</text>
                                    <text class="meta-item ellipsis">设备：{{ point.deviceName }}</text>
                                </view>
                                <text class="meta-time ellipsis">最新数据时间：{{ point.dataTime || '-' }}</text>
                            </view>
                        </view>

                        <view class="params-section">
                            <view
                                v-for="(rowItems, rowIdx) in chunkedChildren(getDisplayChildren(point))"
                                :key="rowIdx"
                                class="double-row"
                            >
                                <view v-for="(child, childIdx) in rowItems" :key="childIdx" class="param-group">
                                    <view class="param-title">
                                        <text>{{ child.name }} {{ child.unit ? `(${child.unit})` : '' }}</text>
                                    </view>
                                    <view v-if="hasTPhaseData(child)" class="phase-single">
                                        <text class="phase-value-vertical phase-value-vertical--neutral">{{
                                            child.T
                                        }}</text>
                                    </view>
                                    <view v-else class="phase-vertical">
                                        <view class="phase-item-vertical">
                                            <text
                                                class="phase-value-vertical"
                                                :style="{ color: phaseColors[0].color }"
                                                >{{ child.A }}</text
                                            >
                                        </view>
                                        <view class="phase-divider" />
                                        <view class="phase-item-vertical">
                                            <text
                                                class="phase-value-vertical"
                                                :style="{ color: phaseColors[1].color }"
                                                >{{ child.B }}</text
                                            >
                                        </view>
                                        <view class="phase-divider" />
                                        <view class="phase-item-vertical">
                                            <text
                                                class="phase-value-vertical"
                                                :style="{ color: phaseColors[2].color }"
                                                >{{ child.C }}</text
                                            >
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>

                        <view class="more-btn" v-if="shouldShowMoreBtn(point)" @click="onMoreIndicators(point)">
                            <uni-icons type="list" size="16" color="#376cf3" />
                            <text>更多指标</text>
                        </view>
                    </view>
                    <uni-load-more
                        v-if="listStatus == 'loading' || filteredMonitoringPoints.length > 0"
                        :status="listStatus"
                    ></uni-load-more>
                    <Cn-empty v-else-if="listStatus !== 'loading'" style="top: 45%"></Cn-empty>
                </view>
            </view>
        </view>

        <view class="back-top boxClick" v-show="showBackTop" @click="backToTop">
            <uni-icons type="arrow-up" size="22" color="#fff"></uni-icons>
        </view>

        <uni-popup ref="indicatorPopup" type="bottom" :safe-area="false" @change="onIndicatorPopupChange">
            <view class="indicator-popup">
                <view class="indicator-popup-header" @touchmove.stop.prevent>
                    <text class="indicator-popup-cancel" @click="closeIndicatorPopup">取消</text>
                    <text class="indicator-popup-title">{{ indicatorPopupSubtitle }}</text>
                    <text class="indicator-popup-confirm" @click="confirmIndicatorPopup">确定</text>
                </view>
                <scroll-view class="indicator-popup-list" scroll-y :show-scrollbar="false" @touchmove.stop>
                    <view class="indicator-popup-section">
                        <!-- <text class="indicator-popup-subtitle">{{ indicatorPopupSubtitle }}</text> -->
                        <view v-if="currentPopupTargetLists.length === 0" class="indicator-popup-empty">
                            <text>暂无指标数据</text>
                        </view>
                        <view
                            v-for="item in currentPopupTargetLists"
                            :key="item.id || item.name"
                            class="indicator-popup-item"
                            :class="{
                                'indicator-popup-item--active': popupSelectedIndicators.includes(item.name),
                            }"
                            @click="togglePopupIndicator(item.name)"
                        >
                            <text>{{ item.name }}</text>
                            <uni-icons
                                v-if="popupSelectedIndicators.includes(item.name)"
                                type="checkmarkempty"
                                size="18"
                                color="#376cf3"
                            />
                        </view>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { queryByCode, queryCsDictTree } from '@/common/api/dictionary'
import { getLineDataByEngineer } from '@/common/api/harmonic'
import { getDevCount } from '@/common/api/device.js'

/** 无本地缓存时的默认展示指标：电压、电流 */
const DEFAULT_INDICATOR_CODES = ['Key_Power_Quality_V', 'Key_Power_Quality_I']

/** 治理测点无缓存时的默认展示指标 */
const GOVERNANCE_DEFAULT_INDICATOR_CODES = ['0', '1']

export default {
    data() {
        return {
            targetLists: [],
            targetListsPqCom: [],
            indicatorPopupType: 'governance',
            popupSelectedIndicators: [],
            engineeringName: '',
            engineeringId: '',
            summaryStats: [
                { label: '项目总数', value: 0 },
                { label: '设备总数', value: 0 },
                { label: '监测点总数', value: 0 },
            ],
            selectedIndicators: [],
            selectedIndicatorsPqCom: [],
            phaseColors: [
                { name: 'A相', color: '#DAA520' },
                { name: 'B相', color: '#2E8B57' },
                { name: 'C相', color: '#D54941' },
            ],
            monitoringPoints: [],
            filterKeyword: '',
            listStatus: 'noMore',
            lineDataRequestId: 0,
            showBackTop: false,
            indicatorPopupShow: false,
            skipRefreshOnShow: false,
        }
    },
    computed: {
        indicatorPopupSubtitle() {
            return this.indicatorPopupType === 'governance' ? '治理监测点指标' : '非治理监测点指标'
        },
        currentPopupTargetLists() {
            return this.indicatorPopupType === 'governance' ? this.targetListsPqCom : this.targetLists
        },
        filteredMonitoringPoints() {
            const keyword = (this.filterKeyword || '').trim().toLowerCase()
            if (!keyword) return this.monitoringPoints
            return this.monitoringPoints.filter((point) => {
                const projectName = String(point.projectName || '').toLowerCase()
                const deviceName = String(point.deviceName || '').toLowerCase()
                const pointName = String(point.pointName || '').toLowerCase()
                return (
                    projectName.indexOf(keyword) !== -1 ||
                    deviceName.indexOf(keyword) !== -1 ||
                    pointName.indexOf(keyword) !== -1
                )
            })
        },
    },
    onPageScroll(e) {
        this.showBackTop = e.scrollTop > 200
    },
    // 页面显示时同步工程名称；从指标详情返回时不刷新
    onShow() {
        const engineering = uni.getStorageSync('engineering')
        const skipRefresh = this.skipRefreshOnShow
        this.skipRefreshOnShow = false
        if (engineering?.id) {
            this.engineeringName = engineering.name || ''
            this.engineeringId = engineering.id
            if (!skipRefresh) {
                this.info()
            }
        }
        if ((this.targetLists.length || this.targetListsPqCom.length) && !skipRefresh) {
            this.loadSelectedIndicators()
        }
    },
    // 加载电能质量指标字典
    created() {
        const loadDictTree = (code) => queryByCode(code).then((res) => queryCsDictTree(res.data.id))

        Promise.all([loadDictTree('Key_Power_Quality'), loadDictTree('Key_Power_Quality_Pq_Com')]).then(
            ([normalResp, pqComResp]) => {
                this.targetLists = (normalResp.data || []).slice().reverse()
                this.targetListsPqCom = (pqComResp.data || []).slice().reverse()
                this.loadSelectedIndicators()
            },
        )
    },
    // 下拉刷新
    onPullDownRefresh() {
        this.info()
    },
    methods: {
        // 查询接口
        info() {
            if (!this.engineeringId) {
                uni.stopPullDownRefresh()
                return
            }
            this.loadDevCount()
            this.loadLineData()
        },
        loadDevCount() {
            getDevCount(this.engineeringId).then((res) => {
                if (res.code == 'A0000') {
                    this.updateSummaryStats(res.data)
                }
            })
        },
        loadLineData() {
            this.listStatus = 'loading'
            this.monitoringPoints = []
            this.filterKeyword = ''
            const requestId = ++this.lineDataRequestId
            const engineerId = this.engineeringId
            getLineDataByEngineer({ id: engineerId })
                .then((res) => {
                    if (requestId !== this.lineDataRequestId) return
                    if (res.code == 'A0000') {
                        this.monitoringPoints = this.parseMonitoringPoints(res.data)
                    } else if (res.message) {
                        this.$util.toast(res.message)
                    }
                })
                .catch(() => {
                    if (requestId !== this.lineDataRequestId) return
                    this.$util.toast('加载失败，请稍后重试')
                })
                .finally(() => {
                    if (requestId !== this.lineDataRequestId) return
                    this.listStatus = 'noMore'
                    uni.stopPullDownRefresh()
                })
        },
        // 接口 data 转为页面 monitoringPoints
        parseMonitoringPoints(data = []) {
            const list = Array.isArray(data) ? data : []
            return list.map((point) => ({
                projectName: point.projectName || '',
                deviceName: point.deviceName || '',
                pointName: point.pointName || '',
                dataTime: point.dataTime || '',
                lineType: point.lineType,
                runStatus: point.runStatus,
                children: this.groupChildren(point.children || []),
            }))
        },
        // 将按相别拆分的指标合并为 A/B/C 结构
        groupChildren(children = []) {
            const map = {}
            const order = []
            children.forEach((item) => {
                const key = item.targetId || item.name
                if (!map[key]) {
                    map[key] = {
                        targetId: item.targetId,
                        name: item.name,
                        unit: item.unit,
                        A: '-',
                        B: '-',
                        C: '-',
                        T: '-',
                    }
                    order.push(key)
                }
                const phase = item.phase
                if (phase === 'A' || phase === 'B' || phase === 'C' || phase === 'T') {
                    map[key][phase] = this.formatPhaseValue(item.data)
                }
            })
            return order.map((key) => map[key])
        },
        formatPhaseValue(value) {
            if (value === null || value === undefined || value === '' || value === 3.14159) return '-'
            const num = Number(value)
            if (Number.isNaN(num)) return String(value)
            return num.toFixed(2)
        },
        hasTPhaseData(child) {
            return child.T !== undefined && child.T !== null && child.T !== '-'
        },
        updateSummaryStats(devCount = {}) {
            const deviceTotal = (devCount.currentOnLineDevCount || 0) + (devCount.currentOffLineDevCount || 0)

            this.summaryStats = [
                { label: '项目总数', value: devCount.currentProjectCount || 0 },
                { label: '设备总数', value: deviceTotal },
                { label: '监测点总数', value: devCount.lineCount || 0 },
            ]
        },

        // 指标名称超过6个字截断显示
        formatIndicatorTag(name) {
            if (!name || name.length <= 6) return name
            return `${name.slice(0, 5)}...`
        },
        // 判断指标名称是否匹配（兼容括号后缀）
        matchIndicator(name, selected) {
            if (!name || !selected) return false
            const base = (name || '').replace(/\(.*\)/, '').trim()
            const selectedBase = (selected || '').replace(/\(.*\)/, '').trim()
            return base === selectedBase
        },
        // 从缓存读取已选指标，无缓存时使用默认指标
        loadSelectedIndicators() {
            this.loadNormalSelectedIndicators()
            this.loadGovernanceSelectedIndicators()
        },
        loadNormalSelectedIndicators() {
            if (!this.targetLists.length) return
            const cached = uni.getStorageSync(this.$cacheKey.monitorSelectedIndicators)
            if (Array.isArray(cached) && cached.length) {
                const valid = cached.filter((name) =>
                    this.targetLists.some((item) => this.matchIndicator(item.name, name)),
                )
                if (valid.length) {
                    this.selectedIndicators = valid
                    return
                }
            }
            this.selectedIndicators = this.getDefaultIndicatorsByCode()
            this.saveSelectedIndicators()
        },
        loadGovernanceSelectedIndicators() {
            if (!this.targetListsPqCom.length) return
            const cached = uni.getStorageSync(this.$cacheKey.monitorSelectedIndicatorsPqCom)
            if (Array.isArray(cached) && cached.length) {
                const valid = cached.filter((name) =>
                    this.targetListsPqCom.some((item) => this.matchIndicator(item.name, name)),
                )
                if (valid.length) {
                    this.selectedIndicatorsPqCom = valid
                    return
                }
            }
            this.selectedIndicatorsPqCom = this.getDefaultGovernanceIndicators()
            this.saveSelectedIndicatorsPqCom()
        },
        getDefaultIndicatorsByCode() {
            return this.targetLists
                .filter((item) => DEFAULT_INDICATOR_CODES.includes(item.code) && item.name)
                .map((item) => item.name)
        },
        getDefaultGovernanceIndicators() {
            return this.targetListsPqCom
                .filter((item) => GOVERNANCE_DEFAULT_INDICATOR_CODES.includes(item.code) && item.name)
                .map((item) => item.name)
        },
        saveSelectedIndicators() {
            uni.setStorageSync(this.$cacheKey.monitorSelectedIndicators, this.selectedIndicators)
        },
        saveSelectedIndicatorsPqCom() {
            uni.setStorageSync(this.$cacheKey.monitorSelectedIndicatorsPqCom, this.selectedIndicatorsPqCom)
        },
        // 跳转切换工程
        switchEngineering() {
            uni.navigateTo({ url: '/pages/home/selectEngineering' })
        },
        // 移除已选指标
        removeIndicator(idx, type = 'normal') {
            const isGovernance = type === 'governance'
            const selected = isGovernance ? this.selectedIndicatorsPqCom : this.selectedIndicators
            if (selected.length <= 1) {
                uni.showToast({ title: '至少保留一个指标', icon: 'none' })
                return
            }
            selected.splice(idx, 1)
            if (isGovernance) {
                this.saveSelectedIndicatorsPqCom()
            } else {
                this.saveSelectedIndicators()
            }
        },
        // 打开指标选择弹窗
        openIndicatorPopup(type = 'governance') {
            const isGovernance = type === 'governance'
            const targetLists = isGovernance ? this.targetListsPqCom : this.targetLists
            const selected = isGovernance ? this.selectedIndicatorsPqCom : this.selectedIndicators
            if (!targetLists.length) {
                uni.showToast({ title: '暂无指标数据', icon: 'none' })
                return
            }
            this.indicatorPopupType = type
            this.popupSelectedIndicators = targetLists
                .filter((item) => selected.some((name) => this.matchIndicator(item.name, name)))
                .map((item) => item.name)
            this.$refs.indicatorPopup.open()
        },
        // 关闭指标选择弹窗
        closeIndicatorPopup() {
            this.$refs.indicatorPopup.close()
            this.popupSelectedIndicators = []
            this.indicatorPopupType = 'governance'
        },
        onIndicatorPopupChange(e) {
            this.indicatorPopupShow = !!e.show
        },
        // 切换弹窗内指标勾选状态
        togglePopupIndicator(name) {
            const idx = this.popupSelectedIndicators.indexOf(name)
            if (idx > -1) {
                this.popupSelectedIndicators.splice(idx, 1)
            } else {
                this.popupSelectedIndicators.push(name)
            }
        },
        // 确认指标选择
        confirmIndicatorPopup() {
            if (!this.popupSelectedIndicators.length) {
                uni.showToast({ title: '至少保留一个指标', icon: 'none' })
                return
            }
            if (this.indicatorPopupType === 'governance') {
                this.selectedIndicatorsPqCom = [...this.popupSelectedIndicators]
                this.saveSelectedIndicatorsPqCom()
            } else {
                this.selectedIndicators = [...this.popupSelectedIndicators]
                this.saveSelectedIndicators()
            }
            this.closeIndicatorPopup()
        },
        // 跳转指标详情页，展示该监测点全部指标
        onMoreIndicators(point) {
            this.skipRefreshOnShow = true
            uni.setStorageSync('monitorPointDetail', {
                ...point,
                engineeringName: this.engineeringName,
                showAllIndicators: true,
            })
            uni.navigateTo({
                url: '/pages/index/comp/targetInfo',
            })
        },
        // 按监测点类型取对应已选指标过滤展示
        getDisplayChildren(point) {
            const children = point.children || []
            const selected = point.lineType === 0 ? this.selectedIndicatorsPqCom : this.selectedIndicators
            return selected
                .map((name) => children.find((child) => this.matchIndicator(child.name, name)))
                .filter(Boolean)
        },
        // 有指标数据时显示「更多指标」
        shouldShowMoreBtn(point) {
            return (point.children || []).length > 0
        },

        // 将指标列表按每行两个分组
        chunkedChildren(children) {
            const result = []
            for (let i = 0; i < children.length; i += 2) {
                result.push(children.slice(i, i + 2))
            }
            return result
        },
        backToTop() {
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 300,
            })
            this.showBackTop = false
        },
        // 跳转页面
        jump(idx) {
            if (idx == 0) {
                // 项目总数 -> 项目管理
                const engineering = uni.getStorageSync('engineering') || {
                    id: this.engineeringId,
                    name: this.engineeringName,
                }
                if (!engineering?.id) {
                    return uni.showToast({
                        title: '请先选择工程',
                        icon: 'none',
                    })
                }
                uni.navigateTo({
                    url:
                        '/pages/project/list?engineeringName=' +
                        encodeURIComponent(engineering.name || '') +
                        '&engineeringId=' +
                        engineering.id,
                })
            } else if (idx == 1) {
                // 设备总数
                uni.navigateTo({
                    url: '/pages/device/list?type=nowEngineering',
                })
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.itic2-page {
    min-height: 100vh;
    background: #f7f8fa;
    position: relative;
}

.itic2-content {
    padding: 20rpx 0 0rpx;
    box-sizing: border-box;
}

.back-top {
    position: fixed;
    right: 30rpx;
    bottom: 60rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: #376cf3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(55, 108, 243, 0.35);
    z-index: 1;
}

.card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
    margin: 0 10px 10px;
    overflow: hidden;
}

.project-header {
    padding: 20rpx;
    // margin-top: 20rpx;
}

.project-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.project-title-left {
    display: flex;
    align-items: center;
    gap: 12rpx;
    flex: 1;
    min-width: 0;
}

.project-name {
    font-size: 32rpx;
    font-weight: 700;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch-btn {
    display: flex;
    align-items: center;
    gap: 6rpx;
    padding: 8rpx 20rpx;
    border: 1rpx solid #376cf380;
    background-color: #266fff10;
    border-radius: 16rpx;
    flex-shrink: 0;

    text {
        font-size: 24rpx;
        color: #376cf3;
    }
}

.stats-row {
    display: flex;
    gap: 20rpx;
}

.stats-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rpx;
    padding: 16rpx 12rpx;
    background: #376cf3;
    border-radius: 16rpx;
    color: #ffffff;
}

.stats-num {
    font-size: 44rpx;
    font-weight: 700;
    line-height: 1.2;
}

.stats-label {
    font-size: 26rpx;
}

.indicators-card {
    padding: 24rpx;
}

.indicator-group {
    margin-bottom: 20rpx;

    &:last-child {
        margin-bottom: 0;
    }
}

.indicator-group-title {
    display: block;
    margin-bottom: 12rpx;
    font-size: 26rpx;
    color: #666;
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 10rpx;
    margin-bottom: 20rpx;

    &--no-mb {
        margin-bottom: 0;
    }
}

.section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333333;
}

.indicator-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.indicator-tag {
    display: flex;
    align-items: center;
    gap: 6rpx;
    padding: 6rpx 14rpx;
    border-radius: 16rpx;
    font-size: 26rpx;
    max-width: 100%;

    .indicator-tag-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &--active {
        background: #376cf315;
        color: #376cf3;
    }

    &--add {
        background: #f5f5f5;
        color: #666666;
        border: 1rpx dashed #dcdfe6;
    }
}

.monitor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12rpx;
    padding: 0 10px 0rpx;
}

.legend-row {
    display: flex;
    gap: 20rpx;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
}

.legend-dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
}

.legend-text {
    font-size: 24rpx;
    color: #666666;
}

.monitor-search {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 16rpx 10px 16rpx;
    background: #f7f8fa;

    /deep/ .uni-searchbar {
        padding: 0;
    }
}

.monitor-list {
    display: flex;
    flex-direction: column;
    padding-bottom: 40rpx;
}

.monitor-card {
    border: 1rpx solid #eef2f6;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
}

.card-header {
    padding: 20rpx 20rpx 12rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eef2f6;
}

.event-icon {
    width: 90rpx;
    height: 90rpx;
    border-radius: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
    background-color: #376cf320;
    flex-shrink: 0;
}

.card-header-info {
    flex: 1;
    min-width: 0;
}

.point-name-row {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 8rpx;
    min-width: 0;
}

.point-name {
    // flex: 1;
    min-width: 0;
    font-size: 30rpx;
    font-weight: 700;
    color: #333333;
}

.point-type-tag {
    flex-shrink: 0;
    padding: 4rpx 12rpx;
    font-size: 22rpx;
    color: #2e8b57;
    background: #2e8b5715;
    border-radius: 8rpx;
    line-height: 1.2;
}

.meta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6rpx 12rpx;
}

.meta-item {
    font-size: 24rpx;
    color: #666666;
    line-height: 1.2;
}

.meta-time {
    display: block;
    margin-top: 8rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 1.2;
}

.params-section {
    padding: 20rpx 16rpx;
}

.double-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;
    margin-bottom: 16rpx;

    &:last-child {
        margin-bottom: 0;
    }
}

.param-group {
    min-width: 0;
    background: #f3f3f3;
    border-radius: 16rpx;
    padding: 16rpx 8rpx 12rpx;
}

.param-title {
    font-size: 24rpx;
    color: #666666;
    margin-bottom: 8rpx;
    padding-left: 4rpx;
}

.phase-vertical {
    display: flex;
    align-items: stretch;
}

.phase-single {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rpx;
}

.phase-item-vertical {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rpx;
}

.phase-value-vertical {
    font-size: 26rpx;
    font-weight: 700;

    &--neutral {
        color: #333333;
    }
}

.phase-divider {
    width: 1px;
    background: #d2d2d2;
    margin: 8rpx 0;
}

.more-btn {
    margin: 0 20rpx 20rpx;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    border: 1rpx solid #376cf380;
    background-color: #266fff10;
    border-radius: 16rpx;

    text {
        font-size: 28rpx;
        color: #376cf3;
        font-weight: 500;
    }
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.indicator-popup {
    background: #ffffff;
    overflow: hidden;
}

.indicator-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18rpx 32rpx;
    border-bottom: 1rpx solid #eef2f6;
}

.indicator-popup-cancel {
    font-size: 27rpx;
    color: #666666;
    min-width: 80rpx;
}

.indicator-popup-title {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
}

.indicator-popup-confirm {
    font-size: 28rpx;
    color: #376cf3;
    min-width: 80rpx;
    text-align: right;
}

.indicator-popup-list {
    height: 60vh;
    padding: 8rpx 0 16rpx;
    box-sizing: border-box;
}

.indicator-popup-section {
    padding-bottom: 8rpx;
}

.indicator-popup-subtitle {
    display: block;
    padding: 16rpx 32rpx 8rpx;
    font-size: 24rpx;
    color: #999999;
}

.indicator-popup-empty {
    padding: 40rpx 0;
    text-align: center;
    font-size: 28rpx;
    color: #999999;
}

.indicator-popup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
    font-size: 26rpx;
    color: #333333;

    &--active {
        color: #376cf3;
        background: #376cf310;
    }
}

.event-tag {
    font-size: 22rpx;
    padding: 2rpx 10rpx;
    border-radius: 8rpx;
    margin-top: 5rpx;
    margin-left: 10rpx;
    // height: 38rpx;
}

// 在线
.zx-tag {
    background-color: #10b98120;
    color: #10b981;
}

.lx-tag {
    background-color: #ff3b3020;
    color: #ff3b30;
}

/deep/ .uni-searchbar__box {
    justify-content: left;
}
</style>
