<template>
    <!-- 右侧流程图 -->
    <div class="dcs">
        <HeaderComponent title="M2流程" :backTo="'/flowSelect'" />
        <div class="flows_body_right">
            <!-- 顶部按钮栏 -->
            <div class="flows_body_right_top">
                <!-- <el-button type="primary" @click="M1Injection"> M1注料</el-button> -->
                <el-button type="primary" @click="normalWorkFlow"> 正常工作</el-button>
                <el-button type="primary" @click="positivePressurePlugging"> 正压排堵</el-button>
                <el-button type="primary" @click="negativePressurePlugging"> 负压排堵</el-button>
                <!-- <el-button type="primary" @click="closeQDValves"> 关气动</el-button> -->
                <el-popconfirm title="请确定是否关闭所有阀门？" @confirm="closeAllValves">
                    <template #reference>
                        <el-button type="primary"> 关所有</el-button>
                    </template>
                </el-popconfirm>
            </div>
            <div class="flows_body_right_tanks">
                <div class="tank_single">
                    <div class="flow_single_title"> M1罐 </div>
                    <div class="flow_single_body">
                        <div class="body_name">
                            压力传感器
                        </div>
                        <div class="body_show">
                            <div class="body_show_value">
                                {{ (deviceDataArr[eqStore.eqIndexArr[93]]?.value + 0.05).toFixed(2) || 0 }}
                            </div>
                            <div class="body_show_unit"> Mpa</div>
                        </div>
                    </div>
                </div>

                <div class="tank_single">
                    <div class="flow_single_title"> S1罐 </div>
                    <div class="flow_single_body">
                        <div class="body_name">
                            压力传感器
                        </div>
                        <div class="body_show">
                            <div class="body_show_value">
                                {{ (deviceDataArr[eqStore.eqIndexArr[126]]?.value + 0.07).toFixed(2) || 0 }}
                            </div>
                            <div class="body_show_unit"> Mpa</div>
                        </div>
                    </div>

                    <div class="flow_single_body">
                        <div class="body_name">
                            温度传感器
                        </div>
                        <div class="body_show">
                            <div class="body_show_value">
                                {{ deviceDataArr[eqStore.eqIndexArr[113]]?.value.toFixed(2) || 0 }}
                            </div>
                            <div class="body_show_unit"> °C</div>
                        </div>
                    </div>
                </div>

                <div class="tank_single">
                    <div class="flow_single_title"> S2罐 </div>
                    <div class="flow_single_body">
                        <div class="body_name">
                            压力传感器
                        </div>
                        <div class="body_show">
                            <div class="body_show_value">
                                {{ (deviceDataArr[eqStore.eqIndexArr[90]]?.value + 0.04).toFixed(2) || 0 }}
                            </div>
                            <div class="body_show_unit"> Mpa</div>
                        </div>
                    </div>

                    <div class="flow_single_body">
                        <div class="body_name">
                            温度传感器
                        </div>
                        <div class="body_show">
                            <div class="body_show_value">
                                {{ deviceDataArr[eqStore.eqIndexArr[88]]?.value.toFixed(2) || 0 }}
                            </div>
                            <div class="body_show_unit"> °C</div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="flows_body_right_flows">
                <!-- 右侧流程图内容 -->
                <div class="flows_body_right_content">
                    <!-- n22,n23,n24 -->
                    <div class="flows">
                        <!-- N22 -->
                        <Valve title="S1出料阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[240]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[241]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[196]]" />
                        <!-- N23 -->
                        <Valve title="S2出料阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[242]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[243]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[198]]" />
                        <!-- N24 -->
                        <!-- TAG 无地址 -->
                        <Valve title="S3出料阀" :valveOpenObj="false" />
                    </div>

                    <!-- N12,N15,N16,N17 -->
                    <div class="flows">
                        <!-- N12 -->
                        <Valve title="M2进料阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[178]]" />
                        <!-- N15 -->
                        <Valve title="M2排堵出气阀1" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[184]]" />
                        <!-- N17 -->
                        <Valve title="M2排堵出气阀2" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[188]]" />
                        <!-- N16 -->
                        <Valve title="M2排堵进气阀2" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[186]]" />
                    </div>

                    <!-- LB7 -->
                    <!-- 108 146 123 139 -->
                    <DeviceStatus title="M2-J2换热进液泵" :deviceData="deviceDataArr[eqStore.eqIndexArr[108]]"
                        :speedData="deviceDataArr[eqStore.eqIndexArr[123]]"
                        :setStatusWordAddress="deviceDataArr[eqStore.eqIndexArr[146]]?.address"
                        :setSpeedAddress="deviceDataArr[eqStore.eqIndexArr[139]]?.address" v-if="showValves" />

                    <!-- D1,D2,N2-->
                    <div class="flows">
                        <!-- D1 -->
                        <Valve title="J1进气阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[2]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[3]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[209]]" />
                        <!-- D2 -->
                        <Valve title="J1蒸汽进气阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[5]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[6]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[211]]" />
                        <!-- N2 -->
                        <Valve title="M1-J1换热阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[156]]" />
                    </div>
                    <!-- D3,D4,N3 -->
                    <div class="flows">
                        <!-- D3 -->
                        <Valve title="J2进气阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[28]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[29]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[226]]" />
                        <!-- D4 -->
                        <Valve title="J2进液换热阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[31]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[32]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[228]]" />
                        <!-- N3 -->
                        <Valve title="M1-J2换热阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[158]]" />
                    </div>
                    <!-- LB6 -->
                    <!-- 106 145 122 138 -->
                    <DeviceStatus title="M2进料泵" :deviceData="deviceDataArr[eqStore.eqIndexArr[106]]"
                        :speedData="deviceDataArr[eqStore.eqIndexArr[122]]"
                        :setStatusWordAddress="deviceDataArr[eqStore.eqIndexArr[145]]?.address"
                        :setSpeedAddress="deviceDataArr[eqStore.eqIndexArr[138]]?.address" v-if="showValves" />

                    <!-- N19 -->
                    <Valve title="M2出渣阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[192]]" />

                    <!-- N14 -->
                    <Valve title="M2加压阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[182]]" />

                    <!-- N18 -->
                    <Valve title="M2排堵进气阀1" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[190]]" />

                    <!-- N20-->
                    <Valve title="M2喷淋塔" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[194]]" />

                    <!-- test -->
                    <div class="flows" v-if="showValves">
                        <!-- D16 -->
                        <Valve title="S1喷淋塔" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[21]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[22]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[234]]" />
                        <!-- N13 -->
                        <Valve title="M2出料阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[180]]" />
                        <!-- N5 -->
                        <Valve title="N5反应罐进料阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[162]]" />
                    </div>

                </div>

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

</template>

<script setup>
import { openElMessageBox, openElMessage, openElWarnMessage } from '@/utils/message';
import { onMounted, ref, watch, onUnmounted } from 'vue';
import { setCoil, getValues, getEquipmentIndexList, setIntRegister, setCoils } from '@/api/dcs/flowControl';
import DeviceStatus from '@/components/DCS/DeviceStatusComponent';
import Valve from '@/components/DCS/ValveComponent';
import { wsClient } from '@/utils/ws/websocket.js';
import useEqStore from '@/store/modules/dcs';
import $modal from '@/plugins/modal'
const eqStore = useEqStore();
//TODO 隐藏阀门是否显示
const showValves = ref(true)
onMounted(() => {
    getEquipmentIndexList().then(res => {
        // console.log('getEquipmentIndexList');
        eqStore.setEqIndexArr(res.data);
    })
    wsClient.connect((success) => {
        if (success) console.log("WebSocket 连接成功");
    });
    wsClient.ws.onmessage = (event) => {
        // console.log("收到消息:", event.data);
        deviceDataArr.value = JSON.parse(event.data);
        // console.log('deviceDataArr', deviceDataArr.value)
    };
})
//初始化按钮运行状态
function initBtnRunStatua() {
    // console.log(eqStore.eqIndexArr)
    //M2流程设备id数组
    const equipmentIdArr = [196, 198, 200, 178, 184, 186, 188, 0, 2, 5, 156, 28, 31, 158, 0, 192, 182, 190, 194]
    for (let i = 0; i < equipmentIdArr.length; i++) {
        if (i === 0) {
            btnRunStatus.value[i] = false;
            continue;
        } else {
            btnRunStatus.value[i] = deviceDataArr.value[eqStore.eqIndexArr[equipmentIdArr[i]]]?.value;
        }
    }
}

//设备数据
const deviceDataArr = ref([]);
const justRunFirst = ref(true)
//监听deviceDataArr变化
let stopWatch = null;
stopWatch = watch(() => deviceDataArr?.value, (newValue, oldValue) => {
    if (newValue !== oldValue && justRunFirst.value && Object.keys(eqStore.eqIndexArr).length > 0) {
        initBtnRunStatua();
        justRunFirst.value = false;
        stopWatch();
    }
});

//正常工作流程步骤
const step = ref(1)
//按钮点击状态(开启，关闭)
const btnRunStatus = ref(Array(30).fill(false));


//监控step值
watch(() => step.value, (newValue, oldValue) => {
    eqStore.setM2Step(newValue);
    switch (newValue) {
        case 3:
            openElMessageBox('打开N12、N15、N16、N17', '提示')
            break;
        case 4:
            openElMessageBox('关闭D1、D2、N2', '提示')
            break;
        case 5:
            openElMessage('关闭N22')
            break;
        case 6:
            openElMessageBox('关闭N12、N15、N16、N17', '提示')
            break;
        case 7:
            openElMessageBox('打开D1、D2、N2', '提示')
            break;
        case 8:
            openElMessageBox('手动打开底部阀门N19,将残渣排出', '提示')
            break;
    }
});

//正常工作流程
function normalWorkFlow() {
    openElMessageBox('当S1/S2/S3达到条件后且M1或Z1注满,打开对应的N22/N23/N24,排空S1/S2/S3', '提示');
    step.value = 2;
}
//监控N22，N23，N24设备运行状态
watch(() => btnRunStatus.value[0], (newValue, oldValue) => {
    if (newValue && step.value == 2) {
        step.value = 3;
    }
});
watch(() => btnRunStatus.value[1], (newValue, oldValue) => {
    if (newValue && step.value == 2) {
        step.value = 3;
    }
});
watch(() => btnRunStatus.value[2], (newValue, oldValue) => {
    if (newValue && step.value == 2) {
        step.value = 3;
    }
});
//监控N12,N15,N16,N17设备运行状态
const watchSources1 = [
    () => btnRunStatus.value[3], // N12
    () => btnRunStatus.value[4], // N15
    () => btnRunStatus.value[5], // N16
    () => btnRunStatus.value[6], // N17
];
// 合并监听
watch(watchSources1, ([n12, n15, n16, n17]) => {
    if (n12 && n15 && n16 && n17 && step.value == 3) {
        openElMessageBox('等3秒后打开LB7', '提示')
    }
    if (!n12 && !n15 && !n16 && !n17 && step.value == 6) {
        openElMessageBox('等3秒后关闭LB7', '提示')
    }
});

//监控LB7
watch(() => deviceDataArr.value[eqStore.eqIndexArr[108]]?.value, (newValue, oldValue) => {
    if ((newValue == 1 || newValue == 2) && step.value == 3) {
        step.value = 4;
    }
    if (newValue == 3 && step.value == 6) {
        step.value = 7;
    }
});
//监控D1,D2,N2
const watchSources = [
    () => deviceDataArr.value[eqStore.eqIndexArr[2]]?.value, // D1
    () => deviceDataArr.value[eqStore.eqIndexArr[5]]?.value, // D2
    () => btnRunStatus.value[10],                         // N2
];
// 合并监听
watch(watchSources, ([d1, d2, n2]) => {
    if (!d1 && !d2 && !n2 && step.value === 4) {
        openElMessageBox('打开D3、D4、N3', '提示');
    }
    if (d1 && d2 && n2 && step.value === 7) {
        openElMessageBox('关闭D3、D4、N3', '提示');
    }
});

//监控D3,D4,N3
const watchSources2 = [
    () => deviceDataArr.value[eqStore.eqIndexArr[28]]?.value, // D3
    () => deviceDataArr.value[eqStore.eqIndexArr[31]]?.value, // D4
    () => btnRunStatus.value[13],                         // N3
];
// 合并监听
watch(watchSources2, ([d3, d4, n3]) => {
    if (d3 && d4 && n3 && step.value === 4) {
        step.value = 5;
    }
    if (!d3 && !d4 && !n3 && step.value === 7) {
        step.value = 8;
    }
});

//监控N22
watch(() => btnRunStatus.value[0], (newValue, oldValue) => {
    if (!newValue && step.value == 5) {
        openElMessageBox('3秒后关闭LB6', '提示');
    }
});

//监控LB6
watch(() => deviceDataArr.value[eqStore.eqIndexArr[106]]?.value, (newValue, oldValue) => {
    if (newValue == 1 || newValue == 2) {
        if (step.value == 5) {
            step.value = 6;
        }
    }
});


//关闭所有阀门
function closeAllValves() {
    if (step2.value == 1) {
        step2.value += 1;
    }
    const param1 = {
        dataArr: [false, false, false, false, false, false, false, false, false, false, false, false, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true],
        startAddress: deviceDataArr.value[eqStore.eqIndexArr[154]].address,
        quantity: 28,
    }
    const param2 = {
        dataArr: [false, false, false, false, false, false, false, false, false, false, false, false, false, true, false, true, false, true, false, true, false, true],
        startAddress: deviceDataArr.value[eqStore.eqIndexArr[178]].address,
        quantity: 22,
    }
    setCoils(param1).then(res => {
        // console.log(res);
    })
    setCoils(param2).then(res => {
        // console.log(res);
    })
}



//正压排堵
function positivePressurePlugging() {
    openElMessageBox('N14在堵的时候打开一段时间后再关闭', '提示');
}
//负压排堵步骤
const step2 = ref(1)
//负压排堵
function negativePressurePlugging() {
    step2.value = 1;
    openElMessageBox('请确认没有压力的情况下,点击“关所有”按钮关闭所有阀门', '提示');
}

//监听step2值
watch(() => step2.value, (newValue, oldValue) => {
    eqStore.setM2Step2(newValue);
    switch (newValue) {
        case 2:
            openElMessage('请打开N18阀门');
            break;
        case 3:
            openElMessage('反复开关5次N16阀门,最终关闭N16阀门');
            break;
        case 4:
            openElMessage('打开N20');
            break;
        case 5:
            openElMessage('5秒后请关闭N20阀门');
            break;
        case 6:
            openElMessage('反复开关5次N17阀门,最终关闭N17阀门');
            break
        case 7:
            openElMessage('打开N20等5秒(查看压力表等于大气压力)');
            break
    }
});
//监控N18
watch(() => btnRunStatus.value[17], (newValue, oldValue) => {
    if (newValue && step2.value == 2) {
        step2.value = 3;
    }
});
//记录开关N16阀门次数
let switchN16Count = 0;
//监控N16
watch(() => btnRunStatus.value[5], (newValue, oldValue) => {
    if (!newValue && step2.value == 3) {
        switchN16Count++;
        if (switchN16Count == 3) {
            step2.value = 4;
        }
    }
});
//监控N20
watch(() => btnRunStatus.value[18], (newValue, oldValue) => {
    if (newValue && step2.value == 4) {
        step2.value = 5;
    }
    if (!newValue && step2.value == 5) {
        step2.value = 6;
    }
});
//记录开关N17阀门次数
let switchN17Count = 0;
//监控N17
watch(() => btnRunStatus.value[6], (newValue, oldValue) => {
    if (!newValue && step2.value == 6) {
        switchN17Count++;
        if (switchN17Count == 3) {
            step2.value = 7;
        }
    }
});


</script>

<style lang="scss" scoped>
.dcs {
    width: 100%;
    height: 100%;
    min-width: fit-content;
    min-height: max-content;
    background-color: #141414;
}

.flows_body_right {
    width: 1495px;
    border: 1px solid rgba(37, 147, 228, 0.5);
    box-shadow: 0px 0px 8.8px 3px rgba(126, 230, 246, 0.2) inset;
    margin: 10px auto;
    padding: 15px;
    background-color: #0b172c;

    .flows_body_right_top {
        margin: 10px;
    }

    .flows_body_right_tanks {
        display: flex;

        .tank_single {
            width: 245px;
            // height: 235px;
            display: flex;
            padding: 4px;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            border-radius: 5px;
            border: 1px solid #72E0FF;
            margin: 10px;

            .flow_single_title {
                display: flex;
                padding: 4px 8px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                align-self: stretch;
                // color: aliceblue;
                color: #76E1FF;
                font-size: 21px;
                font-weight: bold;
                // text-align: center;
                border-radius: 0px 0px 5px 5px;
                background: #192846;
            }

            .flow_single_body {
                display: flex;
                color: aliceblue;
                align-items: center;
                // justify-content: space-between;
                width: -webkit-fill-available;

                .body_name {
                    min-width: 90px;
                    color: #008BB1;
                    font-family: OPPOSans;
                    font-size: 17px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    margin-left: 10px;
                }

                .body_show {
                    display: flex;
                    align-items: center;
                    margin-right: 45px;
                    gap: 5px;

                    .valve {
                        //银色
                        color: #C7D2E0;
                        font-size: 50px !important;
                        position: relative;
                        margin-left: 18px;

                        //风扇旋转
                        @keyframes rotate {
                            from {
                                transform: rotate(0deg);
                            }

                            to {
                                transform: rotate(360deg);
                            }
                        }

                        .fan {
                            color: #bdbb3b;
                            position: absolute;
                            left: 14%;
                            top: 31%;
                            font-size: 36px !important;
                        }

                        //运行
                        .icon_fengshan_run {
                            display: inline-block;
                            /* 让 transform 生效 */
                            animation: rotate 1s linear infinite;
                            color: #2fb31e;
                        }
                    }




                    :deep(.el-switch) {
                        .el-switch__label {
                            color: #FFF;
                        }

                        .el-switch__label.is-active {
                            color: var(--el-color-primary);
                        }

                        .el-switch__core {
                            height: 25px;
                            min-width: 50px;
                        }
                    }

                    .body_show_value {
                        display: flex;
                        width: 82px;
                        padding: 6px 0px;
                        justify-content: center;
                        align-items: flex-start;
                        gap: 10px;
                        border-radius: 3px;
                        border: 1px solid #B8CEE5;
                        // background: #EDF7FF;
                        color: #66ccff;

                        :deep(.el-input--small) {
                            height: 18px;
                            text-align: center;
                        }
                    }

                    .body_show_unit {
                        margin-left: 10px;
                    }
                }
            }
        }
    }

    .flows_body_right_flows {
        :deep(.flow_arrow) {

            .el-progress-bar__outer {
                background-color: transparent !important;
                /* 设置背景透明 */
            }

            .el-progress-bar__inner--striped {
                background-image:
                    linear-gradient(45deg, transparent 50%, #141414 50%),
                    linear-gradient(135deg, transparent 50%, #141414 50%) !important;
                background-size: 15px;
            }
        }


        .flows_body_right_content,
        .flows_body_right_tanks {
            margin-top: 50px;
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            align-items: center;

            .just_show {
                height: 100px;
            }

            .flows {
                display: flex;
            }

            .LB_nodata {
                width: 100px;
                display: flex;
                padding: 4px;
                flex-direction: column;
                align-items: center;
                gap: 3px;
                border-radius: 5px;
                border: 1px solid #72E0FF;

                .flow_single_title {
                    display: flex;
                    padding: 4px 8px;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    align-self: stretch;
                    // color: aliceblue;
                    color: #76E1FF;
                    font-size: 21px;
                    font-weight: bold;
                    border-radius: 0px 0px 5px 5px;
                    background: #192846;
                }

                .flow_single_body {
                    display: flex;
                    color: aliceblue;
                    align-items: center;
                    // justify-content: space-between;
                    justify-content: center;
                    width: -webkit-fill-available;

                    .body_name {
                        min-width: 90px;
                        color: #008BB1;
                        font-family: OPPOSans;
                        font-size: 17px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal;
                        margin-left: 10px;
                    }

                    .body_show {
                        display: flex;
                        align-items: center;
                        // margin-right: 45px;
                        gap: 5px;

                        .valve {
                            //银色
                            color: #C7D2E0;
                            font-size: 50px !important;
                            position: relative;
                            // margin-left: 18px;

                            //风扇旋转
                            @keyframes rotate {
                                from {
                                    transform: rotate(0deg);
                                }

                                to {
                                    transform: rotate(360deg);
                                }
                            }

                            .fan {
                                color: #bdbb3b;
                                position: absolute;
                                // left: 32%;
                                // top: 45%;
                                // font-size: 20px !important;
                                left: 14%;
                                top: 31%;
                                font-size: 36px !important;
                            }

                            //运行
                            .icon_fengshan_run {
                                display: inline-block;
                                /* 让 transform 生效 */
                                animation: rotate 1s linear infinite;
                                color: #2fb31e;
                            }
                        }

                        :deep(.el-switch) {
                            .el-switch__label {
                                color: #FFF;
                            }

                            .el-switch__label.is-active {
                                color: var(--el-color-primary);
                            }

                            .el-switch__core {
                                height: 25px;
                                min-width: 50px;
                            }
                        }

                        .body_show_value {
                            display: flex;
                            width: 82px;
                            padding: 6px 0px;
                            justify-content: center;
                            align-items: flex-start;
                            gap: 10px;
                            border-radius: 3px;
                            border: 1px solid #B8CEE5;
                            // background: #EDF7FF;
                            color: #66ccff;
                        }

                        .body_show_unit {
                            margin-left: 10px;
                        }
                    }
                }
            }

        }
    }


}
</style>