<template>
    <div class="page">
        <HeaderComponent title="M2出料"></HeaderComponent>
        <div class="content_page">
            <M1Tank title="M2" :valveArr="valveMap.M2" :waterLevelValue="30" 
                :pressureValue="sensorHelper.getDataArrByCode('M2yl')[0]" :iconSize="getTankSize('M2')"
                :style="getTankStyle('M2')"></M1Tank>
            <S1Tank title="S1" :fanStatus="fanStatus" :valveArr="valveMap.S1" :iconSize="getTankSize('S1',300)"
                :pressureValue="sensorHelper.getDataArrByCode('S1yl')[0]" :waterLevelValue="30"
                :temperatureValue="sensorHelper.getDataArrByCode('S1wd')[0]" :style="getTankStyle('S1')">
            </S1Tank>
            <S1Tank title="S2" :fanStatus="fanStatus" :valveArr="valveMap.S2" :iconSize="getTankSize('S2',300)" 
                :pressureValue="sensorHelper.getDataArrByCode('S2yl')[0]" :waterLevelValue="30"
                :temperatureValue="sensorHelper.getDataArrByCode('S2wd')[0]" :style="getTankStyle('S2')">
            </S1Tank>
            <S1Tank title="S3" :fanStatus="fanStatus" :valveArr="valveArr_S3"
                :waterLevelValue="30" :iconSize="getTankSize('S3',300)"  class="m2Flow_s3Tank">
            </S1Tank>
            <WaterTank title="P1" :tankType="3" class="m2Flow_p1Tank" :iconSize="300"></WaterTank>

            <div class="pumps">
                <!-- lb6 -->
                <div :style="getTankStyle('LB6')">
                    <Pump title="出料泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB6')" :iconSize="getTankSize('LB6',100)"></Pump>
                </div>
            </div>
            <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 class="other3">
                    <div class="other_title"> 蒸汽发生器</div>
                    <i class="icon iconfont-colour icon-zhengqifashengqi"></i>
                </div>
            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- m2进料 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12', 'N22')" :striped-flow="getValveAndStatus('N12', 'N22')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos1_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23')"
                    :striped-flow="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos1_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :striped-flow="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos1_3" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :striped-flow="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos2 rotate_270" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :striped-flow="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos2_2" />

                <!-- 喷淋塔相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D16')" :striped-flow="getValveOrStatus('D16')" :duration="20"
                    class="progress_stench progress_pos7_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D16', 'D17')" :striped-flow="getValveOrStatus('D16', 'D17')"
                    :duration="50" class="progress_stench progress_pos7_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D16', 'D17', 'N20')"
                    :striped-flow="getValveOrStatus('D16', 'D17', 'N20')" :duration="40"
                    class="progress_stench progress_pos7_3" />

                <!-- 蒸汽发生器相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D11')" :striped-flow="getValveOrStatus('D11')" :duration="20"
                    class="progress_steam progress_pos8_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D11', 'D12')" :striped-flow="getValveOrStatus('D11', 'D12')"
                    :duration="20" class="progress_steam progress_pos8_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D11', 'D12', 'D13')"
                    :striped-flow="getValveOrStatus('D11', 'D12', 'D13')" :duration="50"
                    class="progress_steam progress_pos8_3" />

                <!-- 储气罐相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D8')" :striped-flow="getValveAndStatus('D8')" :duration="20"
                    class="progress_compressed_air progress_pos9 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D9')" :striped-flow="getValveAndStatus('D9')" :duration="20"
                    class="progress_compressed_air progress_pos10 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D10')" :striped-flow="getValveAndStatus('D10')" :duration="20"
                    class="progress_compressed_air progress_pos11 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="pumpStatus_N18" :striped-flow="pumpStatus_N18" :duration="20"
                    class="progress_compressed_air progress_pos12 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_pos13 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D9', 'D10', 'N14') || pumpStatus_N18"
                    :striped-flow="getValveOrStatus('D9', 'D10', 'N14') || pumpStatus_N18" :duration="20"
                    class="progress_compressed_air progress_pos14_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D10', 'N14') || pumpStatus_N18"
                    :striped-flow="getValveOrStatus('D10', 'N14') || pumpStatus_N18" :duration="20"
                    class="progress_compressed_air progress_pos14_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N14') || pumpStatus_N18"
                    :striped-flow="getValveOrStatus('N14') || pumpStatus_N18" :duration="20"
                    class="progress_compressed_air progress_pos14_3" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N14')" :striped-flow="getValveOrStatus('N14')" :duration="20"
                    class="progress_compressed_air progress_pos14_4" />

                <!-- 通向m1流程页面的管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D6', 'D7') && getValveAndStatus('N10')"
                    :striped-flow="getValveOrStatus('D6', 'D7') && getValveAndStatus('N10')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos15_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D7') && getValveAndStatus('N10')"
                    :striped-flow="getValveAndStatus('D7') && getValveAndStatus('N10')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos15_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D5', 'D6', 'D7') && getValveAndStatus('N10')"
                    :striped-flow="getValveOrStatus('D5', 'D6', 'D7') && getValveAndStatus('N10')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos16 rotate_90" />

                <!-- 通向换热流程的管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D16', 'D17') && getValveAndStatus('N15')"
                    :striped-flow="getValveOrStatus('D16', 'D17') && getValveAndStatus('N15')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos17 rotate_270" />
                <!-- 通向p1的管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N13')" :striped-flow="getValveOrStatus('N13')" :duration="19.2"
                    class="progress_red progress_pos18 rotate_180" />
            </div>
            <!-- 大箭头指向 -->
            <div class="arrows">
                <div class="arrow_pos1">
                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/m1sj')"> </i>
                    <div class="arrow_text">M1流程</div>
                </div>

                <div class="arrow_pos2">
                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/hr')"> </i>
                    <div class="arrow_text">换热流程</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import M1Tank from '@/components/DCS/M1TankComponent.vue';
import S1Tank from '@/components/DCS/S1TankComponent.vue';
import WaterTank from '@/components/DCS/WaterTankComponent.vue';
import Pump from '@/components/DCS/PumpComponent.vue';
import { useValveHelper } from '@/hooks/useValveHelper'
import { useRouter } from 'vue-router'
import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
import { stompClient } from '@/utils/ws/stompClient';
import { updateZTPageConfig } from '@/api/dcs/configurePage';
import { useLayout } from '@/utils/dcs/useLayout'

const router = useRouter()

const pageCode = 'm2OutMaterial';
const pageParams = {
    "M2": ['N12', 'N13', 'N14', 'N15', 'N16', 'N17', 'N18', 'N20'],
    "S1": ['N10', 'D5', 'D11', 'N22', 'D16', 'D8'],
    "S2": ['D6', 'D9', 'D17', 'D12', 'N23', 'N10'],
    "S3": ['D7', 'D10', 'D13', 'N24', 'N10'],
    "PUMP": ['LB6'],
    "SENSORS": ['M2yl', 'M2cz', 'M2wd', 'S1yl', 'S1cz', 'S1wd', 'S2yl', 'S2cz', 'S2wd', 'S3yl', 'S3cz', 'S3wd'],
}

//M1罐阀门状态
const valveArr_M2 = [
    {
        code: 'N12',
        value: [true],
    },
    {
        code: 'N14',
        value: [false],
    },
    {
        code: 'N15',
        value: [false],
    },
    {
        code: 'N16',
        value: [true],
    },
    {
        code: 'N17',
        value: [true],
    },
    {
        code: 'N20',
        value: [true],
    },
    {
        code: 'N13',
        value: [true],
    },
    {
        code: 'N18',
        value: [true],
    },
    // {
    //     code: 'N19',
    //     value: [true],
    // },
]
//S1罐阀门状态
const valveArr_S1 = [
    {
        code: 'N10',
        value: [true],
    },
    {
        code: 'D5',
        value: [true, false, false],
    },
    {
        code: 'D11',
        value: [true, false, false],
    },
    {
        code: 'N22',
        value: [true]
    },
    {
        code: 'D16',
        value: [true, false, true],
    },
    {
        code: 'D8',
        value: [true, false, false],
    },

]
//S2罐阀门状态
const valveArr_S2 = [
    {
        code: 'N10',
        value: [true],
    },
    {
        code: 'D6',
        value: [true, false, false],
    },
    {
        code: 'D9',
        value: [true, false, false],
    },
    {
        code: 'D17',
        value: [true, false, false],
    },
    {
        code: 'D12',
        value: [true, false, false],
    },
    {
        code: 'N23',
        value: [true],
    },

]
//S3罐阀门状态
const valveArr_S3 = [
    {
        code: 'N10',
        value: [true],
    },
    {
        code: 'D7',
        value: [false, true, false],
    },
    {
        code: 'D10',
        value: [false, true, false],
    },
    {
        code: 'D13',
        value: [false, true, false],
    },
    {
        code: 'N24',
        value: [false],
    },

]
//传感器状态
const sensorArr = [
    {
        code: 'M2cz',
        value: [100],
    },
    {
        code: 'M2wd',
        value: [30],
    },
    {
        code: 'M2yl',
        value: [0.4],
    },
    {
        code: 'S1yl',
        value: [0.6],
    },
    {
        code: 'S1cz',
        value: [100],
    },
    {
        code: 'S1wd',
        value: [30],
    },
    {
        code: 'S2yl',
        value: [0.3],
    },
    {
        code: 'S2cz',
        value: [100],
    },
    {
        code: 'S2wd',
        value: [30],
    },
    {
        code: 'S3yl',
        value: [0.5],
    },
    {
        code: 'S3cz',
        value: [100],
    },
    {
        code: 'S3wd',
        value: [30],
    },
]
const pumpArr = [
    {
        code: 'LB9',
        value: [0, 3],
    },
]

const valveMap = reactive({
    M2: valveArr_M2,
    S1: valveArr_S1,
    S2: valveArr_S2,
    S3: valveArr_S3,
    PUMP: pumpArr,
    SENSORS: sensorArr,
})
onMounted(() => {
    // 获取页面参数
    fetchLayoutParams();
    // 更新页面配置
    updatePageConfig();
});

// // 随机模拟泵数据[0,100],前面0-3的整数，后面1-5000的整数
// const simulatePumpData = ref([0, 0]);
// setInterval(() => {
//     simulatePumpData.value = [Math.floor(Math.random() * 4)+1, Math.floor(Math.random() * 5000) + 1];
//     console.log('模拟泵数据：', simulatePumpData.value);
// }, 1000);
onBeforeUnmount(() => {
    // 页面销毁时取消订阅
    stompClient.unsubscribeFromPage(pageCode);
});


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

//更新页面配置
function updatePageConfig() {
    updateZTPageConfig(pageCode, pageParams)
        .then(res => {
            // console.log('页面配置成功：', res);
            stompClient.subscribeToPage(pageCode, (data) => {
                valveMap.M2 = Object.values(data.M2)
                valveMap.S1 = Object.values(data.S1)
                valveMap.S2 = Object.values(data.S2)
                valveMap.S3 = Object.values(data.S3)
                valveMap.PUMP = Object.values(data.PUMP)
                valveMap.SENSORS = Object.values(data.SENSORS)
            });
        })
        .catch(err => {
            console.log('页面配置失败：', err);
        });
}
//所有阀门状态
const valveArr = computed(() => [...new Set([
    ...valveMap.M2,
    ...valveMap.S1,
    ...valveMap.S2,
    ...valveMap.S3,
])]);

const { getValveAndStatus, getValveOrStatus } = useValveHelper(valveArr)
const pumpHelper = useValveHelper(computed(() => valveMap.PUMP))
const sensorHelper = useValveHelper(computed(() => valveMap.SENSORS))
//搅拌电机运行状态
const fanStatus = true;

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

//N18处管道流通状态(多次用到，所以单独抽出来)
const pumpStatus_N18 = computed(() => {
    return getValveAndStatus('N18') && getValveOrStatus('N16', 'N17')
})

</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;

        // .m2Flow_m1Tank {
        //     position: absolute;
        //     top: 40%;
        //     left: 59%;
        //     transform: translate(-50%, -50%);
        // }

        // .m2Flow_s1Tank {
        //     position: absolute;
        //     top: 40%;
        //     left: 3%;
        //     transform: translate(-50%, -50%);
        // }

        // .m2Flow_s2Tank {
        //     position: absolute;
        //     top: 40%;
        //     left: 18%;
        //     transform: translate(-50%, -50%);
        // }

        .m2Flow_s3Tank {
            position: absolute;
            top: 40%;
            left: 33%;
            transform: translate(-50%, -50%);
        }

        .m2Flow_p1Tank {
            z-index: 10;
            position: absolute;
            top: 62%;
            left: 90%;
            transform: translate(-50%, -50%);
        }

        .pumps {

            // .lb6_pos {
            //     z-index: 15;
            // }

            // .lb6_pos {
            //     position: absolute;
            //     top: 81%;
            //     left: 53.2%;
            //     transform: translate(-50%, -50%);
            // }

        }

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

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

            //储气罐
            .other1 {
                position: absolute;
                left: -6.7%;
                top: 10%;


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

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

            //蒸汽发生器
            .other3 {
                position: absolute;
                top: 18%;
                right: 0%;
            }

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

        //箭头指向
        .arrows {

            .arrow_pos1,
            .arrow_pos2 {
                position: absolute;
                z-index: 15;
                top: 6%;
                left: 14.3%;
                transform: translate(-50%, -50%);
                display: flex;
                //竖直居中
                align-items: center;

                .arrow_icon {
                    transform: rotate(270deg);
                    font-size: 100px;
                    color: #fff;
                }

                .arrow_text {
                    font-size: 30px;
                    color: #fff;
                }
            }

            .arrow_pos2 {
                left: 68.3%;
                top: 9%;
            }
        }

        //外部管道排布
        .outer_progress {
            .progress_pos1_1 {
                position: absolute;
                top: 81.1%;
                left: 13.4%;
                width: 15.3%;
            }

            .progress_pos1_2 {
                position: absolute;
                top: 81.1%;
                left: 28.4%;
                width: 15.3%;
            }

            .progress_pos1_3 {
                position: absolute;
                top: 81.1%;
                left: 43.4%;
                width: 15.3%;
            }

            .progress_pos2 {
                position: absolute;
                top: 76.5%;
                left: 52.7%;
                width: 8.3%;
            }

            .progress_pos2_2 {
                position: absolute;
                top: 68.5%;
                left: 52.6%;
                width: 7.3%;
            }

            //喷淋塔相关管道
            .progress_pos7_1 {
                position: absolute;
                top: 11%;
                left: 16.5%;
                width: 15.3%;
            }

            .progress_pos7_2 {
                position: absolute;
                top: 11%;
                left: 31.5%;
                width: 41.8%;
            }

            .progress_pos7_3 {
                position: absolute;
                top: 11%;
                left: 73%;
                width: 20.8%;
            }

            //蒸汽发生器相关管道
            .progress_pos8_1 {
                position: absolute;
                top: 25.3%;
                left: 14.2%;
                width: 15.3%;
            }

            .progress_pos8_2 {
                position: absolute;
                top: 25.3%;
                left: 29.2%;
                width: 15.3%;
            }

            .progress_pos8_3 {
                position: absolute;
                top: 25.3%;
                left: 44.2%;
                width: 52.3%;
            }

            //储气罐相关管道
            .progress_pos9 {
                position: absolute;
                top: 42.7%;
                left: 4.6%;
                width: 28.3%;
            }

            .progress_pos10 {

                position: absolute;
                top: 42.4%;
                left: 19.7%;
                width: 28.3%;
            }

            .progress_pos11 {
                position: absolute;
                top: 42.4%;
                left: 34.7%;
                width: 28.3%;
            }

            .progress_pos12 {
                position: absolute;
                top: 30.4%;
                left: 53.4%;
                width: 16.3%;
            }

            .progress_pos13 {
                position: absolute;
                top: 30%;
                left: 80.7%;
                width: 16%;
            }

            .progress_pos14_1 {
                position: absolute;
                top: 14.6%;
                left: 6.6%;
                width: 13.3%;
            }

            .progress_pos14_2 {
                position: absolute;
                top: 14.6%;
                left: 19.6%;
                width: 15.3%;
            }

            .progress_pos14_3 {
                position: absolute;
                top: 14.6%;
                left: 34.6%;
                width: 18.8%;
            }

            .progress_pos14_4 {
                position: absolute;
                top: 14.6%;
                left: 53.4%;
                width: 27.4%;
            }

            // 通向m1流程页面的管道
            .progress_pos15_1 {
                position: absolute;
                top: 30.6%;
                left: 11.6%;
                width: 15.3%;
            }

            .progress_pos15_2 {
                position: absolute;
                top: 30.6%;
                left: 26.6%;
                width: 15.3%;
            }

            .progress_pos16 {
                position: absolute;
                top: 20.2%;
                left: 11.7%;
                width: 11%;
            }

            .progress_pos17 {
                position: absolute;
                top: 17.7%;
                left: 65.2%;
                width: 6%;
            }

            .progress_pos18 {
                position: absolute;
                top: 54.1%;
                left: 80%;
                width: 10%;
            }

        }

    }
}
</style>