<!-- e:\JavaProject\DCS\dcs\src\components\dcs\EqSelectedComponent.vue -->
<template>
    <div>
        <img v-if="!showTable" :src="iconImg" class="image1 icon_pos" @click="handleTableShow">
        <div v-if="showTable" class="flex-col eqData_left">
            <div class="eqData_left_title">
                <img :src="iconImg" class="image1" @click="handleTableClose">
                <span class="eqData_left_title_text">设备列表</span>
            </div>
            <el-col>
                <el-menu :default-active="activeIndex" :unique-opened="true"
                    class="el-menu-vertical-demo eqData_left_content" background-color="transparent"
                    text-color="#0369A1" active-text-color="#18181B" @open="handleOpen" @close="handleClose"
                    @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title">
                            <span>K生产线</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(item, idx) in menuItems1" :key="idx" :index="item.index"
                                :class="{ 'custom-active-class': isActive(item.index) }">
                                {{ item.label }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                            <span>L生产线</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(item, idx) in menuItems2" :key="idx" :index="item.index"
                                :class="{ 'custom-active-class': isActive(item.index) }">
                                {{ item.label }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                </el-menu>
            </el-col>
        </div>
    </div>
</template>

<script>
import '@/css/dcs/style.css'
import config from '@/myConfig/config'

export default {
    name: 'EqSelectedComponent',
    data() {
        return {
            iconImg: require('@/assets/dcs/eqData/icon.svg'), // 图标
            activeIndex: config.eqBucketNames[0], // 菜单激活项
            menuItems1: [
                { index: config.eqBucketNames[0], label: 'K1组' },
                { index: config.eqBucketNames[1], label: 'K2组' },
                { index: config.eqBucketNames[2], label: 'K3组' },
                { index: config.eqBucketNames[3], label: 'K4组' }
            ],
            menuItems2: [
                { index: config.eqBucketNames[4], label: 'L1组' },
                { index: config.eqBucketNames[5], label: 'L2组' },
                { index: config.eqBucketNames[6], label: 'L3组' },
                { index: config.eqBucketNames[7], label: 'L4组' }
            ],
            showTable: true, // 是否显示表格
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 左侧菜单项点击时触发
        handleSelect(key, keyPath) {
            console.log('------------', key, keyPath);
            this.activeIndex = key;
            this.$emit('select-item', key); // 向父组件发送 key 值
        },
        isActive(index) {
            return this.activeIndex === index;
        },
        // 左侧选择器显示/隐藏
        handleTableClose() {
            this.showTable = false;
        },
        handleTableShow() {
            this.showTable = true;
        },
    },
};
</script>

<style lang="scss">
.icon_pos {
    position: absolute;
    left: 2%;
}

.eqData_left {
    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;

    .eqData_left_title {
        display: flex;
        height: var(--height-h-14, 56px);
        padding: 0px var(--spacing-6, 24px);
        align-items: center;
        gap: var(--spacing-2, 8px);
        flex-shrink: 0;
        align-self: stretch;

        .image1 {
            width: 24px;
            height: 24px;
        }

        .eqData_left_title_text {
            color: var(--tailwind-colors-sky-500, #0EA5E9);
            font-family: "PingFang SC";
            font-size: var(--typography-base-sizes-small-font-size, 14px);
            font-style: normal;
            font-weight: 400;
            line-height: var(--typography-base-sizes-small-line-height, 20px);
        }
    }

    .eqData_left_content {
        padding: 0px var(--spacing-4, 16px);
        border: none;
        flex: 1 0 0;
        align-self: stretch;
        cursor: default !important;

        .el-menu-item:hover,
        .el-submenu__title:hover {
            background-color: transparent !important;
        }

        .el-menu {
            padding: 0 18px;
        }

        .el-submenu__title span {
            padding-left: 20px;
        }

        .el-menu-item {
            transition: none !important;
        }

        .el-menu-item:hover {
            border-radius: var(--border-radius-lg, 8px) !important;
            background: #9DF !important;
        }

        .custom-active-class {
            border-radius: var(--border-radius-lg, 8px) !important;
            background: #9DF !important;
        }
    }
}
</style>
