// mixins/themeMixin.js（Vue3 适配版）
import { 
  getThemeConfigFromStorage, 
  THEME_CHANGE_EVENT,
  THEME_PRESETS,
  DEFAULT_THEME_KEY
} from '../utils/theme.js' // 注意路径：Vue3 中 @ 别名需确认，这里先用相对路径

export default {
  // Vue3 中 data 需为函数（和Vue2一致，无需改）
  data() {
    return {
      themeConfig: getThemeConfigFromStorage()
    }
  },

  // Vue3 计算属性写法不变
  computed: {
    pageThemeStyle() {
      return {
        backgroundColor: this.themeConfig.bgColor,
        color: this.themeConfig.textPrimary,
        minHeight: '100vh'
      }
    },
    cardThemeStyle() {
      return {
        backgroundColor: this.themeConfig.cardBgColor,
        borderColor: this.themeConfig.borderColor,
        boxShadow: `0 6rpx 20rpx ${this.themeConfig.shadowColor}`,
        borderRadius: '28rpx'
      }
    },
    btnPrimaryStyle() {
      return {
        backgroundColor: this.themeConfig.primaryColor,
        color: '#ffffff',
        border: 'none',
        borderRadius: '14rpx'
      }
    }
  },

  // ==================== 关键：Vue3 生命周期适配 ====================
  // 小程序中 Vue3 仍支持 onLoad/onShow/onUnload 等原生生命周期
  onLoad() {
    this.syncThemeConfig()
    this.watchThemeChange()
  },

  onShow() {
    this.syncThemeConfig()
  },

  onUnload() {
    // 移除监听，避免内存泄漏
    uni.$off(THEME_CHANGE_EVENT, this.themeChangeHandler)
  },

  // 方法部分（和Vue2逻辑一致，无需改）
  methods: {
    /**
     * 同步最新主题配置（优先级：全局 > 本地 > 默认）
     */
    syncThemeConfig() {
      const appInstance = getApp({ allowDefault: true })
      const globalTheme = appInstance?.globalData?.themeConfig
      
      this.themeConfig = globalTheme 
        || getThemeConfigFromStorage() 
        || THEME_PRESETS[DEFAULT_THEME_KEY]
    },

    /**
     * 监听全局主题变更事件
     */
    watchThemeChange() {
      this.themeChangeHandler = ({ key, config }) => {
        if (key && config) {
          this.themeConfig = config
          // 可选：页面自定义主题更新逻辑
          this.onThemeUpdated && this.onThemeUpdated()
        }
      }
      uni.$on(THEME_CHANGE_EVENT, this.themeChangeHandler)
    },

    /**
     * 【可选】页面自定义主题更新逻辑（供页面重写）
     */
    onThemeUpdated() {
      // 空实现
    }
  }
}