<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 }}
                    <el-button size="small" @click.stop="addToColumn3(item)" type="success">加入</el-button>                    
                </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 }}                    
                    <el-button size="small" @click.stop="addToColumn3(subItem)" type="success">加入</el-button>
                </div>
            </div>
        </el-col>

        <!-- 第三列：展示加入的项 -->
        <el-col :span="8">
            Column 3
            <div class="list column3">
                <div v-for="(item, index) in column3Items"
                     :key="index"
                     class="list-item">
                    {{ item }}
                    
                    <el-button @click.stop="removeFromColumn3(index)" size="small" type="warning">刪除</el-button>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

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

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

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

    const column3Items = ref([]); // 用来存储添加到 Column 3 的项

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

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

    // 将项目添加到 Column 3
    const addToColumn3 = (item) => {
        column3Items.value.push(item);
    };

    // 从 Column 3 删除项目
    const removeFromColumn3 = (index) => {
        column3Items.value.splice(index, 1);
    };
</script>

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

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

        .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;
        }



    /* Column 3 的样式，限制高度并开启滚动 */
    .column3 {
        max-height: 300px; /* 限制最大高度 */
        overflow-y: auto; /* 启用垂直滚动条 */
    }
</style>