<template>
    <div class="page">
        <HeaderComponent title="M1水解"></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>
            <S1Tank title="S1" :fanStatus="fanStatus" :valveArr="valveMap.S1"
                :pressureValue="sensorHelper.getDataArrByCode('S1yl')[0]" :waterLevelValue="30"
                :temperatureValue="sensorHelper.getDataArrByCode('S1wd')[0]" :iconSize="getTankSize('S1', 300)"
                :style="getTankStyle('S1')">
            </S1Tank>
            <S1Tank title="S2" :fanStatus="fanStatus" :valveArr="valveMap.S2"
                :pressureValue="sensorHelper.getDataArrByCode('S2yl')[0]" :waterLevelValue="30"
                :temperatureValue="sensorHelper.getDataArrByCode('S2wd')[0]" :iconSize="getTankSize('S2', 300)"
                :style="getTankStyle('S2')">
            </S1Tank>
            <S1Tank title="S3" :fanStatus="fanStatus" :valveArr="valveMap.S3" :waterLevelValue="30"
                :iconSize="getTankSize('S3', 300)" class="m1Flow_s3Tank">
            </S1Tank>
            <div class="pumps">
                <!-- lb9 -->
                <div :style="getTankStyle('LB9')">
                    <Pump title="进料泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB9')"
                        :iconSize="getTankSize('LB9', 300)"></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">
                <!-- n10-进料泵-s1,s2,s3 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N10') && getValveOrStatus('D5', 'D6', 'D7')"
                    :striped-flow="getValveAndStatus('N10') && getValveOrStatus('D5', 'D6', 'D7')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N10') && getValveOrStatus('D5', 'D6', 'D7')"
                    :striped-flow="getValveAndStatus('N10') && getValveOrStatus('D5', 'D6', 'D7')" :duration="20"
                    class="progress_materials progress_pos2 rotate_270" />

                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N10') && getValveOrStatus('D5', 'D6', 'D7')"
                    :striped-flow="getValveAndStatus('N10') && getValveOrStatus('D5', 'D6', 'D7')" :duration="30"
                    class="progress_materials progress_pos3" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N10') && getValveOrStatus('D6', 'D7')"
                    :striped-flow="getValveAndStatus('N10') && getValveOrStatus('D6', 'D7')" :duration="20"
                    class="progress_materials progress_pos3_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N10', 'D7')" :striped-flow="getValveAndStatus('N10', 'D7')"
                    :duration="20" class="progress_materials progress_pos3_3" />

                <!-- 储气罐相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N8')" :striped-flow="getValveAndStatus('N8')"
                    :duration="progressConfig.duration" class="progress_compressed_air progress_pos4 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N4')" :striped-flow="getValveAndStatus('N4')"
                    :duration="progressConfig.duration" class="progress_compressed_air progress_pos5 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D8')" :striped-flow="getValveAndStatus('D8')" :duration="30"
                    class="progress_compressed_air progress_pos6 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D9')" :striped-flow="getValveAndStatus('D9')" :duration="30"
                    class="progress_compressed_air progress_pos7 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D10')" :striped-flow="getValveAndStatus('D10')" :duration="30"
                    class="progress_compressed_air progress_pos8 rotate_90" />

                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N4', 'D8', 'D9', 'D10')"
                    :striped-flow="getValveOrStatus('N4', 'D8', 'D9', 'D10')" :duration="30"
                    class="progress_compressed_air progress_pos9_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D8', 'D9', 'D10')" :striped-flow="getValveOrStatus('D8', 'D9', 'D10')"
                    :duration="3" class="progress_compressed_air progress_pos9_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D9', 'D10')" :striped-flow="getValveOrStatus('D9', 'D10')"
                    :duration="30" class="progress_compressed_air progress_pos9_3" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D10')" :striped-flow="getValveOrStatus('D10')" :duration="30"
                    class="progress_compressed_air progress_pos9_4" />

                <!-- 喷淋塔相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N11')" :striped-flow="getValveAndStatus('N11')" :duration="20"
                    class="progress_stench progress_pos10_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N11', 'D16')" :striped-flow="getValveOrStatus('N11', 'D16')"
                    :duration="20" class="progress_stench progress_pos10_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N11', 'D16', 'D17')"
                    :striped-flow="getValveOrStatus('N11', 'D16', 'D17')" :duration="20"
                    class="progress_stench progress_pos10_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_pos11_1 rotate_180" />
                <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_pos11_2 rotate_180" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D11', 'D12', 'D13')"
                    :striped-flow="getValveOrStatus('D11', 'D12', 'D13')" :duration="10"
                    class="progress_steam progress_pos11_3 rotate_180" />

                <!-- n22,n23,n24通向下一流程相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N22')" :striped-flow="getValveOrStatus('N22')" :duration="20"
                    class="progress_materials progress_pos12_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N22', 'N23')" :striped-flow="getValveOrStatus('N22', 'N23')"
                    :duration="20" class="progress_materials progress_pos12_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N22', 'N23', 'N24')"
                    :striped-flow="getValveOrStatus('N22', 'N23', 'N24')" :duration="10"
                    class="progress_materials progress_pos12_3" />

                <!-- 通向换热流程的管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N9') && getValveOrStatus('N6', 'N7')"
                    :striped-flow="getValveAndStatus('N9') && getValveOrStatus('N6', 'N7')" :duration="10"
                    class="progress_heat_exchange_fluid progress_pos13 rotate_270" />
            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <div class="arrow arrow_pos1">
                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/m2cl')"> </i>
                    <div class="arrow_text">M2流程</div>
                </div>
                <div class="arrow arrow_pos2">
                    <i class="icon iconfont icon-rightArrow arrow_icon"> </i>
                    <div class="arrow_text">物料进入</div>
                </div>
                <div class="arrow arrow_pos3">
                    <div class="arrow_text">换热流程</div>
                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/hr')"> </i>
                </div>
            </div>
        </div>

    </div>
</template>

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

const router = useRouter()

const pageCode = 'm1Hydrolyze';
const pageParams = {
    "M1": ['N1', 'N3', 'N4', 'N5', 'N6', 'N7', 'N8', 'N9', 'N10', 'N11'],
    "S1": ['N10', 'D5', 'D11', 'N22', 'D16', 'D8'],
    "S2": ['D6', 'D9', 'D17', 'D12', 'N23', 'N10'],
    "S3": ['D7', 'D10', 'D13', 'N24', 'N10'],
    "PUMP": ['LB9'],
    "SENSORS": ['M1yl', 'M1cz', 'M1wd', 'S1yl', 'S1cz', 'S1wd', 'S2yl', 'S2cz', 'S2wd', 'S3yl', 'S3cz', 'S3wd'],
}
//M1罐阀门状态
const valveArr_M1 = [
    {
        code: 'N1',
        value: [true],
    },
    // {
    //     code: 'N2',
    //     value: [true],
    // },
    // {
    //     code: 'N3',
    //     value: [true],
    // },
    {
        code: 'N4',
        value: [true],
    },
    {
        code: 'N5',
        value: [true],
    },
    {
        code: 'N6',
        value: [true],
    },
    {
        code: 'N7',
        value: [true],
    },
    {
        code: 'N8',
        value: [false],
    },
    {
        code: 'N9',
        value: [true],
    },
    {
        code: 'N10',
        value: [true],
    },
    {
        code: 'N11',
        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: 'D6',
        value: [true, false, true],
    },
    {
        code: 'D9',
        value: [true, false, false],
    },
    {
        code: 'D17',
        value: [true, false, false],
    },
    {
        code: 'D12',
        value: [true, false, false],
    },
    {
        code: 'N23',
        value: [true],
    },
    {
        code: 'N10',
        value: [true],
    }

]
//S3罐阀门状态
const valveArr_S3 = [
    {
        code: 'D7',
        value: [false, true, false],
    },
    {
        code: 'D10',
        value: [true, false, false],
    },
    {
        code: 'D13',
        value: [true, false, false],
    },
    {
        code: 'N24',
        value: [true],
    },
    {
        code: 'N10',
        value: [true],
    },
]
//传感器状态
const sensorArr = [
    {
        code: 'M1yl',
        value: [0.5],
    },
    {
        code: 'M1cz',
        value: [100],
    },
    {
        code: 'M1wd',
        value: [30],
    },
    {
        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({
    M1: valveArr_M1,
    S1: valveArr_S1,
    S2: valveArr_S2,
    S3: valveArr_S3,
    PUMP: pumpArr,
    SENSORS: sensorArr,
})
onMounted(() => {
    // 获取页面参数
    fetchLayoutParams();
    // 更新页面配置
    updatePageConfig();
});

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


const flowId = 5 // 当前页面对应的流程 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.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.M1,
    ...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,//是否显示文字
}

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

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

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

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

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

        .pumps {
            // .lb9_pos {
            //     position: absolute;
            //     z-index: 5;
            //     top: 88%;
            //     left: 30.4%;
            //     transform: translate(-50%, -50%);
            // }

        }

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

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

            //储气罐
            .other1 {
                position: absolute;
                left: -7.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;
            }
        }

        .outer_progress {
            .progress_pos1 {
                position: absolute;
                top: 88%;
                left: 19.3%;
                width: 168px;
            }

            .progress_pos2 {
                position: absolute;
                top: 56.6%;
                left: 29.9%;
                width: 530px;
            }


            .progress_pos3 {
                position: absolute;
                top: 30%;
                left: 29.7%;
                width: 196px;
            }

            .progress_pos3_2 {
                position: absolute;
                top: 30%;
                left: 39.5%;
                width: 430px;
            }

            .progress_pos3_3 {
                position: absolute;
                top: 30%;
                left: 61.7%;
                width: 425px;
            }

            .progress_pos4 {
                position: absolute;
                top: 38%;
                left: 3.3%;
                width: 168px;
            }

            .progress_pos5 {
                position: absolute;
                top: 32.2%;
                left: 30.7%;
                width: 265px;
            }

            .progress_pos6 {
                position: absolute;
                top: 44%;
                left: 32.8%;
                width: 510px;
            }

            .progress_pos7 {
                position: absolute;
                top: 44.3%;
                left: 54.6%;
                width: 510px;
            }

            .progress_pos8 {
                position: absolute;
                top: 44%;
                left: 76.8%;
                width: 510px;
            }

            .progress_pos9_1 {
                position: absolute;
                top: 18.5%;
                left: 4.5%;
                width: 505px;
            }

            .progress_pos9_2 {
                position: absolute;
                top: 18.5%;
                left: 30.5%;
                width: 42px;
            }

            .progress_pos9_3 {
                position: absolute;
                top: 18.5%;
                left: 32.5%;
                width: 426px;
            }

            .progress_pos9_4 {
                position: absolute;
                top: 18.5%;
                left: 54.5%;
                width: 426px;
            }

            .progress_pos10_1 {
                position: absolute;
                top: 11%;
                left: 23%;
                width: 419px;
            }

            .progress_pos10_2 {
                position: absolute;
                top: 11%;
                left: 44.5%;
                width: 431px;
            }

            .progress_pos10_3 {
                position: absolute;
                top: 11%;
                left: 66.5%;
                width: 518px;
            }

            .progress_pos11_1 {
                position: absolute;
                top: 25.3%;
                left: 42.2%;
                width: 428px;
            }

            .progress_pos11_2 {
                position: absolute;
                top: 25.3%;
                left: 64.2%;
                width: 428px;
            }

            .progress_pos11_3 {
                position: absolute;
                top: 25.3%;
                left: 86.2%;
                width: 200px;
            }

            .progress_pos12_1 {
                position: absolute;
                top: 81%;
                left: 41.4%;
                width: 430px;
            }

            .progress_pos12_2 {
                position: absolute;
                top: 81%;
                left: 63.4%;
                width: 430px;
            }

            .progress_pos12_3 {
                position: absolute;
                top: 81%;
                left: 85.4%;
                width: 195px;
            }

            .progress_pos13 {
                position: absolute;
                top: 17.9%;
                left: 15.3%;
                width: 6%;
            }
        }

        .arrows {

            // .arrow {
            //     position: absolute;
            //     transform: translate(-50%, -50%);

            //     .arrow_icon {
            //         font-size: 100px;
            //         color: aliceblue;
            //     }

            //     .arrow_text {
            //         text-align: center;
            //         font-size: 20px;
            //         color: aliceblue;

            //     }
            // }

            .arrow_pos1 {
                top: 82.6%;
                left: 95%;
            }

            .arrow_pos2 {
                left: 7%;
                top: 70%;

                .arrow_icon {
                    color: darkgray;
                }
            }

            .arrow_pos3 {
                top: 8%;
                left: 15.3%;
                display: flex;
                flex-direction: column;

                .arrow_icon {
                    transform: rotate(270deg);
                }
            }
        }

    }
}
</style>