import { mapMutations, mapState } from "vuex";
import { enquireScreen } from "@/utils/util";
import themeUtil from "@/utils/theme/update";
import { formatJson } from "@/utils/formatter";
import { setting } from "@/config/theme/default";
import sysConfig from "@/config/theme/config";

export default {
  computed: {
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
      theme: (state) => state.setting.theme,
    }),
  },
  watch: {
    "systemConfig.THEME_SETTINGS": {
      handler(val) {
        // 设置主题
        const themeSetting = formatJson(val);
        // 系统主题设置
        if (themeSetting) {
          const {
            theme,
            layout,
            multiPage,
            animate,
            weekMode,
            fixedHeader,
            fixedSideBar,
            pageWidth,
            sideMenuDefaultWidth,
            fixedTabs,
          } = themeSetting;

          theme
            ? this.$store.commit("setting/setTheme", theme)
            : this.$store.commit("setting/setTheme", sysConfig.theme);
          layout
            ? this.$store.commit("setting/setLayout", layout)
            : this.$store.commit("setting/setLayout", setting.layout);
          multiPage
            ? this.$store.commit("setting/setMultiPage", multiPage)
            : this.$store.commit("setting/setMultiPage", sysConfig.multiPage);
          animate
            ? this.$store.commit("setting/setAnimate", animate)
            : this.$store.commit("setting/setAnimate", sysConfig.animate);
          weekMode
            ? this.$store.commit("setting/setWeekMode", weekMode)
            : this.$store.commit("setting/setWeekMode", setting.weekMode);
          fixedHeader
            ? this.$store.commit("setting/setFixedHeader", fixedHeader)
            : this.$store.commit("setting/setFixedHeader", setting.fixedHeader);
          fixedSideBar
            ? this.$store.commit("setting/setFixedSideBar", fixedSideBar)
            : this.$store.commit(
                "setting/setFixedSideBar",
                setting.fixedSideBar
              );
          pageWidth
            ? this.$store.commit("setting/setPageWidth", pageWidth)
            : this.$store.commit("setting/setPageWidth", setting.pageWidth);
          sideMenuDefaultWidth
            ? this.$store.commit(
                "setting/setSideMenuWidth",
                sideMenuDefaultWidth
              )
            : this.$store.commit(
                "setting/setSideMenuWidth",
                setting.sideMenuDefaultWidth
              );
          fixedTabs
            ? this.$store.commit("setting/setFixedTabs", fixedTabs)
            : this.$store.commit("setting/setFixedTabs", setting.fixedTabs);

          themeUtil.changeThemeColor(this.theme.color, this.theme.mode);
        }
      },
      immediate: true,
    },
  },
  mounted() {
    enquireScreen((isMobile) => this.setDevice(isMobile));
  },
  methods: {
    ...mapMutations("setting", ["setDevice"]),
    // 根据系统设置
    handleCustomSetting() {
      const { SYSTEM_TITLE, FAVICON, FILE_SERVER } = this.systemConfig;
      if (document) {
        // 替换网页顶部标题
        document.title = SYSTEM_TITLE;
        // 网页顶部图标
        const linkNode = document.createElement("link");
        linkNode.rel = "icon";
        linkNode.href =
          FILE_SERVER && FAVICON
            ? `${FILE_SERVER}  ${FILE_SERVER}/${FAVICON}`
            : "favicon.ico";
        document.head.append(linkNode);
      }
    },
  },
};
