<template>
  <el-divider content-position="left">全局主题</el-divider>
  <div class="flex-between">
    <div>primary</div>
    <div>
      <el-color-picker
        v-model="themeConfig.primary"
        size="small"
        @change="handleColorPickerChange('primary')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>success</div>
    <div>
      <el-color-picker
        v-model="themeConfig.success"
        size="small"
        @change="handleColorPickerChange('success')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>info</div>
    <div>
      <el-color-picker
        v-model="themeConfig.info"
        size="small"
        @change="handleColorPickerChange('info')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>warning</div>
    <div>
      <el-color-picker
        v-model="themeConfig.warning"
        size="small"
        @change="handleColorPickerChange('warning')"
      />
    </div>
  </div>
  <div class="flex-between">
    <div>danger</div>
    <div>
      <el-color-picker
        v-model="themeConfig.danger"
        size="small"
        @change="handleColorPickerChange('danger')"
      />
    </div>
  </div>
</template>

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

export default defineComponent({
  name: "global-theme",

  setup() {
    const store = useStore();
    /**
     * store里面的主题
     * 这里是双向绑定
     */
    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });

    const handleColorPickerChange = (
      colorType: keyof typeof themeConfig.value
    ) => {
      // 设置html标签上的全局样式 包括基本颜色和其渐变的颜色组
      setHtmlGlobalThemeColor(
        colorType,
        themeConfig.value[colorType].toString()
      );
      // 本地存储布局配置
      setLocalThemeConfig(themeConfig.value);
      // 本地存储布局配置全局主题样式（html根标签）
      setLocalThemeConfigStyle();
    };

    return {
      themeConfig,
      handleColorPickerChange,
    };
  },
});
</script>

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