<template>
    <div class="dcs">
        <!-- <div class="blur-background" /> -->
        <div class="eqData_title">
            <div class="eqData_title_center"> {{ menuArr[eqStore.flowPageIndex] }} </div>
        </div>
        <div class="flows_body">
            <!-- 左侧选择器 -->
            <div class="flows_body_left">
                <div class="left_selector">
                    <h5 class="mb-2">流程选择</h5>
                    <el-menu active-text-color="#ffd04b" background-color="#0b172c" class="el-menu-vertical-demo"
                        :default-active="eqStore.flowPageIndex" text-color="#fff" @select="handleSelect">
                        <el-menu-item index="0">
                            <el-icon><icon-menu /></el-icon>
                            <span>{{ menuArr[0] }}</span>
                        </el-menu-item>
                        <el-menu-item index="1">
                            <el-icon><icon-menu /></el-icon>
                            <span>{{ menuArr[1] }}</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </div>
            <router-view />
        </div>
    </div>
</template>

<script setup>
import {
    Menu as IconMenu,
} from '@element-plus/icons-vue'
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { wsClient } from '@/utils/ws/websocket.js';
import { getEquipmentIndexList } from '@/api/dcs/flowControl';
import useEqStore from '@/store/modules/dcs';
const eqStore = useEqStore();
const router = useRouter()

onUnmounted(() => {
    // 组件销毁时关闭 WebSocket
    wsClient.close();
});
onMounted(() => {
    getEquipmentIndexList().then(res => {
        eqStore.setEqIndexArr(res.data);
    })
})

const menuArr = ['M1工艺流程', 'M2工艺流程']
function handleSelect(key, keyPath) {
    eqStore.setFlowPageIndex(key);
    // console.log('handleSelect', eqStore.flowPageIndex, typeof eqStore.flowPageIndex)
    switch (key) {
        case "0":
            console.log('M1工艺流程')
            router.push({ name: 'M1Flow' })
            break;
        case "1":
            console.log('M2工艺流程')
            router.push({ name: 'M2Flow' })
            break;
        default:
            break;
    }
};


</script>

<style lang="scss" scoped>
#app {
    width: 1920px;
    height: 1080px;

    .dcs {
        width: 100%;
        height: 100%;
        min-width: fit-content;
        min-height: max-content;
        background-color: #141414;
    }

    .eqData_title {
        background-image: url('@/assets/dcs/header.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 1919.5px;
        height: 74.5px;
        flex-shrink: 0;
        position: relative;

        .eqData_title_center {
            font-family: PangMenZhengDao;
            font-size: 36px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 7.2px;
            background: linear-gradient(180deg, #FFF 32.33%, #00ABFF 130.49%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            // margin-top: 10px;
        }

    }

    .flows_body {
        display: flex;

        .flows_body_left {
            margin-left: 45px;
            width: 270px;
            height: 755px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid rgba(37, 147, 228, 0.50);
            opacity: 0.9;
            background: rgba(9, 23, 50, 0.90);
            box-shadow: 0px 0px 8.8px 3px rgba(126, 230, 246, 0.20) inset;

            .left_selector {
                h5 {
                    color: cyan;
                    text-align: center;
                    font-size: larger;
                }

                :deep(.el-menu) {
                    border-right: none !important;
                    background-color: none !important;
                }
            }
        }


    }
}
</style>