<template>
  <el-color-picker
    size="small"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
    v-model="themeVal"
  ></el-color-picker>
</template>

<script>
import { mapGetters } from 'vuex'; // default color
const DEFAULT_PRIMARY_COLOR = '#409eff';

export default {
  name: 'topColor',
  data() {
    return {
      themeVal: '',
    };
  },
  created() {
    this.themeVal = this.colorName || DEFAULT_PRIMARY_COLOR;
  },
  watch: {
    themeVal(val, oldVal) {
      this.$store.commit('SET_COLOR_NAME', val);
      this.updateTheme(val, oldVal);
    },
  },
  computed: {
    ...mapGetters(['colorName']),
  },
  methods: {
    hexToRgb(str) {
      let hexs = '';
      str = str.replace('#', '');
      hexs = str.match(/../g);
      for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
      return hexs;
    },
    // r 代表红色 | g 代表绿色 | b 代表蓝色
    rgbToHex(r, g, b) {
      let hexs = [r.toString(16), g.toString(16), b.toString(16)];
      for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
      return `#${hexs.join('')}`;
    },

    getDarkColor(color, level) {
      let rgb = this.hexToRgb(color);
      for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
      return this.rgbToHex(rgb[0], rgb[1], rgb[2]);
    },

    // color 颜色值字符串 | level 加深的程度，限0-1之间
    getLightColor(color, level) {
      let rgb = this.hexToRgb(color);
      for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
      return this.rgbToHex(rgb[0], rgb[1], rgb[2]);
    },

    updateTheme(e) {
      if (!e) return;
      // e就是选择了的颜色
      const pre = '--el-color-primary';
      const el = document.documentElement;
      el.style.setProperty(pre, e);
      // 这里是覆盖原有颜色的核心代码
      for (let i = 1; i < 10; i += 1) {
        document.documentElement.style.setProperty(
          `${pre}-light-${i}`,
          `${this.getLightColor(e, i / 10)}`
        );
      }
      document.documentElement.style.setProperty(`${pre}-dark-2`, `${this.getDarkColor(e, 0.2)}`);
    },
  },
};
</script>
