<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .card_floor_control {
            user-select: none;
            position: absolute;
            top: 100px;
            right: calc(25% + 10px);
            width: 100px;
            height: 40px;
        }

        .floor_control {
            position: absolute;
            cursor: pointer;
            top: 0px;
            right: 0px;
            width: 100px;
            height: 40px;
            background-color: rgba(7, 27, 60, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            border-radius: 4px;
        }

        .triangle {
            position: relative;
            width: 15px;
            height: 15px;
            margin-left: 15px;
        }

        .triangle:after {
            content: '';
            display: inline-block;
            position: absolute;
            top: 0;
            width: 10px;
            height: 10px;
            border-top: 1px solid #ffffff;
            border-right: 1px solid #ffffff;
            transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
        }

        .all_building_floor {
            position: absolute;
            top: 50px;
            right: 0px;
            flex-direction: column;
        }

        .box_item_bf {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .building_box {
            cursor: pointer;
            padding: 10px 20px;
            background-color: rgba(70, 133, 201, 0.3);
        }

        .building_box:hover {
            background-color: rgba(34, 91, 153, 0.3);
        }

        .floor_box {
            cursor: pointer;
            color: rgb(108, 111, 113);
            --c: rgb(108, 111, 113);
            --n: 4;
            --t: 2px;
            --d: 45deg;
            aspect-ratio: 1;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: rgb(1, 6, 19);
            margin-bottom: 10px;
        }

        .floor_box::after {
            content: "";
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: var(--t);
            background: var(--c);
            -webkit-mask:
                linear-gradient(#0000 0 0) content-box,
                repeating-conic-gradient(from calc(var(--d)/2), #000 0 calc(360deg/var(--n) - var(--d)), #0000 0 calc(360deg/var(--n)));
            -webkit-mask-composite: source-in;
            mask:
                linear-gradient(#0000 0 0) content-box,
                repeating-conic-gradient(from calc(var(--d)/2), #000 0 calc(360deg/var(--n) - var(--d)), #0000 0 calc(360deg/var(--n)));
            mask-composite: intersect;
            /* // animation: rotate 5s linear infinite; */
        }

        .activate_box {
            cursor: pointer;
            color: #fff;
            --c: #fff;
            --n: 4;
            --t: 2px;
            --d: 45deg;
            aspect-ratio: 1;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: rgb(1, 6, 19);
            margin-bottom: 10px;
        }

        .activate_box::after {
            content: "";
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: var(--t);
            background: var(--c);
            -webkit-mask:
                linear-gradient(#0000 0 0) content-box,
                repeating-conic-gradient(from calc(var(--d)/2), #000 0 calc(360deg/var(--n) - var(--d)), #0000 0 calc(360deg/var(--n)));
            -webkit-mask-composite: source-in;
            mask:
                linear-gradient(#0000 0 0) content-box,
                repeating-conic-gradient(from calc(var(--d)/2), #000 0 calc(360deg/var(--n) - var(--d)), #0000 0 calc(360deg/var(--n)));
            mask-composite: intersect;
            animation: rotate 5s linear infinite;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="card_floor_control">
        <div class="floor_control" id="floorControl">全部<span class="triangle"></span></div>
        <!-- <div class="floor_control" @click="switchover">{{ currentItem }}<span class="triangle"></span></div> -->
        <div class="all_building_floor" id="allBuildingFloor">
            <!-- <div class="box_item_bf" :class="currentId == item.id ? 'activate_box' : 'floor_box'"
                v-for="(item, index) in currentData" :key="index" @click="switchoverItem(item)">
                {{ item.title }}
            </div> -->
        </div>
    </div>
    <script>
        let currentId = 'all';
        let currentItem = '全部';
        let showList = false;
        const arrData = [{
            title: '全部',
            id: 'all',
        }, {
            title: 'A栋',
            id: 'A',
            childList: [{
                title: '3F',
                id: 'A3',
            }, {
                title: '2F',
                id: 'A2',
            }, {
                title: '1F',
                id: 'A1',
            }, {
                title: '全部',
                id: 'omn',
            }]
        }, {
            title: 'B栋',
            id: 'B',
            childList: [{
                title: '3F',
                id: 'B3',
            }, {
                title: '2F',
                id: 'B2',
            }, {
                title: '1F',
                id: 'B1',
            }]
        }, {
            title: 'C栋',
            id: 'C',
            childList: [{
                title: '4F',
                id: 'C4',
            }, {
                title: '3F',
                id: 'C3',
            }, {
                title: '2F',
                id: 'C2',
            }, {
                title: '1F',
                id: 'C1',
            }]
        }, {
            title: 'D栋',
            id: 'D',
            childList: [{
                title: '2F',
                id: 'D2',
            }, {
                title: '1F',
                id: 'D1',
            }]
        }]
        const floorControl = document.getElementById('floorControl');
        const allBuildingFloor = document.getElementById('allBuildingFloor');
        floorControl.addEventListener('click', () => {
            currentId = 'all';
            allBuildingFloor.style.display = 'flex';
            renderList(true);
        });
        let listData = [];
        // 渲染列表区域  
        function renderList(flag) {
            allBuildingFloor.innerHTML = '';
            if (currentId === 'all') {
                currentTitle = '全部';
                floorControl.childNodes[0].nodeValue = currentTitle;
                listData = arrData;
            } else {
                if (flag) {
                    listData = arrData;
                } else {
                    function find(list, id) {
                        return list && id ? (function filter(arr) {
                            for (var i = 0; i < arr.length; ++i) {
                                var itemId = arr[i].id;
                                var children = arr[i].childList || [];
                                var _ret = arr[i];
                                if (id === itemId) {
                                    return _ret;
                                } else if (children.length) {
                                    _ret = filter(children);
                                    if (_ret) return _ret;
                                }
                            }
                            return null;
                        })(list) : null;
                    }
                    const currentBuilding = find(arrData, currentId);
                    if (currentBuilding && currentBuilding.childList) {
                        listData = currentBuilding.childList;
                    }
                }
            }
            let allFlag = true
            listData.forEach(item => {
                const div = document.createElement('div');
                div.classList.add('box_item_bf');
                if (item.id === currentId) {
                    allFlag = false
                    div.classList.add('activate_box');

                } else {
                    if (allFlag && item.id == 'omn') {
                        div.classList.add('activate_box');
                    }
                    console.log(allFlag, item.id, 2);

                    div.classList.add('floor_box');
                }
                div.textContent = item.title;
                div.addEventListener('click', (e) => {
                    e.stopPropagation();  // 阻止事件冒泡，避免触发外层点击  
                    switchoverItem(item);
                });
                allBuildingFloor.appendChild(div);
            });
        }
        // 切换选中项  
        function switchoverItem(item) {
            // 如果点了目前已经选中的项，列表隐藏  
            if (item.id === currentId) {
                showList = false;
                return;
            }
            currentId = item.id;
            currentTitle = item.title;
            floorControl.childNodes[0].nodeValue = currentTitle;
            if (currentId === 'all') {
                renderList(false);
            } else {
                const isTopLevel = arrData.some(it => it.id === currentId);
                if (isTopLevel) {
                    renderList(false);
                } else {
                    renderList(false);
                }
            }
        }
    </script>
</body>

</html>