<template>
  <div class="home-page">
    <n-space>
      <span>切换主题：</span>
      <n-icon size="20"><ContrastSharp @click="onTheme" /></n-icon>
    </n-space>
    <n-space>
      <span>切换主题色：</span>
      <div style="width: 100px">
        <n-color-picker
          v-model:value="primaryColor"
          @update:value="colorChange"
          :show-alpha="false"
        />
      </div>
    </n-space>
    <n-space>
      <n-button type="primary" v-has="'a'">primary按钮</n-button>
      <n-button type="success" v-has="'r'">success按钮</n-button>
      <n-button @click="onReset" v-has="'d'">还原主题色</n-button>
      <n-input />
      <n-date-picker type="date" clearable />
      <n-select v-model:value="value" :options="options" style="width: 200px" />
    </n-space>
    <n-checkbox-group v-model:value="cities">
      <n-space item-style="display: flex;">
        <n-checkbox value="Beijing" label="北京" />
        <n-checkbox value="Shanghai" label="上海" />
        <n-checkbox value="Guangzhou" label="广州" />
        <n-checkbox value="Shenzen" label="深圳" />
      </n-space>
    </n-checkbox-group>
    <!-- <ThemeSetting></ThemeSetting> -->
  </div>
</template>
<script>
import { ref } from "vue";
import { mapGetters } from "vuex";
import ThemeSetting from "@/components/ThemeSetting.vue";
import { ContrastSharp } from "@vicons/ionicons5";
import config from "@/config.js";
export default {
  components: {
    ThemeSetting,
    ContrastSharp,
  },
  setup() {
    let primaryColor =
      localStorage.getItem("primaryColor") || config.primaryColor;
    return {
      cities: ref([]),
      primaryColor: ref(primaryColor),
      value: ref(undefined),
      options: [
        { label: "选项1", value: 1 },
        { label: "选项2", value: 2 },
        { label: "选项3", value: 3 },
      ],
    };
  },
  computed: {
    ...mapGetters(["sysThemeColor"]),
  },
  methods: {
    //切换主题色
    colorChange(value) {
      this.$store.commit("system/CHANGE_THEME", {
        primaryColor: value,
      });
    },

    //切换主题
    onTheme() {
      this.$store.commit("system/TOGGLE_THEME");
    },

    //还原主题色
    onReset() {
      this.primaryColor = config.primaryColor;
      this.$store.commit("system/CHANGE_THEME", {
        primaryColor: config.primaryColor,
      });
    },
  },
};
</script>
<style lang="less">
.home-page {
}
</style>