<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="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>
    </div>
</template>

<script setup>
import { useValveHelper } from '@/hooks/useValveHelper'
import { computed, onMounted, onBeforeUnmount } 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: 'N3',
        value: [true],
    },
    {
        code: 'N4',
        value: [true],
    },
    {
        code: 'N5',
        value: [true],
    },
    {
        code: 'N6',
        value: [true],
    },
    {
        code: 'N7',
        value: [true],
    },
    {
        code: 'N8',
        value: [true],
    },
    {
        code: 'N11',
        value: [true],
    },
]

const valveArr_M2 = [
    {
        code: 'N14',
        value: [false],
    },
    {
        code: 'N16',
        value: [true],
    },
    {
        code: 'N17',
        value: [true],
    },
    {
        code: 'N20',
        value: [true],
    },
    {
        code: 'N18',
        value: [false],
    },
]
//传感器状态
const sensorArr = [
    {
        code: 'M1yl',
        value: [0.5],
    },
    {
        code: 'M2yl',
        value: [0.5],
    },
]

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

//设备数据分组
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.SENSORS = Object.values(data.SENSORS)
            });
        })
        .catch(err => {
            console.log('页面配置失败：', err);
        });
}
const { getDataArrByCode, evaluateCondition, getPipeType } = useValveHelper(computed(() => deviceDataGroup.VALVES))
const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))

</script>

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

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

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