<!-- src/views/control/MGMControlPage.vue -->
<template>
    <div class="dcs">
        <!-- 顶部返回标题 -->
        <HeaderComponent title="MGM控制页面" backTo="/controlPage/flowSelect" />

        <!-- 顶部导航栏 -->
        <PageNav :items="navItems_Na2SO4" :currentCode="flowCode" />

        <!-- 控制组件区域 -->
        <div v-if="deviceConfigGroup.SENSORS" class="block">
            <h2 class="block-title">传感器</h2>
            <div class="group-row">
                <SensorControl v-for="item in deviceConfigGroup.SENSORS" :key="item.code"
                    :sensorArr="sensorHelper.getDataArrByCode(item.code)" :title="item.equipmentName"
                    :code="item.code" />
            </div>
        </div>

        <div v-if="deviceConfigGroup.PUMPS" class="block">
            <h2 class="block-title">泵</h2>
            <div class="group-row">
                <PumpControlComponent v-for="item in deviceConfigGroup.PUMPS" :key="item.code"
                    :title="item.equipmentName" :pumpArr="pumpHelper.getDataArrByCode(item.code)" :code="item.code" />
            </div>
        </div>

        <div v-if="deviceConfigGroup.VALVES" class="block">
            <h2 class="block-title">阀门</h2>
            <div class="group-row">
                <ValveControlComponent v-for="item in deviceConfigGroup.VALVES" :key="item.code"
                    :title="item.equipmentName" :valveArr="valveHelper.getDataArrByCode(item.code)" :code="item.code" />
            </div>
        </div>
    </div>
</template>

<script setup>
import PageNav from '@/components/GeneralComponents/control/PageNavComponent.vue';
import SensorControl from '@/components/GeneralComponents/control/SensorControlComponent.vue';
import PumpControlComponent from '@/components/GeneralComponents/control/PumpControlComponent.vue';
import ValveControlComponent from '@/components/GeneralComponents/control/ValveControlComponent.vue';
import HeaderComponent from '@/components/DCS/HeaderComponent.vue';
import { useValveHelper } from '@/hooks/useValveHelper'
import { computed, onMounted, onBeforeUnmount, reactive, ref } from 'vue';
import { stompClient } from '@/utils/ws/stompClient';
import { updateZTPageConfig } from '@/api/dcs/configurePage';
import { getEquipmentGroup } from '@/api/hnyz/equipment'
import { useEquipmentLayout } from '@/hooks/useEquipmentLayout';
import { navItems_Na2SO4 } from '@/config';
const flowCode = 'MGM_Control'
const { generatePageParams } = useEquipmentLayout()
const deviceConfigGroup = ref({})
const pageParams = ref({})

const valveArr = []
const pumpArr = []
const sensorArr = []

const deviceDataGroup = reactive({
    VALVES: valveArr,
    PUMPS: pumpArr,
    SENSORS: sensorArr,
})

onMounted(() => {
    getEquipmentGroup(flowCode).then(res => {
        deviceConfigGroup.value = res.data
        pageParams.value = generatePageParams(res.data)
        updatePageConfig()
    })
})

onBeforeUnmount(() => {
    stompClient.unsubscribeFromPage(flowCode)
})

function updatePageConfig() {
    updateZTPageConfig(flowCode, pageParams.value)
        .then(() => {
            stompClient.subscribeToPage(flowCode, (data) => {
                // console.log('收到页面数据：', data)
                deviceDataGroup.VALVES = Object.values(data.VALVES || {})
                deviceDataGroup.PUMPS = Object.values(data.PUMPS || {})
                deviceDataGroup.SENSORS = Object.values(data.SENSORS || {})
            })
        })
        .catch(err => {
            console.log('页面配置失败：', err)
        });
}

const pumpHelper = useValveHelper(computed(() => deviceDataGroup.PUMPS))
const valveHelper = useValveHelper(computed(() => deviceDataGroup.VALVES))
const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))
</script>

<style scoped lang="scss">
.dcs {
    width: 100%;
    min-height: 100vh;
    padding: 24px 32px;
    background-color: #141414;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block {
    margin-bottom: 32px;
    background: #1a1a1a;
    padding: 16px;
    border: 1px solid #333;
    border-radius: 12px;
    max-width: 1200px;
    width: 100%;
    animation: fadeInUp 0.4s ease;
}

.block-title {
    font-size: 20px;
    color: #fff;
    margin-bottom: 12px;
}

.group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: flex-start;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
