mi-home-web/scripts/main.js

// 页面切换功能
function showPage(pageId) {
    // 隐藏所有页面
    const pages = document.querySelectorAll('.container');
    pages.forEach(page => {
        page.classList.add('hidden');
    });
    
    // 显示目标页面
    const targetPage = document.getElementById(pageId);
    if (targetPage) {
        targetPage.classList.remove('hidden');
    }
    
    // 更新底部导航状态
    updateBottomNav(pageId);
}

// 更新底部导航状态
function updateBottomNav(activePageId) {
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
        item.classList.remove('active');
    });
    
    // 根据页面ID设置对应的导航项为活跃状态
    const pageNavMap = {
        'home-page': 0,
        'smart-page': 1,
        'mall-page': 2,
        'profile-page': 4
    };
    
    const activeIndex = pageNavMap[activePageId];
    if (activeIndex !== undefined) {
        const currentPageNavItems = document.querySelectorAll(`#${activePageId} .nav-item`);
        if (currentPageNavItems[activeIndex]) {
            currentPageNavItems[activeIndex].classList.add('active');
        }
    }
}

// 设备控制功能
function toggleDevice(deviceElement) {
    deviceElement.classList.toggle('active');
    
    // 模拟设备状态切换
    const statusElement = deviceElement.querySelector('.device-status');
    const deviceName = deviceElement.querySelector('.device-name').textContent;
    
    if (deviceElement.classList.contains('active')) {
        // 保持原有状态信息，只更新开启状态
        const originalStatus = statusElement.textContent;
        if (!originalStatus.includes('已开启')) {
            statusElement.textContent = originalStatus.replace('设备离线', '已开启');
        }
        showToast(`${deviceName} 已开启`);
    } else {
        // 恢复为离线状态
        const originalStatus = statusElement.textContent;
        statusElement.textContent = originalStatus.replace('已开启', '设备离线');
        showToast(`${deviceName} 已关闭`);
    }
}

// 场景执行功能
function executeScene(sceneName) {
    // 显示执行提示
    showToast(`正在执行"${sceneName}"场景...`);
    
    // 模拟场景执行
    setTimeout(() => {
        showToast(`"${sceneName}"场景执行完成`);
    }, 2000);
}

// 显示提示信息
function showToast(message) {
    // 创建提示元素
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.textContent = message;
    
    // 添加样式
    toast.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 14px;
        z-index: 9999;
        animation: fadeInOut 3s ease-in-out;
    `;
    
    // 添加动画样式
    if (!document.querySelector('#toast-styles')) {
        const style = document.createElement('style');
        style.id = 'toast-styles';
        style.textContent = `
            @keyframes fadeInOut {
                0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
                20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            }
        `;
        document.head.appendChild(style);
    }
    
    document.body.appendChild(toast);
    
    // 3秒后移除提示
    setTimeout(() => {
        if (toast.parentNode) {
            toast.parentNode.removeChild(toast);
        }
    }, 3000);
}

// 房间切换功能
function switchRoom(roomName) {
    // 更新房间标签状态
    const roomTabs = document.querySelectorAll('.room-tab');
    roomTabs.forEach(tab => {
        tab.classList.remove('active');
        if (tab.textContent === roomName) {
            tab.classList.add('active');
        }
    });
    
    // 模拟房间设备过滤 - 显示/隐藏相关设备
    const deviceCards = document.querySelectorAll('.device-card');
    deviceCards.forEach(card => {
        const deviceStatus = card.querySelector('.device-status').textContent;
        
        if (roomName === '全屋') {
            // 显示所有设备
            card.style.display = 'flex';
        } else {
            // 根据房间名称过滤设备
            if (deviceStatus.includes(roomName)) {
                card.style.display = 'flex';
            } else {
                card.style.display = 'none';
            }
        }
    });
    
    showToast(`已切换到"${roomName}"`);
}

// 智能场景标签切换
function switchSmartTab(tabName) {
    const tabs = document.querySelectorAll('.tab');
    tabs.forEach(tab => {
        tab.classList.remove('active');
        if (tab.textContent === tabName) {
            tab.classList.add('active');
        }
    });
    
    // 根据标签显示不同内容
    if (tabName === '自定义') {
        showCustomScenes();
    } else {
        showRecommendedScenes();
    }
}

// 显示推荐场景
function showRecommendedScenes() {
    // 这里可以动态加载推荐场景
    console.log('显示推荐场景');
}

// 显示自定义场景
function showCustomScenes() {
    const sceneSection = document.querySelector('.scene-section');
    if (sceneSection) {
        sceneSection.innerHTML = `
            <div class="scene-item">
                <div class="scene-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-plus"></i>
                </div>
                <div class="scene-info">
                    <div class="scene-name">添加自定义场景</div>
                    <div class="scene-desc">创建个性化的智能场景</div>
                </div>
                <button class="scene-button" onclick="showToast('功能开发中...')">创建</button>
            </div>
            <div class="scene-item">
                <div class="scene-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <div class="scene-info">
                    <div class="scene-name">批量控制</div>
                    <div class="scene-desc">空调关空调</div>
                </div>
                <button class="scene-button" onclick="executeScene('批量控制')">执行</button>
            </div>
            <div class="scene-item">
                <div class="scene-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                    <i class="fas fa-bell"></i>
                </div>
                <div class="scene-info">
                    <div class="scene-name">自动化</div>
                    <div class="scene-desc">进入TP-LINK_9CC6-向手机发送通知</div>
                </div>
                <button class="scene-button" onclick="executeScene('自动化')">执行</button>
            </div>
        `;
    }
}

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    // 绑定设备卡片点击事件
    const deviceCards = document.querySelectorAll('.device-card');
    deviceCards.forEach(card => {
        card.addEventListener('click', function() {
            toggleDevice(this);
        });
    });
    
    // 绑定场景按钮点击事件
    const sceneButtons = document.querySelectorAll('.scene-button');
    sceneButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const sceneName = this.parentElement.querySelector('.scene-name').textContent;
            executeScene(sceneName);
        });
    });
    
    // 绑定房间标签点击事件
    const roomTabs = document.querySelectorAll('.room-tab');
    roomTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            switchRoom(this.textContent);
        });
    });
    
    // 绑定智能场景标签点击事件
    const smartTabs = document.querySelectorAll('.tab');
    smartTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            switchSmartTab(this.textContent);
        });
    });
    
    // 底部导航切换
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
        item.addEventListener('click', () => {
            const targetPage = item.dataset.page;
            
            // 特殊处理商城页面，显示外部链接
            if (targetPage === 'mall') {
                showPage('mall-page-external');
            } else {
                showPage(targetPage);
            }
            
            // 更新导航状态
            navItems.forEach(nav => nav.classList.remove('active'));
            item.classList.add('active');
        });
    });
    
    // 绑定菜单项点击事件
    const menuItems = document.querySelectorAll('.menu-item');
    menuItems.forEach(item => {
        item.addEventListener('click', function() {
            const menuName = this.querySelector('span').textContent;
            showToast(`打开"${menuName}"功能`);
        });
    });
    
    // 模拟实时数据更新
    setInterval(updateSensorData, 30000); // 每30秒更新一次传感器数据
});

// 更新传感器数据
function updateSensorData() {
    const tempDisplays = document.querySelectorAll('.temp-display');
    tempDisplays.forEach(display => {
        const currentTemp = parseFloat(display.textContent);
        const newTemp = (currentTemp + (Math.random() - 0.5) * 2).toFixed(1);
        display.textContent = newTemp + '°';
    });
    
    const humidityDisplays = document.querySelectorAll('.humidity-display');
    humidityDisplays.forEach(display => {
        const currentHumidity = parseInt(display.textContent);
        const newHumidity = Math.max(30, Math.min(70, currentHumidity + Math.floor((Math.random() - 0.5) * 10)));
        display.textContent = newHumidity + '%';
    });
}

// 添加触摸反馈
function addTouchFeedback() {
    const interactiveElements = document.querySelectorAll('.device-card, .scene-item, .menu-item, .nav-item');
    
    interactiveElements.forEach(element => {
        element.addEventListener('touchstart', function() {
            this.style.transform = 'scale(0.95)';
            this.style.transition = 'transform 0.1s';
        });
        
        element.addEventListener('touchend', function() {
            this.style.transform = 'scale(1)';
        });
        
        element.addEventListener('touchcancel', function() {
            this.style.transform = 'scale(1)';
        });
    });
}

// 在页面加载完成后添加触摸反馈
document.addEventListener('DOMContentLoaded', addTouchFeedback);

// 导出函数供HTML使用
window.showPage = showPage;
window.executeScene = executeScene;
window.toggleDevice = toggleDevice;
window.switchRoom = switchRoom;
window.switchSmartTab = switchSmartTab;