<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">
                <!-- 模糊搜尋框 -->
                <el-input v-model="searchQuery"
                          placeholder="搜尋子項目..."
                          size="small"
                          clearable
                          style="margin-bottom: 10px;"></el-input>

                <!-- 過濾後的子級清單 -->
                <div v-for="(subItem, subIndex) in filteredSubItems"
                     :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, computed } from 'vue';

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

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

    const column3Items = ref([]); // 用來存储添加到 Column 3 的項目

    // 過濾子項目根據搜尋內容
    const filteredSubItems = computed(() => {
        if (activeIndex.value === null) return [];
        const currentSubItems = subItems.value[activeIndex.value] || [];
        return currentSubItems.filter((item) =>
            item.toLowerCase().includes(searchQuery.value.toLowerCase())
        );
    });

    // 選擇父級菜單
    const setActive = (index) => {
        activeIndex.value = index;
        activeIndex2.value = null; // 重置子級選項
        searchQuery.value = ''; // 清空搜尋框
    };

    // 選擇子級菜單
    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-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>