<template>
    <div class="page">
        <HeaderComponent :title="title"></HeaderComponent>
        <div class="content_page">
            <PageDrawer :pages="pageItems_Na2SO4" 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.title)" :iconSize="item.size" :iconWidth="item.width"
                    :iconHeight="item.height" :style="getComponentStyle(item)" />
            </div>

            <!-- 传感器 -->
            <div class="sensors">
                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
                    :title="getEquipmentTitle(item.equipmentName)" :sensorSize="item.size"
                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
                    :sensorHeight="item.height" :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, true)" :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 PageDrawer from '@/components/GeneralComponents/PageDrawerComponent.vue';
import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
import { useValveHelper } from '@/hooks/useValveHelper'
import { stompClient } from '@/utils/ws/stompClient';
import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
import { useComponentHelper } from '@/hooks/useComponentHelper'
import { updateZTPageConfig } from '@/api/dcs/configurePage';
import { pageItems_Na2SO4 } from "@/config"
import { useRoute } from 'vue-router'
const route = useRoute()
const pageCode = route.name
const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
// 获取设备布局 & 数据订阅
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);
});

//阀门数据初始化
const valveArr = [
]
//传感器数据初始化
const sensorArr = [
]
//泵数据初始化
const pumpArr = [
]

//设备数据分组
const deviceDataGroup = reactive({
    VALVES: valveArr,
    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 } = useValveHelper(computed(() => deviceDataGroup.VALVES))
const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))
const {
    evaluateCondition, getPipeType
} = useValveHelper(computed(() => [...deviceDataGroup.VALVES, ...deviceDataGroup.PUMPS]))


</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;
            right: 2%;
            top: -1%;
        }
    }
}
</style>