import { getActiveVars, loadAndApplyTheme } from '@/utils/theme'

/**
 * 页面主题 mixin：把后端 css_vars 绑到页面可读的计算属性
 * 小程序无法动态改全局 scss，必须在页面 :style 里消费这些值
 */
export default {
  data() {
    return {
      themeVars: getActiveVars(),
    }
  },
  computed: {
    /** 页面根节点背景/文字 */
    themePageStyle() {
      const v = this.themeVars || {}
      return {
        backgroundColor: v['--color-bg'] || '#F7F8FA',
        color: v['--color-text'] || '#1a1a1a',
      }
    },
    themePrimary() {
      return (this.themeVars && this.themeVars['--color-primary']) || '#B08D57'
    },
    themeSurface() {
      return (this.themeVars && this.themeVars['--color-surface']) || '#ffffff'
    },
    themeText() {
      return (this.themeVars && this.themeVars['--color-text']) || '#1a1a1a'
    },
    themeTextSoft() {
      return (this.themeVars && this.themeVars['--color-text-soft']) || '#666666'
    },
    themeBorder() {
      return (this.themeVars && this.themeVars['--color-border']) || '#eeeeee'
    },
    themeRadius() {
      return (this.themeVars && this.themeVars['--radius-md']) || '16rpx'
    },
  },
  async onShow() {
    // 每次进页刷新：后台改默认模板后无需杀掉小程序
    try {
      const theme = await loadAndApplyTheme()
      this.themeVars = (theme && theme.css_vars) || getActiveVars()
    } catch (e) {
      this.themeVars = getActiveVars()
    }
  },
}