<template>
    <div class="page">
        <HeaderComponent title="排堵流程"></HeaderComponent>
        <div class="content_page">
            <M1Tank title="M1" :valveArr="valveMap.M1" :waterLevelValue="30"
                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]"
                :iconSize="getTankSize('M1')"  :style="getTankStyle('M1')"></M1Tank>
            <M1Tank title="M2" :valveArr="valveMap.M2" :waterLevelValue="30"
                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" 
                :iconSize="getTankSize('M2')"  :style="getTankStyle('M2')"></M1Tank>
            <div class="icon_others">
                <div class="other1">
                    <div class="other_title"> 储气罐</div>
                    <i class="icon iconfont-colour icon-chuqiguan icon_cqg"></i>
                </div>
                <div class="other2">
                    <div class="other_title"> 喷淋塔</div>
                    <i class="icon iconfont-colour icon-penlinta"></i>
                </div>
            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- 储气罐相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N8') && getValveOrStatus('N6', 'N7')"
                    :striped-flow="getValveAndStatus('N8') && getValveOrStatus('N6', 'N7')" :duration="20"
                    class="progress_compressed_air progress_1 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N4')" :striped-flow="getValveAndStatus('N4')" :duration="20"
                    class="progress_compressed_air progress_2 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N18_status" :striped-flow="N18_status" :duration="20"
                    class="progress_compressed_air progress_3 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N14')" :striped-flow="getValveAndStatus('N14')" :duration="20"
                    class="progress_compressed_air progress_4 rotate_90" />

                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N4', 'N14') || N18_status || N8_status"
                    :striped-flow="getValveOrStatus('N4', 'N14') || N18_status || N8_status" :duration="30"
                    class="progress_compressed_air progress_5" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N4', 'N14') || N18_status"
                    :striped-flow="getValveOrStatus('N4', 'N14') || N18_status" :duration="30"
                    class="progress_compressed_air progress_5_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N14') || N18_status"
                    :striped-flow="getValveAndStatus('N14') || N18_status" :duration="30"
                    class="progress_compressed_air progress_5_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N14')" :striped-flow="getValveAndStatus('N14')" :duration="30"
                    class="progress_compressed_air progress_5_3" />

                <!-- 喷淋塔相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N11')" :striped-flow="getValveAndStatus('N11')" :duration="50"
                    class="progress_stench progress_6_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N11', 'N20')" :striped-flow="getValveOrStatus('N11', 'N20')"
                    :duration="20" class="progress_stench progress_6_2" />
            </div>
        </div>
    </div>
</template>

<script setup>
import M1Tank from '@/components/DCS/M1TankComponent.vue';
import { useValveHelper } from '@/hooks/useValveHelper'
import { computed, onMounted, onBeforeUnmount } from 'vue';
import { stompClient } from '@/utils/ws/stompClient';
import { updateZTPageConfig } from '@/api/dcs/configurePage';
import { useLayout } from '@/utils/dcs/useLayout'

const pageCode = 'blockOut';
const pageParams = {
    "M1": ['N4', 'N6', 'N7', 'N8', 'N11'],
    "M2": ['N14', 'N16', 'N17', 'N18', 'N20'],
    "SENSORS": ['M1yl', 'M1cz', 'M1wd', 'M2yl', 'M2cz', 'M2wd'],
}
//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 valveMap = reactive({
    M1: valveArr_M1,
    M2: valveArr_M2,
    SENSORS: sensorArr,
})
onMounted(() => {
    // 获取页面参数
    fetchLayoutParams();
    // 更新页面配置
    updatePageConfig();
});

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

const flowId = 8 // 当前页面对应的流程 ID
const { layoutMap, fetchLayoutParams, getTankStyle ,getTankSize} = useLayout(flowId)

//更新页面配置
function updatePageConfig() {
    updateZTPageConfig(pageCode, pageParams)
        .then(res => {
            // console.log('页面配置成功：', res);
            stompClient.subscribeToPage(pageCode, (data) => {
                valveMap.M1 = Object.values(data?.M1 || {});
                valveMap.M2 = Object.values(data?.M2 || {});
                valveMap.SENSORS = Object.values(data?.SENSORS || {});
                // console.log('页面数据更新：', data?.SENSORS);
            });
        })
        .catch(err => {
            console.log('页面配置失败：', err);
        });
}

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

const { getValveAndStatus, getValveOrStatus } = useValveHelper(valveArr)
const sensorHelper = useValveHelper(computed(() => valveMap.SENSORS))

//n18处管道流通状态
const N18_status = computed(() => {
    return getValveAndStatus('N18') && getValveOrStatus('N16', 'N17')
})
//n8处管道流通状态
const N8_status = computed(() => {
    return getValveAndStatus('N8') && getValveOrStatus('N6', 'N7')
})

//进度条配置
const progressConfig = {
    strokeWidth: 8,//进度条宽度
    percentage: 100,//进度条百分比
    duration: 10,//进度条流速
    showText: false,//是否显示文字
}
</script>

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

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

        .hr_m1Tank {
            position: absolute;
            top: 35%;
            left: 19%;
            transform: translate(-50%, -50%);
        }

        .hr_m2Tank {
            position: absolute;
            top: 35%;
            left: 59%;
            transform: translate(-50%, -50%);
        }

        //其他图标
        .icon_others {
            i {
                font-size: 150px;
            }

            .other_title {
                text-align: center;
                color: aliceblue;
            }

            //储气罐
            .other1 {
                position: absolute;
                left: -7.7%;

                .icon_cqg {
                    font-size: 200px;
                }
            }

            //喷淋塔
            .other2 {
                position: absolute;
                right: 0%;
            }

            .other1,
            .other2 {
                z-index: 10;
            }
        }

        .outer_progress {

            //储气罐相关
            .progress_1 {
                position: absolute;
                top: 28.8%;
                left: 13.3%;
                width: 13%;
            }

            .progress_2 {
                position: absolute;
                top: 28.5%;
                left: 40.6%;
                width: 12.6%;
            }

            .progress_3 {
                position: absolute;
                top: 28.7%;
                left: 53.3%;
                width: 13%;
            }

            .progress_4 {
                position: absolute;
                top: 28.3%;
                left: 80.6%;
                width: 12.77%;
            }

            .progress_5 {
                position: absolute;
                top: 16%;
                left: 3.3%;
                width: 10.2%;
            }

            .progress_5_1 {
                position: absolute;
                top: 16%;
                left: 13%;
                width: 27.8%;
            }

            .progress_5_2 {
                position: absolute;
                top: 16%;
                left: 40.8%;
                width: 12.7%;
            }

            .progress_5_3 {
                position: absolute;
                top: 16%;
                left: 53.1%;
                width: 27.6%;
            }

            //喷淋塔相关
            .progress_6_1 {
                position: absolute;
                top: 6%;
                left: 33%;
                width: 40.3%;
            }

            .progress_6_2 {
                position: absolute;
                top: 6%;
                left: 73%;
                width: 21.3%;
            }
        }
    }
}
</style>