import { defineStore } from 'pinia'
import {
  DEFAULT_COLOR,
  FONT_COLOR_DEFAULT,
  FONT_COLOR_DEFAULT_ACTIVE
} from '@/constants'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    mainColor: DEFAULT_COLOR,
    defaultColor: DEFAULT_COLOR,
    fontColor: FONT_COLOR_DEFAULT, // 191,203,217
    defaultFontColor: FONT_COLOR_DEFAULT,
    fontColorActive: FONT_COLOR_DEFAULT_ACTIVE, // 244,244,245
    defaultFontColorActive: FONT_COLOR_DEFAULT_ACTIVE
    /* aside: {
      $menuText: '#bfcbd9',
      $menuActiveText: '#ffffff',
      $subMenuActiveText: '#f4f4f5',
      $menuBg: '#304156',
      $menuHover: '#263445',
      $subMenuBg: '#1f2d3d',
      $subMenuHover: '#001528',
      $sideBarWidth: '210px'
    } */
  }),
  actions: {
    /**
     * 设置主题色
     * @param mainColor 颜色
     * @param flag 是否修改默认颜色
     */
    setThemeColorAction(mainColor: string, flag = false) {
      this.mainColor = mainColor
      if (flag) {
        this.defaultColor = mainColor
        // this.setElementColorAction(mainColor)
      }
    },
    setDarkFontColorAction(
      fontColor: string,
      fontColorActive: string,
      flag = false
    ) {
      this.fontColor = fontColor
      this.fontColorActive = fontColorActive
      if (flag) {
        this.defaultFontColor = fontColor
        this.defaultFontColorActive = fontColorActive
      }
    },
    setElementColorAction(color: string) {
      const el = document.documentElement
      el.style.setProperty('--el-color-primary', color)
    },
    /* 如果主题色与默认颜色不一致就使用默认颜色 */
    setDefaultColorAction() {
      // this.setElementColorAction(this.mainColor)
      if (this.mainColor !== this.defaultColor) {
        this.setThemeColorAction(this.defaultColor)
        // this.setElementColorAction(this.defaultColor)
      }
      if (this.fontColor !== this.defaultFontColor) {
        this.setDarkFontColorAction(
          this.defaultFontColor,
          this.defaultFontColorActive
        )
      }
    }
  },
  persist: {
    key: 'theme',
    storage: window.localStorage,
    paths: [
      'mainColor',
      'defaultColor',
      'fontColor',
      'defaultFontColor',
      'fontColorActive',
      'defaultFontColorActive'
    ]
  }
})