<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热搜榜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        .container {
            display: grid;
            grid-template-rows: 1fr 50px;
            width: 100%;
            height: 100%;
        }

        .iframe-container,
        iframe {
            width: 100%;
            height: 100%;
        }

        #float-container.bt {
            bottom: 0;
            right: 0;
            left: 0;
            height: 100%;
            background-color: #fdfdfd;
            box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%);
            display: grid;
            /* grid-template-columns: repeat(3, 1fr); */
            place-items: center;
        }

        #float-container.bt .navbar-item {
            text-align: center;
            cursor: pointer;
            width: 80px;
            user-select: none;
        }

        #float-container.bt .navbar-item .navbar-image {
            width: 22px;
            height: 22px;
            filter: grayscale(1);
        }

        #float-container.bt .navbar-item .navbar-title {
            font-size: 11px;
            color: #666;
            margin-top: -3px;
        }

        #float-container.bt .navbar-item.active .navbar-image {
            filter: initial;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="iframe-container">
            <!-- <iframe id="main-iframe" src="html/weibo.html" frameborder="0"></iframe> -->
        </div>
        <div id="float-container" class="bt">
            <!-- <div class="navbar-item" targetPage="weibo_hotband">
                <img class="navbar-image" src="./html/assets/image/weibo.svg" />
                <p class="navbar-title">微博热搜</p>
            </div> -->
        </div>
    </div>
    <script>
        let pages = {
            'weibo_hotband': {
                title: '微博热搜',
                // url: 'html/weibo_hotband.html',
                icon: './html/assets/image/weibo.svg',
                icon_scale: 1,
            },
            'bilibili_hotband': {
                title: 'B站热搜',
                // url: 'html/bilibili_hotband.html',
                icon: './html/assets/image/bilibili.svg',
                icon_scale: 0.87,
            },
            'bilibili_rank': {
                title: 'B站排行',
                // url: 'html/bilibili_rank.html',
                icon: './html/assets/image/icon_rank.png',
                icon_scale: 0.87,
            },
        };
        // 渲染导航栏
        for (let key in pages) {
            let page = pages[key];
            let navbarItem = document.createElement('div');
            navbarItem.className = 'navbar-item';
            navbarItem.setAttribute('targetPage', key);
            navbarItem.innerHTML = `
                <img class="navbar-image" src="${page.icon}" ${page.icon_scale != 1 ? `style="transform: scale(${page.icon_scale});"` : ''} />
                <p class="navbar-title"> ${page.title}</p>
            `;
            document.getElementById('float-container').style.gridTemplateColumns = `repeat(${Object.keys(pages).length}, 1fr)`;
            document.getElementById('float-container').appendChild(navbarItem);
        }
    </script>
    <script>
        let navbarItems = document.querySelectorAll('.navbar-item');
        let iframeContainer = document.querySelector('#iframe-container');
        let iframe = document.querySelector('#main-iframe');
        navbarItems.forEach(item => {
            item.addEventListener('click', () => {
                // 已选中项再次点击,不执行操作
                if (item.classList.contains('active')) return;

                navbarItems.forEach(item => {
                    item.classList.remove('active');
                });
                item.classList.add('active');

                let target = item.getAttribute('targetPage');
                switchPage(target, true);
            });
        });

        // 切换页面
        // 传入参数:目标页面,是否更新网址
        function switchPage(target, pushState) {
            let url = `html/${target}.html`;
            if (pushState) {
                // 更新url但不刷新页面
                history.pushState(null, null, `./index.html?target=${target}`);
            }

            // iframe 进入新页面
            if (iframe)
                iframe.remove();
            iframe = document.createElement('iframe');
            iframe.id = "main-iframe";
            iframe.src = url;
            iframe.setAttribute('frameborder', '0');
            iframeContainer.appendChild(iframe);

            iframe.addEventListener('load', function (event) {
                console.log(event);
                document.title = document.getElementById("main-iframe").contentWindow.document.title + " | 热搜榜单"
            }, true);
        }

        // 根据 URL 参数切换页面
        function locationToPageByUrlParam() {
            // 获取 url 中的 target 参数
            let url = new URL(window.location.href);
            let target = url.searchParams.get('target');
            if (!Object.keys(pages).includes(target)) {
                target = 'weibo_hotband';
                history.replaceState(null, null, `./index.html?target=${target}`);
            }
            // 切换页面
            switchPage(target, false);
            // 更新下方导航栏选中状态
            let oldActive = document.querySelector('.active')
            if (oldActive) oldActive.classList.remove('active');
            navbarItems.forEach(item => {
                if (item.getAttribute('targetPage') === target) {
                    item.classList.add('active');
                }
            });
        }

        window.addEventListener("popstate", function (e) {
            console.log("浏览器返回事件", e);
            locationToPageByUrlParam();
        }, false);

        locationToPageByUrlParam();
    </script>
</body>

</html>