
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面切换示例</title>
    <script>
    window.difyChatbotConfig = {
    token: 'lijvRv14EYBUUllM',
    baseUrl: 'https://172.20.0.145'
    }
    </script>
    <script
    src="https://172.20.0.145/embed.min.js"
    id="lijvRv14EYBUUllM"
    defer>
    </script>
    <style>
    #dify-chatbot-bubble-button {
        background-color: #1C64F2 !important;
    }
    #dify-chatbot-bubble-window {
        width: 580px !important;
        height: 40rem !important;
    }
        /* 隐藏按钮的样式 */
        .hidden-buttons {
    padding-left: 4px;
    position: absolute;
    z-index: 999999;
}
        /* 显示按钮的样式 */
        .show-buttons {
            display: block;
        }
        /* 页面内容的样式 */
        .page {
            display: none;
        }
        .active {
            display: block;
        }
		
.hidden-buttons button {
    cursor: pointer;
    width: 52px;
    height: 29px;
    opacity: 0.01;
}
    </style>
</head>
<body>

    <!-- 隐藏的按钮组 -->
    <div id="buttonGroup" class="hidden-buttons">
        <button onclick="showPage(0)">页面0</button>
        <button onclick="showPage(1)">页面1</button>
        <button onclick="showPage(2)" style="    width: 72px;">页面2</button>
        <button onclick="showPage(3)" style="    width: 72px;">页面3</button>
        <button onclick="showPage(4)" style="    width: 66px;">页面4</button>
        <button onclick="showPage(5)" style="    width: 62px;">页面5</button>
        <button onclick="showPage(6)" style="    width: 70px;">页面6</button>
        <button onclick="showPage(7)" style="    width: 76px;">页面7</button>
        <button onclick="showPage(8)" style="    width: 77px;">页面8</button>
    </div>

    <!-- 页面内容 -->
    <div id="page1" class="page active">
        <img src="/static/主页.png" alt="页面1">
    </div>
    <div id="page2" class="page">
        <img src="/static/工程信息.png" alt="页面2">
    </div>
    <div id="page3" class="page">
        <img src="/static/取费设置.png" alt="页面3">
    </div>
    <div id="page4" class="page">
        <img src="/static/组合件.png" alt="页面4">
    </div>
    <div id="page5" class="page">
        <img src="/static/工程量.png" alt="页面5">
    </div>
    <div id="page6" class="page">
        <img src="/static/材机分析.png" alt="页面6">
    </div>
    <div id="page7" class="page">
        <img src="/static/工程费用.png" alt="页面7">
    </div>
    <div id="page8" class="page">
        <img src="/static/报表输出.png" alt="页面8">
    </div>

    <script>
        // 显示页面的函数
        function showPage(pageNumber) {
            // 处理清空JSON的特殊情况
            if (pageNumber === 0) {
                // 清空JSON但不改变当前页面显示
                fetch('/clear_json')
                    .then(response => response.json())
                    .then(data => {
                        console.log('JSON已清空');
                    })
                    .catch(error => {
                        console.error('清空JSON失败:', error);
                    });
                return; // 直接返回，不执行后续代码
            }
            
            // 隐藏所有页面
            var pages = document.querySelectorAll('.page');
            pages.forEach(function(page) {
                page.classList.remove('active');
            });

            // 显示指定页面
            var pageToShow = document.getElementById('page' + pageNumber);
            pageToShow.classList.add('active');
            
            // 获取页面标题并更新当前界面
            var pageTitle = '';
            switch(pageNumber) {
                case 1: pageTitle = '主页'; break;
                case 2: pageTitle = '工程信息'; break;
                case 3: pageTitle = '取费设置'; break;
                case 4: pageTitle = '组合件'; break;
                case 5: pageTitle = '工程量'; break;
                case 6: pageTitle = '材机分析'; break;
                case 7: pageTitle = '工程费用'; break;
                case 8: pageTitle = '报表输出'; break;
            }
            
            // 调用接口更新当前界面
            if(pageTitle) {
                fetch('/get_current_page?title=' + encodeURIComponent(pageTitle))
                    .then(response => response.json())
                    .then(data => {
                        console.log('软件信息:', JSON.stringify(data, null, 2));
                        console.log('当前界面:', data['当前界面']);
                    })
                    .catch(error => {
                        console.error('获取界面名称失败:', error);
                    });
            }
        }

        // 页面加载时显示第一个页面
        window.onload = function() {
            showPage(1);
        };
    </script>
</body>
</html>
    