<template>
    <div class="page">
        <HeaderComponent title="硫酸钙流程2"></HeaderComponent>
        <div class="content_page">

            <PageDrawer type="HNZT" class="page_drawer" />
            <!-- 备注：由于在设备表中没有存储相关设备,取不到code,故暂时使用设备名称代替code。 -->
            <!-- 阀门 -->
            <div class="valves">
                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
                    :title="getEquipmentTitle(item.equipmentName)"
                    :valveStatusArr="getDataArrByCode(item.equipmentName)" :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.equipmentName)" :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" :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)"
                    :sensorValue="sensorHelper.getDataArrByCode(item.equipmentName)" :sensorWidth="item.width"
                    :sensorHeight="item.height" :sensorSize="item.size" :sensorRotate="item.rotate"
                    :title="getEquipmentTitle(item.equipmentName)" :style="getComponentStyle(item)" />
            </div>

            <!-- 单纯ICON设备 -->
            <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)"
                    :specialCondition="JSON.parse(item.specialCondition)" />
            </div>

            <!-- 其他组件 -->
            <div class="other_components">
                <component v-for="item in deviceConfigGroup.OTHERS" :key="item.id" :is="getComponentName(item.modelId)"
                    :iconSize="item.size" :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 class="tanks">
                <VTypeTankValves2 title="V7002" :waterLevelValue="30" :iconWidth="200" class="tank_V7002" />
                <VTypeTankValves2 title="V7004" :waterLevelValue="30" :iconWidth="300" class="tank_V7004" />
                <STypeTankValves title="S2002" :iconHeight="150" :fanStatus="true" class="tank_S2002" />
                <VTypeTankValves title="V2004" :waterLevelValue="30" :phValue="9" class="tank_V2004 zIndex15" />
                <VTypeTankValves title="V2007" :waterLevelValue="30" :phValue="9" :fanStatus="true"
                    class="tank_V2007" />
                <VTypeTankValves title="V2009" class="tank_V2009" />
                <STypeTankValves title="S2004" :iconHeight="150" :fanStatus="true" class="tank_S2004" />
                <VTypeTankValves2 title="V7003" :waterLevelValue="30" topPumpDir="R" class="tank_V7003" />
            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- 上一流程-P2005 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos1"></Pipe>

                <!-- P2007-ACV2026-HH2001管道混合器 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2_1"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2"></Pipe>

                <!-- HH2001管道混合器-ACV2032,ACV2033相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos3"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4 rotate_270"></Pipe>

                <!-- ACV2034-V2004落地罐拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5 rotate_90"></Pipe>

                <!-- 母液-ACV2054相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6 rotate_270"></Pipe>

                <!-- P2008-ACV2021相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7 zIndex10"></Pipe>

                <!-- ACV2040-P2010相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos8 rotate_270"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9 rotate_180"></Pipe>

                <!-- P2006- HH2001管道混合器 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10"></Pipe>

                <!-- ACV2036-V2004罐体拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos11 rotate_90 zIndex10"></Pipe>

                <!-- P2009-ACV2039相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos12 rotate_270 zIndex15"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos13 zIndex10"></Pipe>


            </div>

            <!-- 其他图标 -->
            <div class="icon_others">
                <div class="icon_other pipelineMixer_pos">
                    <div class="icon_title">管道混合器HH2001</div>
                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourpipelineMixer"></i>
                </div>
            </div>
            <!-- 外部组件 -->
            <div class="outer_components">
                <div class="outer_component component_pos1 rotate_90">
                    <ValveProgress :iconSize="valveIconSize" title="ACV2026" :rotateAngle="90" :pipeLength="873"
                        :pipeLeftOffset="-355" :valveStatusArr="initValveStatusArr" progressType="steam"
                        :pipeStatus="initPipeStatus" />
                </div>
                <div class="outer_component component_pos2 zIndex10">
                    <ValveProgress :iconSize="valveIconSize" title="ACV2043" :pipeLength="419" :pipeLeftOffset="-242"
                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
                </div>
            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <Arrow flexDir="column" arrowDir="left" arrowText="上一流程" class="arrow_pos1" linkUrl="/CaSO4_1"></Arrow>
                <Arrow flexDir="column" arrowDir="down" arrowText="下一流程" class="arrow_pos2" linkUrl="/CaSO4_3"></Arrow>
                <Arrow flexDir="column" arrowDir="up" arrowText="母液" class="arrow_pos3"></Arrow>
                <Arrow arrowDir="down" arrowText="淡水" class="arrow_pos4"></Arrow>
                <Arrow arrowDir="down" arrowText="碳酸钠固体吨袋" class="arrow_pos5"></Arrow>
                <Arrow flexDir="column" :iconFirst="false" fontSize="20" arrowText="主项1-MVR" class="arrow_pos6"></Arrow>

            </div>
        </div>
    </div>
</template>

<script setup>
import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
import VTypeTankValves2 from '@/components/HnyzDcs/VTypeTankValves2Component.vue';
import STypeTankValves from '@/components/HnyzDcs/STypeTankValvesComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
import { useValveHelper } from '@/hooks/useValveHelper'
import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
import { useComponentHelper } from '@/hooks/useComponentHelper'
import { stompClient } from '@/utils/ws/stompClient';
import { onMounted, onBeforeUnmount, reactive, computed } from 'vue';
import { updateZTPageConfig } from '@/api/dcs/configurePage';

const pageCode = 'CaSO4_2';//页面标识
const flowId = 11;//当前页面流程Id

// 获取设备布局 
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 = [
    {
        code: 'ACV2021',
        value: [true]
    },
    {
        code: 'ACV2024',
        value: [true]
    },
    {
        code: 'ACV2024',
        value: [true]
    },
    {
        code: 'ACV2025',
        value: [true]
    },
    {
        code: 'ACV2026',
        value: [true]
    },
    {
        code: 'ACV2005',
        value: [true]
    },
    {
        code: 'ACV2006',
        value: [true]
    },
    {
        code: 'ACV2007',
        value: [true]
    },
    {
        code: 'ACV2008',
        value: [true]
    },
    {
        code: 'ACV2009',
        value: [true]
    },
    {
        code: 'ACV2010',
        value: [true]
    },
    {
        code: 'ACV2011',
        value: [true]
    },
    {
        code: 'ACV2012',
        value: [true]
    },
    {
        code: 'ACV2013',
        value: [true]
    },
    {
        code: 'ACV2014',
        value: [true]
    },
    {
        code: 'ACV2015',
        value: [true]
    },
    {
        code: 'ACV2016',
        value: [true]
    },
    {
        code: 'ACV2017',
        value: [true]
    },
    {
        code: 'ACV2018',
        value: [true]
    },
    {
        code: 'ACV2019',
        value: [true]
    },
    {
        code: 'ACV2020',
        value: [true]
    },
    {
        code: 'ACV2021',
        value: [true]
    },
    {
        code: 'ACV2022',
        value: [true]
    },
    {
        code: 'ACV2023',
        value: [true]
    },
    {
        code: 'ACV2029',
        value: [true]
    },
    {
        code: 'ACV2030',
        value: [true]
    }
]
//传感器数据初始化
const sensorArr = [
    {
        code: 'V5001水位',
        value: [30]
    },
    {
        code: 'R2001温度',
        value: [30]
    },
    {
        code: 'R2002温度',
        value: [30]
    },
    {
        code: 'V2001水位',
        value: [30]
    },
    {
        code: 'V2002水位',
        value: [30]
    },
    {
        code: 'V2003水位',
        value: [30]
    },
    {
        code: 'V2001PH',
        value: [9]
    },
    {
        code: 'V2002PH',
        value: [6]
    },
    {
        code: 'PIT2001',
        value: [9, 20]
    },

]
//泵数据初始化
const pumpArr = [
    {
        code: 'P5001',
        value: [0, 3]
    },
    {
        code: 'P2001',
        value: [0, 3]
    },
    {
        code: 'P2002',
        value: [0, 3]
    },
    {
        code: 'P2003',
        value: [0, 3]
    },
    {
        code: 'P2004',
        value: [0, 3]
    },
    {
        code: 'R2001搅拌泵',
        value: [0, 3]
    },
    {
        code: 'R2002搅拌泵',
        value: [0, 3]
    },
    {
        code: 'V2001搅拌泵',
        value: [0, 3]
    },
    {
        code: 'V2002搅拌泵',
        value: [0, 3]
    },
]

//设备数据分组
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))

const initPipeStatus = true
const initValveStatusArr = [true]
</script>

<style lang="scss" scoped>
@import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
.page {
    width: 1920px;
    height: 1080px;
    background-color: #0b172c;

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

        .page_drawer{
            position: absolute;
            right: 5%;
        }
        //罐体
        .tanks {
            .tank_V7002 {
                position: absolute;
                top: 15%;
                left: 6%;
                transform: translate(-50%, -50%);
            }

            .tank_V7004 {
                position: absolute;
                top: 60%;
                left: 17%;
                transform: translate(-50%, -50%);
            }

            .tank_S2002 {
                position: absolute;
                top: 50%;
                left: 49%;
                transform: translate(-50%, -50%);
            }

            .tank_V2004 {
                position: absolute;
                top: 65%;
                left: 60%;
                transform: translate(-50%, -50%);
            }

            .tank_V2007 {
                position: absolute;
                top: 29.6%;
                left: 62%;
                transform: translate(-50%, -50%);
            }

            .tank_V2009 {
                position: absolute;
                top: 26.6%;
                left: 37%;
                transform: translate(-50%, -50%);
            }

            .tank_S2004 {
                position: absolute;
                top: 62%;
                left: 77.6%;
                transform: translate(-50%, -50%);
            }

            .tank_V7003 {
                position: absolute;
                top: 40.7%;
                left: 72%;
                transform: translate(-50%, -50%);
            }

        }

        //其他图标
        .icon_others {
            .icon_other {
                display: flex;
                align-items: center;
                z-index: 100;

                .iconfont-hnyz-colour {
                    font-size: 75px;
                }

                .icon_title {
                    font-size: 16px;
                    color: aliceblue;
                }
            }

            //管道混合器
            .pipelineMixer_pos {
                flex-direction: column;
                position: absolute;
                top: 48%;
                left: 32%;

                .iconfont-hnyz-colour {
                    font-size: 140px;
                }
            }

        }

        //外部组件
        .outer_components {
            .outer_component {
                width: 50px;
                height: 50px;
            }

            .component_pos1 {
                position: absolute;
                top: 33%;
                left: 23.5%;
            }

            .component_pos2 {
                position: absolute;
                top: 35.6%;
                left: 87.5%;
            }
        }

        //箭头指向
        .arrows {
            .arrow_pos1 {
                position: absolute;
                top: 49%;
                left: 4.3%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos2 {
                position: absolute;
                top: 87%;
                left: 48.88%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos3 {
                position: absolute;
                top: 78.5%;
                left: 52.8%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos4 {
                position: absolute;
                top: 5.5%;
                left: 65.5%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos5 {
                position: absolute;
                top: 11.5%;
                left: 42.5%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos6 {
                position: absolute;
                top: 37.5%;
                left: 94.5%;
                transform: translate(-50%, -50%);
            }
        }

        //外部管道排布
        .outer_progress {
            .progress_pos1 {
                position: absolute;
                top: 46.7%;
                left: 6.3%;
                width: 3.2%;
            }

            .progress_pos2_1 {
                position: absolute;
                top: 12.7%;
                left: 15.2%;
                width: 8%;
            }

            .progress_pos2 {
                position: absolute;
                top: 55.7%;
                left: 22.85%;
                width: 9.7%;
            }

            .progress_pos3 {
                position: absolute;
                top: 56.9%;
                left: 38%;
                width: 5.2%;
            }


            .progress_pos4 {
                position: absolute;
                top: 52.7%;
                left: 41.7%;
                width: 5%;
            }

            .progress_pos5 {
                position: absolute;
                top: 53%;
                left: 58%;
                width: 5.2%;
            }

            .progress_pos6 {
                position: absolute;
                top: 66.6%;
                left: 52.8%;
                width: 7%;
            }

            .progress_pos7 {
                position: absolute;
                top: 24.5%;
                left: 45.2%;
                width: 11.1%;
            }

            .progress_pos8 {
                position: absolute;
                top: 44.1%;
                left: 86.7%;
                width: 17.2%;
            }

            .progress_pos9 {
                position: absolute;
                top: 27.5%;
                left: 79.6%;
                width: 7.3%;
            }

            .progress_pos10 {
                position: absolute;
                top: 57.9%;
                left: 28%;
                width: 5.5%;
            }

            .progress_pos11 {
                position: absolute;
                top: 51.6%;
                left: 61.94%;
                width: 7%;
            }

            .progress_pos12 {
                position: absolute;
                top: 63.3%;
                left: 68.36%;
                width: 3.3%;
            }

            .progress_pos13 {
                position: absolute;
                top: 59.86%;
                left: 68.15%;
                width: 3.1%;
            }

        }

    }
}
</style>