<template>
  <el-divider content-position="left">菜单 / 顶栏</el-divider>
  <div class="flex-between">
    <div>顶栏背景</div>
    <div>
      <el-color-picker
        v-model="themeConfig.topBar"
        size="small"
        @change="handleBgColorPickerChange('topBar')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>菜单背景</div>
    <div>
      <el-color-picker
        v-model="themeConfig.menuBar"
        size="small"
        @change="handleBgColorPickerChange('menuBar')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>分栏菜单背景</div>
    <div>
      <el-color-picker
        v-model="themeConfig.columnsMenuBar"
        size="small"
        @change="handleBgColorPickerChange('columnsMenuBar')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>顶栏默认字体颜色</div>
    <div>
      <el-color-picker
        v-model="themeConfig.topBarColor"
        size="small"
        @change="handleBgColorPickerChange('topBarColor')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>菜单默认字体颜色</div>
    <div>
      <el-color-picker
        v-model="themeConfig.menuBarColor"
        size="small"
        @change="handleBgColorPickerChange('menuBarColor')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>分栏菜单默认字体颜色</div>
    <div>
      <el-color-picker
        v-model="themeConfig.columnsMenuBarColor"
        size="small"
        @change="handleBgColorPickerChange('columnsMenuBarColor')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>顶栏背景渐变</div>
    <div>
      <el-switch
        v-model="themeConfig.isTopBarColorGradual"
        @change="handleGlobalBgColorGradual"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>菜单背景渐变</div>
    <div>
      <el-switch
        v-model="themeConfig.isMenuBarColorGradual"
        @change="handleGlobalBgColorGradual"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>分栏菜单背景渐变</div>
    <div>
      <el-switch
        v-model="themeConfig.isColumnsMenuBarColorGradual"
        @change="handleGlobalBgColorGradual"
      />
    </div>
  </div>
  <div class="flex-between mt14">
    <div>菜单字体背景高亮</div>
    <div>
      <el-switch
        v-model="themeConfig.isMenuBarColorHighlight"
        @change="handleMenuHighlightChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "@/hooks/useStore";
import {
  setHtmlGlobalBgThemeColor,
  setGlobalBgColorGradual,
  setLocalThemeConfig,
  setLocalThemeConfigStyle,
  setMenuHighlight,
} from "@/utils/theme";

export default defineComponent({
  name: "menu-header-theme",
  setup() {
    const store = useStore();

    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });

    /**
     * 监听菜单 / 顶栏的背景、颜色变化
     */
    const handleBgColorPickerChange = (
      bgColorType: keyof typeof themeConfig.value
    ) => {
      // 设置html标签上的背景颜色的变量值
      setHtmlGlobalBgThemeColor(
        bgColorType,
        themeConfig.value[bgColorType].toString()
      );
      // 设置全局背景色的渐变与否
      setGlobalBgColorGradual(themeConfig.value);
      // 本地保存themeConfig
      setLocalThemeConfig(themeConfig.value);
      // 本地保存html的css变量
      setLocalThemeConfigStyle();
    };

    /**
     * 监听全局的背景色是否勾选渐变
     */
    const handleGlobalBgColorGradual = () => {
      // 设置全局背景色的渐变与否
      setGlobalBgColorGradual(themeConfig.value);
    };
    /**
     * 监听是否高亮充满选中菜单背景
     */
    const handleMenuHighlightChange = () => {
      const { isMenuBarColorHighlight } = themeConfig.value;
      setMenuHighlight(isMenuBarColorHighlight);
    };

    return {
      themeConfig,
      handleBgColorPickerChange,
      handleGlobalBgColorGradual,
      handleMenuHighlightChange,
    };
  },
});
</script>

<style lang="scss" scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
</style>
