<template>
    <div> Index : {{ activeIndex }} </div>
    <div> Index2 : {{ activeIndex2 }} </div>

    <el-row style="background-color: #FFFFFF;">
        <!-- 第一列：父级菜单 -->
        <el-col :span="8">
            Column 1
            <div class="list">
                <div v-for="(item, index) in items"
                     :key="index"
                     :class="{'active': activeIndex === index}"
                     class="list-item"
                     @click="setActive(index)">
                    {{ item }}
                </div>
            </div>
        </el-col>

        <!-- 第二列：子级菜单，只有选择了父级菜单后才显示 -->
        <el-col :span="8">
            Column 2
            <!-- 子级菜单 (仅在选中父级菜单时显示) -->
            <div v-if="activeIndex !== null" class="list">
                <div v-for="(subItem, subIndex) in subItems[activeIndex]"
                     :key="subIndex"
                     :class="{'active': activeIndex2 === subIndex}"
                     class="list-item sub-item"
                     @click="setActive2(subIndex)">
                    {{ subItem }}
                </div>
            </div>
        </el-col>

        <el-col :span="8">Column 3</el-col>
    </el-row>
</template>

<script setup>
    import { ref } from 'vue';

    const items = ref(['項目一', '項目二', '項目三', '項目四']);
    const activeIndex = ref(null); // 记录选中的父级菜单
    const activeIndex2 = ref(null); // 记录选中的子级菜单

    // 假设每个父级菜单项有对应的子级菜单项
    const subItems = ref([
        ['子項一1', '子項一2', '子項一3'],
        ['子項二1', '子項二2', '子項二3'],
        ['子項三1', '子項三2', '子項三3'],
        ['子項四1', '子項四2', '子項四3'],
    ]);

    // 选择父级菜单时，更新选中的父级菜单，并隐藏子级菜单
    const setActive = (index) => {
        activeIndex.value = index;
        activeIndex2.value = null; // 重置子级菜单选项
    };

    // 选择子级菜单时，更新选中的子级菜单
    const setActive2 = (index) => {
        activeIndex2.value = index;
    };
</script>

<style scoped>
    .list {
        width: 200px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    .list-item {
        height: 50px; /* 每个菜单项的高度 */
        line-height: 50px; /* 垂直居中 */
        padding: 0 10px; /* 水平内边距 */
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .list-item:hover {
            background-color: #f0f0f0;
        }

        .list-item.active {
            background-color: #409eff;
            color: white;
        }

    .sub-list {
        margin-top: 10px;
        padding-left: 20px; /* 子级菜单的缩进 */
        border-left: 2px solid #ccc; /* 左侧的分隔线 */
    }

    .sub-item {
        height: 40px; /* 子级菜单项的高度 */
        line-height: 40px;
        padding: 0 10px;
        cursor: pointer;
    }

        .sub-item:hover {
            background-color: #e0f0ff;
        }

        .sub-item.active {
            background-color: #409eff;
            color: white;
        }
</style>