<template>
    <div class="page">
        <HeaderComponent title="换热流程"></HeaderComponent>
        <div class="content_page">
            <PageDrawer type="SHZT" class="page_drawer" />
            <!-- 阀门 -->
            <div class="valves">
                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
            </div>

            <!-- 泵 -->
            <div class="pumps">
                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
                    :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
                    :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
            </div>

            <!-- 罐体 -->
            <div class="tanks">
                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
                    :title="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
                    :style="getComponentStyle(item)" />
            </div>

            <!-- 传感器 -->
            <div class="sensors">
                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
                    :sensorHeight="item.height" :sensorSize="item.size" :style="getComponentStyle(item)" />
            </div>

            <!-- 其他设备 -->
            <div class="icon_others">
                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
                    :title="getEquipmentTitle(item.equipmentName)" />
            </div>

            <!-- 管道  -->
            <div class="pipelines">
                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
                    :pipeStatus="evaluateCondition(item.flowCondition)" :strokeWidth="item.pipeWidth"
                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { useValveHelper } from '@/hooks/useValveHelper'
import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
import { stompClient } from '@/utils/ws/stompClient';
import { updateZTPageConfig } from '@/api/dcs/configurePage';
import { useRoute } from 'vue-router'
import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
import { useComponentHelper } from '@/hooks/useComponentHelper'
const route = useRoute()
const pageCode = route.name

// 获取设备布局 & 数据订阅
const {
    pipeConfig,//管道配置信息
    deviceConfigGroup,//设备配置分组
    modelMap,//设备模型映射
    pageParams,//页面参数
    fetchPageConfig,//获取页面配置
} = useEquipmentLayout(pageCode)

// 组件渲染辅助方法
const {
    getComponentName,
    getComponentStyle,
    getIconClass,
    getEquipmentTitle,
    getPipelineClass,
    getPipelineStyle,
} = useComponentHelper(modelMap)


onMounted(async () => {
    await fetchPageConfig(pageCode).then(res => {
        updatePageConfig()
    })
})

onBeforeUnmount(() => {
    // 页面销毁时取消订阅
    stompClient.unsubscribeFromPage(pageCode);
});

//M1罐阀门状态
const valveArr_M1 = [
    {
        code: 'N1',
        value: [true],
    },
    {
        code: 'N2',
        value: [true],
    },
    {
        code: 'N3',
        value: [true],
    },
    {
        code: 'N4',
        value: [true],
    },
    {
        code: 'N5',
        value: [true],
    },
    {
        code: 'N6',
        value: [true],
    },
    {
        code: 'N7',
        value: [true],
    },
    {
        code: 'N8',
        value: [false],
    },
    {
        code: 'N9',
        value: [true],
    },
    {
        code: 'N10',
        value: [true],
    },
    {
        code: 'N11',
        value: [true],
    },
]

const valveArr_M2 = [
    {
        code: 'N12',
        value: [true],
    },
    {
        code: 'N14',
        value: [false],
    },
    {
        code: 'N15',
        value: [true],
    },
    {
        code: 'N16',
        value: [true],
    },
    {
        code: 'N17',
        value: [true],
    },
    {
        code: 'N20',
        value: [true],
    },
    {
        code: 'N18',
        value: [false],
    },
]

//J1罐阀门状态
const valveArr_J1 = [
    {
        code: 'D1',
        value: [true, false, true],
    },
    {
        code: 'D2',
        value: [true, false, true],
    },
]

const valveArr_J2 = [
    {
        code: 'D3',
        value: [true, false, true],
    },
    {
        code: 'D4',
        value: [true, false, true],
    },
]

//Z1罐阀门状态
const valveArr_Z1 = [
    {
        code: 'N21',
        value: [true],
    },
]

//传感器状态
const sensorArr = [
    {
        code: 'M1yl',
        value: [0.5],
    },
    {
        code: 'M1cz',
        value: [100],
    },
    {
        code: 'M1wd',
        value: [30],
    },
    {
        code: 'M2yl',
        value: [0.5],
    },
    {
        code: 'M2cz',
        value: [100],
    },
    {
        code: 'M2wd',
        value: [30],
    },
]
const pumpArr = [
    {
        code: 'LB3',
        value: [0, 3],
    },
    {
        code: 'LB4',
        value: [0, 3],
    },
    {
        code: 'LB7',
        value: [0, 3],
    },
]

//所有阀门状态
const valveArr = computed(() =>
    [...new Set([
        ...valveArr_M2,
        ...valveArr_M1,
        ...valveArr_J1,
        ...valveArr_J2,
        ...valveArr_Z1,
    ])]
);

//设备数据分组
const deviceDataGroup = reactive({
    VALVES: valveArr.value,
    PUMPS: pumpArr,
    SENSORS: sensorArr,
})

//更新页面配置
function updatePageConfig() {
    updateZTPageConfig(pageCode, pageParams.value)
        .then(res => {
            stompClient.subscribeToPage(pageCode, (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 { getDataArrByCode, evaluateCondition, getPipeType } = useValveHelper(computed(() => deviceDataGroup.VALVES))
const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))

//模拟N12阀门变化
// function simulateN21Valve() {
//     console.log('模拟N12阀门变化')
//     setInterval(() => {
//         deviceDataGroup.VALVES[0].value[0] = !deviceDataGroup.VALVES[0].value[0];
//     }, 5000)
// }
</script>

<style lang="scss" scoped>
.page {
    // width: 100%;
    // height: 100%;
    width: 1920px;
    height: 1080px;
    background-color: #0b172c;

    .content_page {
        position: relative;
        width: 100%;
        height: 1000px;

        .page_drawer {
            position: absolute;
            left: 2%;
            top: -1%;
        }
    }
}
</style>