<template>
    <div class="page">
        <HeaderComponent title="换热流程"></HeaderComponent>
        <div class="content_page">
            <M1Tank title="M1" :valveArr="valveMap.M1" :iconSize="getTankSize('M1')" :waterLevelValue="30"
                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]"
                :style="getTankStyle('M1')">
            </M1Tank>
            <Z1Tank title="Z1" :valveArr="valveMap.Z1" :iconSize="300" class="hr_z1Tank"></Z1Tank>

            <J1Tank title="J1" :valveArr="valveMap.J1" :iconSize="300" class="hr_j1Tank"></J1Tank>
            <J1Tank title="J2" :valveArr="valveMap.J2" :iconSize="300" class="hr_j2Tank"></J1Tank>
            <M1Tank title="M2" valvePosition="right" :valveArr="valveMap.M2" :waterLevelValue="30"
                :pressureValue="sensorHelper.getDataArrByCode('M2yl')[0]" 
                :iconSize="getTankSize('M2')" :style="getTankStyle('M2')">
            </M1Tank>
            <!-- 泵 -->
            <div class="pumps">
                <!-- lb3 -->
                <div :style="getTankStyle('LB3')">
                    <Pump title="换热出液泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB3')"
                        :iconSize="getTankSize('LB3', 100)"></Pump>
                </div>
                <div class="lb4_pos">
                    <Pump title="LB4" :pumpDataArr="pumpHelper.getDataArrByCode('LB4')" pumpDirection="R"></Pump>
                </div>
                <div :style="getTankStyle('LB7')">
                    <Pump title="换热进液泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB7')" pumpDirection="R"></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="valve_manual">
                <div class="valve_items valve_item1">
                    <i class="icon iconfont icon-waterValve icon_valve"></i>
                    <div class="valve_title"> 手动阀</div>
                </div>
                <div class="valve_items valve_item2 rotate_270">
                    <i class="icon iconfont icon-waterValve icon_valve"></i>
                    <div class="valve_title rotate_90"> 手动阀</div>
                </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"
                    :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" />

                <!-- 换热液相关管道 M1(n9)-lb3-z1-lb4-j1(d1)j2(d3)-->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N9_status" :striped-flow="N9_status" :duration="20"
                    class="progress_heat_exchange_fluid progress_7" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N9_status" :striped-flow="N9_status" :duration="20"
                    class="progress_heat_exchange_fluid progress_8 rotate_270" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N9_status" :striped-flow="N9_status" :duration="20"
                    class="progress_heat_exchange_fluid progress_9" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N21_status" :striped-flow="N21_status" :duration="20"
                    class="progress_heat_exchange_fluid progress_10 rotate_270" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N21_status" :striped-flow="N21_status" :duration="20"
                    class="progress_heat_exchange_fluid progress_11 rotate_180" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N21_status" :striped-flow="N21_status" :duration="40"
                    class="progress_heat_exchange_fluid progress_12 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D3')" :striped-flow="getValveOrStatus('D3')" :duration="20"
                    class="progress_heat_exchange_fluid progress_13_1 rotate_180" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D1')" :striped-flow="getValveOrStatus('D1')" :duration="20"
                    class="progress_heat_exchange_fluid progress_13_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N21_status" :striped-flow="N21_status" :duration="20"
                    class="progress_heat_exchange_fluid progress_14 rotate_180" />

                <!-- 物料M2(n15)-lb7-j2(d4) -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N15_status" :striped-flow="N15_status" :duration="20"
                    class="progress_materials progress_15" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N15_status" :striped-flow="N15_status" :duration="30"
                    class="progress_materials progress_16 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="N15_status" :striped-flow="N15_status" :duration="30"
                    class="progress_materials progress_17 rotate_180" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D4')" :striped-flow="getValveOrStatus('D4')" :duration="20"
                    class="progress_materials progress_18 rotate_270" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D4')" :striped-flow="getValveOrStatus('D4')" :duration="30"
                    class="progress_materials progress_19 rotate_180" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D4')" :striped-flow="getValveOrStatus('D4')" :duration="20"
                    class="progress_materials progress_20 rotate_90" />

                <!-- 蒸汽发生器相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D2')" :striped-flow="getValveAndStatus('D2')" :duration="20"
                    class="progress_steam progress_21 rotate_270" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D2')" :striped-flow="getValveAndStatus('D2')" :duration="50"
                    class="progress_steam progress_22 rotate_180" />

                <!-- 换热液j2-M1(n2) -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N2')" :striped-flow="getValveAndStatus('N2')" :duration="10"
                    class="progress_heat_exchange_fluid progress_23 rotate_270" />

                <!-- n12物料进入管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12')" :striped-flow="getValveAndStatus('N12')" :duration="10"
                    class="progress_materials progress_24 rotate_180" />
            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <div class="arrow 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 arrow_pos2">
                    <i class="icon iconfont icon-rightArrow arrow_icon"> </i>
                    <div class="arrow_text">物料进入</div>
                </div>
                <div class="arrow arrow_pos3">
                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/m2cl')"> </i>
                    <div class="arrow_text">物料进入</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import M1Tank from '@/components/DCS/M1TankComponent.vue';
import J1Tank from '@/components/DCS/J1TankComponent.vue';
import Z1Tank from '@/components/DCS/Z1TankComponent.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 = 'heatExchange';
const pageParams = {
    "M1": ['N1', 'N2', 'N4', 'N6', 'N7', 'N8', 'N9', 'N10', 'N11'],
    "M2": ['N12', 'N14', 'N15', 'N16', 'N17', 'N18', 'N20'],
    "J1": ['D1', 'D2'],
    "J2": ['D3', 'D4'],
    "Z1": ['N21'],
    "PUMP": ['LB3', 'LB4', 'LB7'],
    "SENSORS": ['M1yl', 'M1cz', 'M1wd', 'M2yl', 'M2cz', 'M2wd'],
}
//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],
    },
]

const valveArr_M2 = [
    {
        code: 'N12',
        value: [true],
    },
    {
        code: 'N14',
        value: [false],
    },
    {
        code: 'N15',
        value: [true],
    },
    {
        code: 'N16',
        value: [true],
    },
    {
        code: 'N17',
        value: [true],
    },
    {
        code: 'N20',
        value: [true],
    },
    // {
    //     code: 'N13',
    //     value: [true],
    // },
    {
        code: 'N18',
        value: [false],
    },
    // {
    //     code: 'N19',
    //     value: [true],
    // },
]

//J1罐阀门状态
const valveArr_J1 = [
    {
        code: 'D1',
        value: [true, false, true],
    },
    {
        code: 'D2',
        value: [true, false, true],
    },
]

const valveArr_J2 = [
    {
        code: 'D3',
        value: [true, false, true],
    },
    {
        code: 'D4',
        value: [true, false, true],
    },
]

//Z1罐阀门状态
const valveArr_Z1 = [
    {
        code: 'N21',
        value: [true],
    },
]

//传感器状态
const sensorArr = [
    {
        code: 'M1yl',
        value: [0.5],
    },
    {
        code: 'M1cz',
        value: [100],
    },
    {
        code: 'M1wd',
        value: [30],
    },
    {
        code: 'M2yl',
        value: [0.5],
    },
    {
        code: 'M2cz',
        value: [100],
    },
    {
        code: 'M2wd',
        value: [30],
    },
]
const pumpArr = [
    {
        code: 'LB3',
        value: [0, 3],
    },
    {
        code: 'LB4',
        value: [0, 3],
    },
    {
        code: 'LB7',
        value: [0, 3],
    },
]
const valveMap = reactive({
    M1: valveArr_M1,
    M2: valveArr_M2,
    J1: valveArr_J1,
    J2: valveArr_J2,
    Z1: valveArr_Z1,
    PUMP: pumpArr,
    SENSORS: sensorArr,
})
onMounted(() => {
    // 获取页面参数
    fetchLayoutParams();
    // 更新页面配置
    updatePageConfig();
});

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


const flowId = 7 // 当前页面对应的流程 ID
const { 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.J1 = Object.values(data.J1)
                valveMap.J2 = Object.values(data.J2)
                valveMap.Z1 = Object.values(data.Z1)
                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.M2,
    ...valveMap.J1,
    ...valveMap.J2,
    ...valveMap.Z1,
])]);

const { getValveAndStatus, getValveOrStatus } = useValveHelper(valveArr)
const pumpHelper = useValveHelper(computed(() => valveMap.PUMP))
const sensorHelper = useValveHelper(computed(() => valveMap.SENSORS))
//n18处管道流通状态
const N18_status = computed(() => {
    return getValveAndStatus('N18') && getValveOrStatus('N16', 'N17')
})

//n15处管道流通状态
const N15_status = computed(() => {
    return getValveAndStatus('N15') && getValveOrStatus('N16', 'N17')
})

//n9处管道流通状态
const N9_status = computed(() => {
    return getValveAndStatus('N9') && getValveOrStatus('N6', 'N7')
})

//n21出来部分管道流通状态
const N21_status = computed(() => {
    return getValveAndStatus('N21') && getValveOrStatus('D1', 'D3')
})

//进度条配置
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;

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

        .hr_z1Tank {
            position: absolute;
            top: 3%;
            left: 41%;
            transform: translate(-50%, -50%);
        }

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

        .hr_j2Tank {
            position: absolute;
            top: 54%;
            left: 20%;
            transform: translate(-50%, -50%);
        }

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

        .pumps {
            // .lb3_pos {
            //     position: absolute;
            //     z-index: 5;
            //     top: 18%;
            //     left: 36.4%;
            //     transform: translate(-50%, -50%);
            // }

            .lb4_pos {
                position: absolute;
                z-index: 5;
                top: 45%;
                left: 42.4%;
                transform: translate(-50%, -50%);
            }

            // .lb7_pos {
            //     position: absolute;
            //     z-index: 5;
            //     top: 85%;
            //     left: 61.4%;
            //     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%;
            }

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

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

        //手动阀
        .valve_manual {
            .valve_items {
                width: 50px;
                height: 50px;
                position: absolute;
                color: aliceblue;
                z-index: 100;

                .icon_valve {
                    font-size: 50px;
                    color: #c7d2e0;
                }
            }

            .valve_item1 {
                top: 7%;
                left: 44%;
            }

            .valve_item2 {
                top: 55%;
                left: 30.2%;

                .valve_title {
                    position: absolute;
                    left: 51%;
                    top: 136%;
                }
            }
        }

        .outer_progress {

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

            .progress_2 {
                position: absolute;
                top: 22%;
                left: 30.6%;
                width: 19%;
            }

            .progress_3 {
                position: absolute;
                top: 22.4%;
                left: 63.3%;
                width: 19.5%;
            }

            .progress_4 {
                position: absolute;
                top: 22%;
                left: 90.6%;
                width: 19%;
            }

            .progress_5_1 {
                position: absolute;
                top: 3.6%;
                left: 3.3%;
                width: 27.5%;
            }

            .progress_5_2 {
                position: absolute;
                top: 3.6%;
                left: 30.5%;
                width: 33%;
            }

            .progress_5_3 {
                position: absolute;
                top: 3.6%;
                left: 63.1%;
                width: 27.6%;
            }

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

            .progress_6_2 {
                position: absolute;
                top: 6%;
                left: 83%;
                width: 11.3%;
            }

            //换热液相关
            .progress_7 {
                position: absolute;
                top: 18%;
                left: 15.1%;
                width: 25%;
            }

            .progress_8 {
                position: absolute;
                top: 16%;
                left: 36%;
                width: 6%;
            }

            .progress_9 {
                position: absolute;
                top: 10%;
                left: 35.9%;
                width: 19%;
            }

            .progress_10 {
                position: absolute;
                top: 42%;
                left: 46.1%;
                width: 6%;
            }

            .progress_11 {
                position: absolute;
                top: 36%;
                left: 38.9%;
                width: 7.4%;
            }

            .progress_12 {
                position: absolute;
                top: 67%;
                left: 39.1%;
                width: 32%;
            }

            .progress_13_1 {
                position: absolute;
                top: 97%;
                left: 30.3%;
                width: 9%;
            }

            .progress_13_2 {
                position: absolute;
                top: 97%;
                left: 39%;
                width: 8.7%;
            }

            .progress_14 {
                position: absolute;
                top: 45%;
                left: 45.6%;
                width: 6%;
            }

            .progress_15 {
                position: absolute;
                top: 18%;
                left: 75.1%;
                width: 16.9%;
            }

            .progress_16 {
                position: absolute;
                top: 52%;
                left: 91.8%;
                width: 35%;
            }

            .progress_17 {
                position: absolute;
                top: 84.8%;
                left: 65%;
                width: 27%;
            }

            .progress_18 {
                position: absolute;
                top: 72%;
                left: 65.2%;
                width: 14.4%;
            }

            .progress_19 {
                position: absolute;
                top: 58%;
                left: 37.5%;
                width: 27.8%;
            }

            .progress_20 {
                position: absolute;
                top: 70%;
                left: 37.7%;
                width: 12%;
            }

            .progress_21 {
                position: absolute;
                top: 78.7%;
                left: 54.7%;
                width: 13%;
            }

            .progress_22 {
                position: absolute;
                top: 91%;
                left: 54.5%;
                width: 41%;
            }

            .progress_23 {
                position: absolute;
                top: 57%;
                left: 30.6%;
                width: 8%;
            }

            .progress_24 {
                position: absolute;
                top: 63.5%;
                left: 89.4%;
                width: 3.4%;
            }
        }

        .arrows {
            .arrow_pos1 {
                top: 90.6%;
                left: 19.4%;
                //竖直方向
                display: flex;
                flex-direction: column;

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

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

                .arrow_icon {
                    color: darkgray;
                }
            }

            .arrow_pos3 {
                top: 65.1%;
                left: 95.4%;
                display: flex;
                flex-direction: column;

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

    }
}
</style>