<template>
    <navigation :title="title" back-url="pages/intelligent/index"> </navigation>
    <view class="warehouse-page contentBox">
        <view class="warehouse-hero">
            <view>
                <text class="hero-sub">{{ projectName || '项目仓库' }}</text>
                <view class="hero-title">{{ warehouseName || '仓库传感器看板' }}</view>
            </view>
            <view class="hero-meta ">
                <view class="warehouse-hero-box">
                    <div class="summary-card mr-16 total">
                        <span class="label">设备总数</span>
                        <strong class="value">{{ sensorCards.length }}</strong>
                    </div>

                    <div class="summary-card mr-16 online">
                        <span class="label">在线设备</span>
                        <strong class="value">{{ onlineCount }}</strong>
                    </div>

                    <div class="summary-card offline">
                        <span class="label">离线设备</span>
                        <strong class="value">{{ offlineCount }}</strong>
                    </div>
                </view>
                <view class="report"> 最近上报:{{ latestReportTime || '--' }} </view>
            </view>
        </view>

        <view class="sensor-grid">
            <view v-if="loading" class="loading-view">加载中...</view>

            <view v-else-if="sensorCards.length === 0" class="empty-state">
                当前仓库暂无传感器设备
            </view>

            <view v-for="item in sensorCards" :key="item.cardKey" :class="['sensor-card', item.statusClass]">
                <view class="sensor-content">
                    <view class="sensor-main">
                        <view class="sensor-top flex">
                            <view :class="['sensor-icon', item.type]">
                                <text>{{ item.icon }}</text>
                            </view>
                            <view v-if="isSocketControlType(item.type)" class="socket-actions">
                                <uv-switch v-model="controlLoadingMap[item.cardKey]" active-color="#165D46"
                                    @change="(e) => handleSocketControl1(item, e)" />
                            </view>

                        </view>
                        <view class="sensor-body">
                            <view class="flex justify-between align-center">
                                <view class="type-name mb-4">{{ item.typeName }} </view>
                            </view>

                            <view>
                                <text class="mr-4 text"> {{ item.summary }}</text>
                                <text class=" text">|</text>
                                <text :class="['sensor-state', item.statusClass, 'ml-4']"> {{ item.onlineText }}</text>
                            </view>
                            <view v-if="isSocketControlType(item.type)" class="socket-actions">

                                <text class="control-btn on" :disabled="!!controlLoadingMap[item.cardKey]"
                                    @tap="handleSocketControl(item, 'on')">
                                    {{ getSocketActionText(item.type, 'on', !!controlLoadingMap[item.cardKey]) }}
                                </text>
                                <text class="control-btn off" :disabled="!!controlLoadingMap[item.cardKey]"
                                    @tap="handleSocketControl(item, 'off')">
                                    {{ getSocketActionText(item.type, 'off', !!controlLoadingMap[item.cardKey]) }}
                                </text>
                            </view>

                            <view v-else-if="item.type === 'switch'" class="switch-actions">
                                <view v-for="channel in [1, 2, 3]" :key="channel" class="switch-row">
                                    <text class="ch-label">开关{{ channel }}</text>
                                    <button class="control-btn on"
                                        :disabled="!!controlLoadingMap[`${item.cardKey}-ch-${channel}`]"
                                        @tap="handleLightSwitchControl(item, channel, 'on')">
                                        {{ !!controlLoadingMap[`${item.cardKey}-ch-${channel}`] ? '发送中...' : '开' }}
                                    </button>
                                    <button class="control-btn off"
                                        :disabled="!!controlLoadingMap[`${item.cardKey}-ch-${channel}`]"
                                        @tap="handleLightSwitchControl(item, channel, 'off')">
                                        {{ !!controlLoadingMap[`${item.cardKey}-ch-${channel}`] ? '发送中...' : '关' }}
                                    </button>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- <view class="metric-panel">
                        <text class="panel-title">实时指标</text>
                        <view class="metric-list">
                            <view v-for="metric in item.metrics" :key="metric.label" class="metric-item">
                                <text class="label">{{ metric.label }}</text>
                                <text class="value">{{ metric.value }}</text>
                            </view>
                            <view v-if="item.metrics.length === 0" class="metric-item muted">
                                <text class="label">状态</text>
                                <text class="value">等待数据</text>
                            </view>
                        </view>
                    </view> -->
                </view>

                <!-- <view class="sensor-footer">
                    <text>DevEUI：{{ item.devEui || '--' }}</text>
                    <text>{{ item.reportTime || '暂无上报' }}</text>
                </view> -->
            </view>

        </view>


    </view>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { controlLightSwitch, controlSocket, listMqttDevice, listMqttData, listMqttEvent } from '@/api/home'
import { closeWs, connectWs } from '../utils/ws'
import { onLoad } from "@dcloudio/uni-app";
import Navigation from './Navigation.vue';

const loading = ref(false)
const devices = ref([])
const title = ref('')
const latestDataMap = reactive({})
const controlLoadingMap = reactive({})
const ENV_CARD_TYPES = ['tempHum', 'toxicGas', 'hydrogenSulfide']

const deptId = ref('')
const projectName = ref('')
const warehouseName = ref('')
onLoad((options) => {
    deptId.value = options?.deptId
    projectName.value = options?.projectName
    warehouseName.value = options?.warehouseName
    title.value = options?.warehouseName
})
const sensorCards = computed(() => devices.value.flatMap((device) => expandDeviceCards(device)))
const onlineCount = computed(() => sensorCards.value.filter(i => i.isOnline).length)
const offlineCount = computed(() => Math.max(sensorCards.value.length - onlineCount.value, 0))
const latestReportTime = computed(() => {
    const times = sensorCards.value.map(i => i.reportTime).filter(Boolean)
    return times[0] || ''
})

function goBack() {
    uni.navigateBack()
}

function loadDevices() {
    if (!deptId.value) {
        devices.value = []
        return
    }
    loading.value = true
    listMqttDevice({
        pageNum: 1,
        pageSize: 100,
        deptId: deptId.value
    }).then(res => {
        devices.value = res.rows || []
        return loadLatestData()
    }).finally(() => {
        loading.value = false
    })
}

function loadLatestData() {
    const tasks = devices.value.map(device => {
        if (!device.id) return Promise.resolve()
        const reqs = [
            listMqttData({ pageNum: 1, pageSize: 1, deviceId: device.id }).then(res => {
                const row = (res.rows || [])[0]
                if (row) {
                    const key = getDeviceKey(device)
                    latestDataMap[key] = normalizePayload({ ...latestDataMap[key] || {}, ...row })
                }
            }).catch(() => { })
        ]
        if (isStateDevice(device)) {
            reqs.push(listMqttEvent({ pageNum: 1, pageSize: 1, deviceId: device.id }).then(res => {
                const row = (res.rows || [])[0]
                if (row) {
                    const key = getDeviceKey(device)
                    latestDataMap[key] = normalizePayload({ ...latestDataMap[key] || {}, ...row, ...deriveStateFromEvent(row) })
                }
            }).catch(() => { }))
        }
        return Promise.all(reqs)
    })
    return Promise.all(tasks)
}

function handleWsMessage(data) {
    if (!data || String(data.deptId || '') !== String(deptId.value || '')) return
    const runtimeStatus = data.deviceStatus != null ? String(data.deviceStatus) : null

    const index = devices.value.findIndex(device =>
        String(device.id || '') === String(data.deviceId || '') ||
        String(device.devEui || '').toLowerCase() === String(data.devEui || '').toLowerCase()
    )

    if (index > -1) {
        const device = devices.value[index]
        const key = getDeviceKey(device)
        const patched = patchRealtimeState(latestDataMap[key] || {}, data)
        latestDataMap[key] = normalizePayload({ ...latestDataMap[key] || {}, ...patched })
        devices.value[index] = { ...device, status: runtimeStatus ?? '0' }
        return
    }

    const key = getDeviceKey(data)
    const patched = patchRealtimeState(latestDataMap[key] || {}, data)
    latestDataMap[key] = normalizePayload({ ...latestDataMap[key] || {}, ...patched })
}

function patchRealtimeState(prev, next) {
    const res = { ...next }
    const s1 = next.switch_1 ?? next.switch1
    const s2 = next.switch_2 ?? next.switch2
    const s3 = next.switch_3 ?? next.switch3
    if (s1 != null) res.switch_1 = res.switch1 = s1
    if (s2 != null) res.switch_2 = res.switch2 = s2
    if (s3 != null) res.switch_3 = res.switch3 = s3

    const water = deriveWaterStatus({ ...prev, ...next })
    if (water != null) res.waterStatus = res.water_status = water
    const door = deriveDoorStatus({ ...prev, ...next })
    if (door != null) res.doorStatus = res.door_status = door
    const socket = deriveSocketStatus({ ...prev, ...next })
    if (socket != null) res.switchStatus = res.socket_status = res.socketStatus = socket
    return res
}
async function handleSocketControl(item, action) {
    console.log(action, controlLoadingMap, 'action111');
    console.log(item, 'item111');
    const deviceId = item.id || item.deviceId
    const devEui = item.devEui || item.devEUI || item.dev_eui
    if (!devEui) return uni.showToast({ title: '未找到设备', icon: 'none' })
    const k = item.cardKey || String(deviceId)
    console.log('devEui1', controlLoadingMap, k, controlLoadingMap[k]);
    if (controlLoadingMap[k]) return
    controlLoadingMap[k] = true
    try {
        const status = action === 'on' ? 1 : 0
        await controlSocket({ devEui, deviceId, status })
        syncSocketLocalState(item, status)
        uni.showToast({ title: '指令已发送', icon: 'success' })
    } finally {
        controlLoadingMap[k] = false
    }
}
async function handleSocketControl1(item, e) {
    const action = e ? 'on' : 'off'
    console.log(action, controlLoadingMap, 'action11133');
    console.log(item, 'item11133');
    const deviceId = item.id || item.deviceId
    const devEui = item.devEui || item.devEUI || item.dev_eui
    if (!devEui) return uni.showToast({ title: '未找到设备', icon: 'none' })
    const k = item.cardKey || String(deviceId)
    console.log('devEui', controlLoadingMap, k, controlLoadingMap[k]);
    if (controlLoadingMap[k]) return
    console.log('controlLoadingMap[k]', controlLoadingMap[k]);
    controlLoadingMap[k] = true
    try {
        const status = action === 'on' ? 1 : 0
        console.log(status, action, 'status===>');
        await controlSocket({ devEui, deviceId, status })
        syncSocketLocalState(item, status)
        uni.showToast({ title: '指令已发送', icon: 'success' })
    } finally {
        controlLoadingMap[k] = false
    }


}

async function handleLightSwitchControl(item, ch, action) {
    const devEui = item.devEui || item.devEUI || item.dev_eui
    if (!devEui) return uni.showToast({ title: '未找到设备', icon: 'none' })
    const k = `${item.cardKey}-ch-${ch}`
    if (controlLoadingMap[k]) return
    controlLoadingMap[k] = true
    try {
        const status = action === 'on' ? 1 : 0
        await controlLightSwitch({ devEui, channel: ch, status })
        syncLightSwitchLocalState(item, ch, status)
        uni.showToast({ title: '指令已发送', icon: 'success' })
    } finally {
        controlLoadingMap[k] = false
    }
}

function syncSocketLocalState(item, status) {
    const key = getDeviceKey(item)
    if (!key) return
    const now = new Date().toISOString()
    latestDataMap[key] = normalizePayload({
        ...latestDataMap[key] || {},
        socket_status: status, socketStatus: status, switchStatus: status,
        gatewayTime: now, createTime: now
    })
}

function syncLightSwitchLocalState(item, ch, status) {
    const key = getDeviceKey(item)
    if (!key) return
    const now = new Date().toISOString()
    latestDataMap[key] = normalizePayload({
        ...latestDataMap[key] || {},
        deviceId: item.deviceId || item.id,
        devEui: item.devEui || item.devEUI || item.dev_eui,
        deviceName: item.deviceName,
        [`switch_${ch}`]: status, [`switch${ch}`]: status,
        gatewayTime: now, createTime: now
    })
}

function expandDeviceCards(device) {
    const data = latestDataMap[getDeviceKey(device)] || {}
    const type = getSensorType(device, data)
    if (type === 'env') return ENV_CARD_TYPES.map(t => buildSensorCard(device, t))
    return [buildSensorCard(device)]
}

function buildSensorCard(device, displayType) {
    const data = latestDataMap[getDeviceKey(device)] || {}
    const type = displayType || getSensorType(device, data)
    const metrics = buildDisplayMetrics(data, type)
    const reportTime = formatTime(data.createTime || data.gatewayTime)
    const isOnline = String(device.status) === '0'
    return {
        ...device,
        cardKey: `${getDeviceKey(device) || 's'}-${type}`,
        type,
        icon: getDisplayIcon(type),
        typeName: getDisplayTypeName(type),
        locationName: getLocationName(device, data),
        summary: getDisplaySummary(data, type),
        metrics,
        reportTime,
        isOnline,
        onlineText: isOnline ? '在线' : '离线',
        statusClass: isOnline ? 'online' : 'offline'
    }
}

function isSocketControlType(type) {
    return type === 'socket' || type === 'acSocket'
}
function getSocketActionText(type, action, loading) {
    if (loading) return '发送中...'
    if (type === 'acSocket') return action === 'on' ? '开启空调' : '关闭空调'
    return action === 'on' ? '开启排风' : '关闭排风'
}
function getDisplayIcon(type) {
    return type === 'acSocket' ? '空' : getSensorIcon(type)
}
function getDisplayTypeName(type) {
    return type === 'acSocket' ? '智能空调插座' : getSensorTypeName(type)
}
function getDisplaySummary(data, type) {
    if (type === 'acSocket') return `空调状态：${translateSwitch(data.switchStatus)}`
    return getSensorSummary(data, type)
}
function buildDisplayMetrics(data, type) {
    const m = buildMetrics(data, type === 'acSocket' ? 'socket' : type)
    if (type === 'acSocket') {
        return m.map(i => i.label === '插座状态' ? { ...i, label: '空调状态' } : i)
    }
    return m
}

function getDeviceKey(d) {
    return d.deviceId || d.id || d.devEui || d.devEUI || d.dev_eui
}
function normalizePayload(row) {
    const json = parseJson(row.dataJson) || parseJson(row.payload) || {}
    const nested = parseJson(row.data) || {}
    const water = deriveWaterStatus({ ...json, ...nested, ...row })
    return {
        ...json, ...nested, ...row,
        devEui: row.devEui || row.devEUI || json.devEui,
        waterStatus: row.waterStatus ?? row.water_status ?? water,
        water_status: row.water_status ?? row.waterStatus ?? water,
        socket_status: row.socket_status ?? row.socketStatus,
        switchStatus: row.switchStatus ?? row.socket_status,
        switch_1: row.switch_1 ?? row.switch1, switch1: row.switch1 ?? row.switch_1,
        switch_2: row.switch_2 ?? row.switch2, switch2: row.switch2 ?? row.switch_2,
        switch_3: row.switch_3 ?? row.switch3, switch3: row.switch3 ?? row.switch_3,
        doorStatus: row.doorStatus ?? row.door_status
    }
}
function parseJson(v) {
    if (typeof v !== 'string') return null
    try { return JSON.parse(v) } catch { return null }
}
function deriveStateFromEvent(row) {
    const evt = (row.eventType || row.event || '').toLowerCase()
    const desc = (row.eventDesc || row.statusDesc || '').toLowerCase()
    const res = {}
    if (evt.includes('open') || desc.includes('打开')) res.doorStatus = 1
    if (evt.includes('close') || desc.includes('关闭')) res.doorStatus = 0
    if (evt.includes('on') || desc.includes('通电')) res.socket_status = res.switchStatus = 1
    if (evt.includes('off') || desc.includes('断电')) res.socket_status = res.switchStatus = 0
    const water = deriveWaterStatus(row)
    if (water != null) res.waterStatus = res.water_status = water
    return res
}
function deriveWaterStatus(data) {
    const evt = (data.eventType || data.status || '').toLowerCase()
    const desc = (data.eventDesc || data.statusDesc || '').toLowerCase()
    if (evt === 'alarm' || desc.includes('浸水') || desc.includes('水浸')) return 1
    if (evt === 'normal' || desc.includes('正常')) return 0
    return data.waterStatus ?? data.water_status
}
function deriveDoorStatus(data) {
    return data.doorStatus ?? data.door_status
}
function deriveSocketStatus(data) {
    return data.switchStatus ?? data.socket_status ?? data.socketStatus
}

function getSensorType(device, data) {
    const t = (device.deviceType || '').toLowerCase()
    const name = (device.deviceName || '').toLowerCase()
    if (t === 'smoke') return 'smoke'
    if (t === 'water') return 'water'
    if (t === 'door') return 'door'
    if (t === 'env') return 'env'
    if (t === 'switch') return 'switch'
    if (t === 'socket') return name.includes('空调') ? 'acSocket' : 'socket'
    if (name.includes('smoke')) return 'smoke'
    if (name.includes('water')) return 'water'
    if (name.includes('空调')) return 'acSocket'
    if (name.includes('socket')) return 'socket'
    if (name.includes('switch')) return 'switch'
    if (name.includes('door')) return 'door'
    if (name.includes('temp') || name.includes('hum')) return 'env'
    return 'sensor'
}

function isStateDevice(device) {
    const s = `${device.deviceType} ${device.deviceName}`.toLowerCase()
    return s.includes('door') || s.includes('socket') || s.includes('switch')
}

function getSensorIcon(type) {
    const map = { smoke: '烟', water: '水', socket: '电', switch: '灯', door: '门', env: '温', tempHum: '温', toxicGas: '氨', hydrogenSulfide: '硫' }
    return map[type] || '测'
}
function getSensorTypeName(type) {
    const map = { smoke: '烟雾传感器', water: '水浸传感器', socket: '智能排风', switch: '智慧照明', door: '门禁状态', env: '环境传感器', tempHum: '温湿度', toxicGas: '有毒气体', hydrogenSulfide: '硫化氢' }
    return map[type] || '传感器'
}
function getLocationName(device) {
    return device.deptName || warehouseName.value || '仓库'
}
function getSensorSummary(data, type) {
    if (!Object.keys(data).length) return '等待上报'
    if (type === 'water') return `水浸：${translateNormalAlarm(data.waterStatus)}`
    if (type === 'smoke') return `烟雾：${translateSmokeStatus(data.status)}`
    if (type === 'socket') return `插座：${translateSwitch(data.switchStatus)}`
    if (type === 'switch') {
        const arr = []
        if (data.switch_1 != null) arr.push(`1${translateSwitchShort(data.switch_1)}`)
        if (data.switch_2 != null) arr.push(`2${translateSwitchShort(data.switch_2)}`)
        if (data.switch_3 != null) arr.push(`3${translateSwitchShort(data.switch_3)}`)
        return arr.length ? `开关：${arr.join(' ')}` : '开关状态'
    }
    if (type === 'door') return `门禁：${translateSwitch(data.doorStatus)}`
    if (type === 'tempHum') return `${data.temperature || '--'}℃/${data.humidity || '--'}%`
    if (type === 'toxicGas') return `氨气：${data.nh3 || '--'}ppm`
    if (type === 'hydrogenSulfide') return `硫化氢：${data.h2s || '--'}ppm`
    if (type === 'env') return `${data.temperature || '--'}℃/${data.humidity || '--'}%`
    return '已上报'
}

function buildMetrics(data, type) {
    if (type === 'tempHum') return [{ label: '温度', value: data.temperature + '℃' }, { label: '湿度', value: data.humidity + '%' }, { label: '电量', value: data.battery + '%' }].filter(i => i.value)
    if (type === 'toxicGas') return [{ label: '氨气', value: data.nh3 + 'ppm' }, { label: '电量', value: data.battery + '%' }].filter(i => i.value)
    if (type === 'hydrogenSulfide') return [{ label: '硫化氢', value: data.h2s + 'ppm' }, { label: '电量', value: data.battery + '%' }].filter(i => i.value)
    const list = []
    if (data.temperature != null) list.push({ label: '温度', value: data.temperature + '℃' })
    if (data.humidity != null) list.push({ label: '湿度', value: data.humidity + '%' })
    if (data.nh3 != null) list.push({ label: '氨气', value: data.nh3 + 'ppm' })
    if (data.h2s != null) list.push({ label: '硫化氢', value: data.h2s + 'ppm' })
    if (data.battery != null) list.push({ label: '电量', value: data.battery + '%' })
    if (type === 'water' && data.waterStatus != null) list.unshift({ label: '水浸', value: translateNormalAlarm(data.waterStatus) })
    if (type === 'socket' && data.switchStatus != null) list.unshift({ label: '插座', value: translateSwitch(data.switchStatus) })
    if (type === 'door' && data.doorStatus != null) list.unshift({ label: '门禁', value: translateSwitch(data.doorStatus) })
    if (type === 'switch') {
        const sw = []
        if (data.switch_1 != null) sw.push({ label: '开关1', value: translateSwitchShort(data.switch_1) })
        if (data.switch_2 != null) sw.push({ label: '开关2', value: translateSwitchShort(data.switch_2) })
        if (data.switch_3 != null) sw.push({ label: '开关3', value: translateSwitchShort(data.switch_3) })
        return [...sw, ...list].slice(0, 6)
    }
    return list.slice(0, 6)
}

function translateNormalAlarm(v) {
    const s = String(v)
    return s === '0' ? '正常' : s === '1' ? '告警' : '未知'
}
function translateSmokeStatus(v) {
    const s = String(v).toLowerCase()
    return s === '0' || s === 'normal' ? '正常' : s === '1' || s === 'alarm' ? '告警' : '正常'
}
function translateSwitch(v) {
    const s = String(v).toLowerCase()
    return s === '0' || s === 'off' ? '关闭' : s === '1' || s === 'on' ? '开启' : '--'
}
function translateSwitchShort(v) {
    const s = String(v).toLowerCase()
    return s === '0' || s === 'off' ? '关' : s === '1' || s === 'on' ? '开' : '-'
}
function formatTime(t) {
    if (!t) return ''
    return t.replace('T', ' ').substring(5, 16)
}

onMounted(() => {
    loadDevices()
    connectWs(handleWsMessage)
})
onBeforeUnmount(() => {
    closeWs(handleWsMessage)
})
</script>

<style scoped lang="scss">
.warehouse-page {
    padding: 20rpx;
    background: #f5f7fa;
    min-height: 100vh;
}

.warehouse-hero {
    background: linear-gradient(135deg, #085f52, #0a7c70);
    color: #fff;
    padding: 30rpx;
    border-radius: 24rpx;
    margin-bottom: 20rpx;
    position: relative;

}

.warehouse-hero-box {
    display: flex;
    justify-content: space-between;
}

.back-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 100rpx;
    font-size: 24rpx;
    padding: 10rpx 20rpx;
    border: none;
    margin-bottom: 16rpx;
}

.hero-sub {
    font-size: 24rpx;
    opacity: 0.8;
}

.hero-title {
    font-size: 40rpx;
    font-weight: bold;
    margin: 8rpx 0;
}

.hero-desc {
    font-size: 24rpx;
    opacity: 0.8;
}

.meta-num {
    font-size: 40rpx;
    font-weight: bold;
    display: block;
}

.meta-label {
    font-size: 24rpx;
    opacity: 0.9;
}

.num {
    font-size: 36rpx;
    font-weight: bold;
    color: #111;
    margin-top: 8rpx;
    display: block;
}

.online .num {
    color: #07a186;
}

.offline .num {
    color: #999;
}

/* 父容器：网格布局 → 2个一行 */
.sensor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    /* 两个卡片之间的间距 */
    padding: 10rpx;
}


/* loading / 空状态 占满整行 */
.loading-view,
.empty-state {
    width: 100%;
    text-align: center;
    padding: 40rpx 0;
    font-size: 28rpx;
    color: #666;
}



.sensor-card {
    // background: #fff;
    // border-radius: 24rpx;
    // padding: 24rpx;
    // margin-bottom: 20rpx;
    // position: relative;
    // overflow: hidden;
    width: calc(50% - 10rpx);

    box-sizing: border-box;
    border-radius: 16rpx;
    background: #fff;
    overflow: hidden;
}

// .sensor-card::before {
//     content: '';
//     position: absolute;
//     left: 0;
//     top: 0;
//     bottom: 0;
//     width: 8rpx;
//     background: #08a089;
// }

.sensor-card.offline {
    opacity: 0.6;
    filter: grayscale(0.5);
}

.sensor-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sensor-main {
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
}

.sensor-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sensor-icon {
    width: 70rpx;
    height: 70rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    font-weight: bold;
    background: #e6f7f5;
    color: #088a77;
}

.sensor-state.offline {
    opacity: 0.6;
    color: grey;
    filter: grayscale(0.5);
}

.sensor-state.online {
    color: #088a77;
}

.sensor-state {
    font-size: 14px;
    // padding: 8rpx 16rpx;
    // background: #e6f7f5;
    // color: #088a77;
    // border-radius: 100rpx;
    // display: flex;
    // align-items: center;
}

.dot {
    width: 12rpx;
    height: 12rpx;
    background: #09a089;
    border-radius: 50%;
    margin-right: 8rpx;
}

.sensor-body {
    margin-top: 20rpx;

}

.location {
    font-size: 14px;
    color: #666;
}

.text {
    font-size: 14px;

}

.type-name {
    font-size: 16px;
    font-weight: 600;
    // margin: 8rpx 0;
}

.summary {
    font-size: 14px;
    background: #f0f0f0;
    padding: 8rpx 16rpx;
    border-radius: 100rpx;
    display: inline-block;
    margin-top: 8rpx;
}

.socket-actions {
    display: flex;
    justify-content: space-between;
    gap: 16rpx;
    margin-top: 20rpx;
}

.switch-actions {
    margin-top: 20rpx;
}

.switch-row {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 12rpx;
}

.ch-label {
    width: 80rpx;
    font-size: 12px;
}

.control-btn {
    padding: 12rpx 24rpx;
    border-radius: 100rpx;
    font-size: 12px;
    font-weight: bold;
    border: none;
}

.control-btn.on {
    background: #d1fae5;
    color: #065f46;
}

.control-btn.off {
    background: #ffedd5;
    color: #9a3412;
}

.metric-panel {
    background: #f9f9f9;
    border-radius: 20rpx;
    padding: 10rpx;
}

.panel-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 16rpx;
    display: block;
}

.metric-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.metric-item {
    flex: 1;
    min-width: 200rpx;
    background: #fff;
    padding: 16rpx;
    border-radius: 16rpx;
}

.label {
    font-size: 14px;
    color: #666;
    display: block;
}

.value {
    font-size: 14px;
    font-weight: bold;
    color: #088a77;
    margin-top: 4rpx;
}

.muted {
    background: #f1f1f1;
    color: #999;
}

.sensor-footer {
    margin-top: 20rpx;
    padding-top: 16rpx;
    border-top: 1rpx dashed #eee;
    font-size: 22rpx;
    color: #999;
    display: flex;
    justify-content: space-between;
}

.empty-state {
    text-align: center;
    padding: 60rpx;
    color: #999;
    font-size: 28rpx;
}


.summary-card {
    padding: 36rpx 40rpx;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    width: 30%;

    .label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: #334155;
        margin-bottom: 12rpx;
    }

    .value {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
    }
}

// 设备总数
.summary-card.total {
    background: #eef2ff;
    color: #6366f1;
}

// 在线设备
.summary-card.online {
    background: #ecfdf5;
    color: #059669;
}

// 离线设备
.summary-card.offline {
    background: #F5F5F5;
    color: #64748b;
}

// 最近上报
.summary-card.report {
    background: #f0f9ff;
    color: #0ea5e9;
}

.loading-view {
    text-align: center;
    padding: 40rpx;
    font-size: 28rpx;
    color: #666;
}

.hero-meta {
    // background-color: #F8FAFC;
    border-color: #CBD5E1;
    border-radius: 16rpx;
    margin-top: 16rpx;
    // padding: 24rpx;
}


.report {
    margin-top: 8rpx;
    font-size: 14px;
    color: #fff;
}
</style>