pageStateStore.js

import { defineStore } from 'pinia';

// SessionStorage键名常量
const STORAGE_KEY = 'drplayer_page_states';

// 从SessionStorage加载状态
const loadFromStorage = () => {
    try {
        const stored = sessionStorage.getItem(STORAGE_KEY);
        if (stored) {
            const parsed = JSON.parse(stored);
            console.log('🔄 [存储] 从SessionStorage加载页面状态:', parsed);
            return parsed;
        }
    } catch (error) {
        console.error('从SessionStorage加载页面状态失败:', error);
    }
    
    // 返回默认状态
    return {
        // Video页面状态
        video: {
            activeKey: '',
            currentPage: 1,
            videos: [],
            hasMore: true,
            loading: false,
            scrollPosition: 0,
            lastUpdateTime: null
        },
        // Home页面状态
        home: {
            scrollPosition: 0,
            lastUpdateTime: null
        },
        // 搜索结果状态
        search: {
            keyword: '',
            currentPage: 1,
            videos: [],
            hasMore: true,
            loading: false,
            scrollPosition: 0,
            lastUpdateTime: null
        }
    };
};

// 保存到SessionStorage
const saveToStorage = (pageStates) => {
    try {
        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(pageStates));
        console.log('🔄 [存储] 保存页面状态到SessionStorage:', pageStates);
    } catch (error) {
        console.error('保存页面状态到SessionStorage失败:', error);
    }
};

export const usePageStateStore = defineStore('pageState', {
    state: () => ({
        // 保存各个页面的状态，从SessionStorage初始化
        pageStates: loadFromStorage()
    }),
    
    actions: {
        // 保存页面状态
        savePageState(pageName, state) {
            if (!this.pageStates[pageName]) {
                this.pageStates[pageName] = {};
            }
            
            // 合并状态，保留时间戳
            this.pageStates[pageName] = {
                ...this.pageStates[pageName],
                ...state,
                lastUpdateTime: Date.now()
            };
            
            // 立即保存到SessionStorage
            saveToStorage(this.pageStates);
            
            console.log(`🔄 [状态保存] 页面状态 [${pageName}]:`, this.pageStates[pageName]);
        },
        
        // 获取页面状态
        getPageState(pageName) {
            const state = this.pageStates[pageName];
            console.log(`获取页面状态 [${pageName}]:`, state);
            return state || {};
        },
        
        // 清除页面状态
        clearPageState(pageName) {
            if (this.pageStates[pageName]) {
                this.pageStates[pageName] = {};
                
                // 同步到SessionStorage
                saveToStorage(this.pageStates);
                
                console.log(`🔄 [状态清除] 页面状态 [${pageName}]`);
            }
        },
        
        // 检查状态是否过期（超过30分钟）
        isStateExpired(pageName, maxAge = 30 * 60 * 1000) {
            const state = this.pageStates[pageName];
            if (!state || !state.lastUpdateTime) {
                return true;
            }
            return Date.now() - state.lastUpdateTime > maxAge;
        },
        
        // 保存Video页面特定状态
        saveVideoState(activeKey, currentPage, videos, hasMore, loading, scrollPosition = 0) {
            this.savePageState('video', {
                activeKey,
                currentPage,
                videos: [...videos], // 深拷贝数组
                hasMore,
                loading,
                scrollPosition
            });
        },
        
        // 保存搜索状态
        saveSearchState(keyword, currentPage, videos, hasMore, loading, scrollPosition = 0) {
            this.savePageState('search', {
                keyword,
                currentPage,
                videos: [...videos], // 深拷贝数组
                hasMore,
                loading,
                scrollPosition
            });
        },
        
        // 保存滚动位置
        saveScrollPosition(pageName, position) {
            if (this.pageStates[pageName]) {
                this.pageStates[pageName].scrollPosition = position;
                this.pageStates[pageName].lastUpdateTime = Date.now();
                
                // 同步到SessionStorage
                saveToStorage(this.pageStates);
            }
        },
        
        // 获取滚动位置
        getScrollPosition(pageName) {
            const state = this.pageStates[pageName];
            return state ? state.scrollPosition || 0 : 0;
        },
        
        // 重新从SessionStorage加载状态
        reloadFromStorage() {
            this.pageStates = loadFromStorage();
            console.log('🔄 [存储] 重新加载页面状态:', this.pageStates);
        },
        
        // 清除所有SessionStorage数据
        clearAllStorage() {
            try {
                sessionStorage.removeItem(STORAGE_KEY);
                this.pageStates = loadFromStorage(); // 重置为默认状态
                console.log('🔄 [存储] 清除所有页面状态');
            } catch (error) {
                console.error('清除SessionStorage失败:', error);
            }
        }
    },
    
    getters: {
        // 获取Video页面状态
        videoState: (state) => state.pageStates.video || {},
        
        // 获取搜索状态
        searchState: (state) => state.pageStates.search || {},
        
        // 获取Home页面状态
        homeState: (state) => state.pageStates.home || {}
    }
});