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

export const useThemeStore = defineStore('theme', () => {
  const themes = ref({
    default: {
      '--primary-color': '#1890ff',
      '--bg-color': '#f8f9fa',
      '--text-color': '#333',
      '--header-bg': '#ffffff'
    },
    aydzBlue: {
      '--primary-color': '#2a5caa',
      '--bg-color': '#e6f7ff',
      '--text-color': '#1a3353',
      '--header-bg': '#2a5caa'
    },
    darkMode: {
      '--primary-color': '#52c41a',
      '--bg-color': '#1a1a1a',
      '--text-color': '#e6e6e6',
      '--header-bg': '#2a2a2a'
    }
  })
  
  const currentTheme = ref('default')
  
  // 初始化主题
  const initTheme = () => {
    const savedTheme = uni.getStorageSync('selectedTheme') || 'default'
    setTheme(savedTheme)
  }
  
  // 设置主题
  const setTheme = (themeName) => {
    if (!themes.value[themeName]) return
    
    currentTheme.value = themeName
    uni.setStorageSync('selectedTheme', themeName)
    
    // 应用CSS变量
    const themeVars = themes.value[themeName]
    Object.keys(themeVars).forEach(key => {
      document.documentElement.style.setProperty(key, themeVars[key])
    })
  }
  
  return { themes, currentTheme, initTheme, setTheme }
})