<template>
    <el-cascader v-model="selectedValue"
                 :options="cascaderOptions"
                 placeholder="請選擇"
                 @change="handleCascaderChange"
                 >
    </el-cascader>
    <div>
        選擇內容:{{selectedValue}}
        <br>
        選中值: {{lastSelected}}
        <br>                          
        選中值的 Label : {{lastSelectedLabel}}
    </div>
</template>

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

    // 定義兩個學區的級聯數據
    const cascaderOptions = ref([
        {
            value: 'district1',
            label: '台北學區',
            children: [
                { value: 'school-A', label: '台灣大學' },
                { value: 'school-B', label: '清華大學' }
            ]
        },
        {
            value: 'district2',
            label: '桃園學區',
            children: [
                { value: 'school-C', label: '國立中央大學' },
                { value: 'school-D', label: '中原大學' }
            ]
        }        ,
        {
            value: 'district3',
            label: '台中學區',
            children: [
                { value: 'school-E', label: '東每大學' },
                { value: 'school-F', label: '逢甲大學' }
            ]
        }
    ]);

    const selectedValue = ref([]);
    const lastSelected = ref("");

    // 當選擇發生改變時的處理
    const handleCascaderChange = (value) => {
        console.log('選擇結果:', value);

        // 拆解並取得最後選中的值
        lastSelected.value = value[value.length - 1];
        console.log('最後選中的值:', lastSelected.value);

        // 更新最後選中的 `label`
        lastSelectedLabel.value = findLabel(value, cascaderOptions.value);

        console.log('最後選中的 `label`:', lastSelectedLabel.value);

    };

    // 最後選中的 `label`
    const lastSelectedLabel = ref('');

    // 遍歷查找 `label` 的輔助函數
    const findLabel = (value, options) => {
        for (const option of options) {
            if (option.value === value[0]) {
                if (value.length === 1) {
                    return option.label; // 當到達最後一層時，返回 `label`
                }
                return findLabel(value.slice(1), option.children); // 繼續往下一層遞迴
            }
        }
        return '';
    };

</script>