import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    themes: {
      default: {
        '--primary-color': '#1890ff',
        '--bg-color': '#f8f9fa',
        '--text-color': '#333',
        '--card-bg': '#ffffff'
      },
      aydzBlue: {
        '--primary-color': '#2a5caa',
        '--bg-color': '#e6f7ff',
        '--text-color': '#1a3353',
        '--card-bg': '#d0e8ff'
      },
      darkMode: {
        '--primary-color': '#52c41a',
        '--bg-color': '#1a1a1a',
        '--text-color': '#e6e6e6',
        '--card-bg': '#2a2a2a'
      }
    },
    currentTheme: 'aydzBlue'
  }),
   actions: {
     initTheme() {
       const savedTheme = uni.getStorageSync('selectedTheme') || 'aydzBlue'
       this.setTheme(savedTheme)
     },
     setTheme(themeName) {
       if (!this.themes[themeName]) return
       
       this.currentTheme = themeName
       uni.setStorageSync('selectedTheme', themeName)
       
       // 应用CSS变量
       const root = document.documentElement
       const themeVars = this.themes[themeName]
       
       Object.keys(themeVars).forEach(key => {
         root.style.setProperty(key, themeVars[key])
       })
       
       // 动态设置导航栏颜色
       if (themeName === 'darkMode') {
         uni.setNavigationBarColor({
           frontColor: '#ffffff',
           backgroundColor: '#1a1a1a'
         })
       } else if (themeName === 'aydzBlue') {
         uni.setNavigationBarColor({
           frontColor: '#ffffff',
           backgroundColor: '#2a5caa'
         })
       } else {
         uni.setNavigationBarColor({
           frontColor: '#000000',
           backgroundColor: '#f8f9fa'
         })
       }
     },
     getThemeLabel(themeKey) {
       const labels = {
         default: '默认主题',
         aydzBlue: '哎呀科技蓝',
         darkMode: '深色模式'
       }
       return labels[themeKey] || themeKey
     }
   },
   getters: {
     themeOptions: (state) => {
       return Object.keys(state.themes).map(key => ({
         name: key,
         label: state.getThemeLabel(key),
         colors: state.themes[key]
       }))
     }
   }
 })