import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { store } from "./store/index.js";
// import "./assets/style/element-variables.module.scss";
import "./icons/index"; // icon

import VueRulerTool from "vue-ruler-tool";
// 引入element ui
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "@wangeditor/editor/dist/css/style.css";
// 引入css
import "./styles/index.scss";
// 注册svg组件
import SvgIcons from "@/components/SvgIcons/index.vue";
import VueDraggableResizable from "vue-draggable-resizable-gorkys";
import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import VirtualList from "@/components/virtual_list/index.vue";
import ManyVirtualList from "@/components/virtual_list/ManyVirtualList.vue";

Vue.component("VueDraggableResizable", VueDraggableResizable);
Vue.component("SvgIcons", SvgIcons);
Vue.component("vue-ruler-tool", VueRulerTool);
// 序列化post方法
import qs from "qs";
// 将自动注册所有组件为全局组件
import dataV from "@jiaminghi/data-view";
import permission from "./directives/permission"; // 导入自定义指令
import lazyLoad from "./directives/lazyLoad";
import inview from "./directives/inview";

import "echarts-gl";
Vue.use(dataV);
Vue.prototype.$qs = qs;
// Vue.prototype.$tinymce = tinymce;

// dialog拖拽全屏
import dialogDrag from "./views/health/dialogDrag";
import { RecycleScroller } from "vue-virtual-scroller";

Vue.directive("dialogDrag", dialogDrag);

Vue.component("RecycleScroller", RecycleScroller);
Vue.component("VirtualList", VirtualList);
Vue.component("ManyVirtualList", ManyVirtualList);

Vue.use(ElementUI);
// 引入tailwind
// https://www.tailwindcss.cn/docs/installation

Vue.prototype.$BASE_URL = window?._BASE_CONFIG?.API;
Vue.config.productionTip = false;
if (store.state.auth.userInfo.permission !== undefined) {
  store.dispatch("auth/setAddRouter", {
    resultRouter:
      (store.state.auth.userInfo && store.state.auth.userInfo.permission) || [],
    router,
  });
}

//开始结束时间转换
Vue.prototype.$formatDate = function (date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Adding 1 to month since it's zero-based
  const day = date.getDate().toString().padStart(2, "0");
  return `${year}-${month}-${day}`;
};
Vue.directive("lazy-load", lazyLoad);
Vue.directive("hasPermi", permission);
Vue.directive("inview", inview);
// 时间戳转换
Vue.prototype.$formatDateTWO = function (timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  // const seconds = String(date.getSeconds()).padStart(2, "0");:${seconds}
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 路由导航守卫
router.beforeEach((to, from, next) => {
  if (from.path === "/home/performance/customAnalysis") {
    if (to.path !== "/home/performance/luckySheet") {
      store.commit("dragChart/clearchart");
    }
  }
  next();
});
// 监听页面刷新或关闭事件
window.addEventListener("beforeunload", () => {
  // 调用清空 Vuex 仓库的 Action
  store.commit("dragChart/clearchart");
});
new Vue({
  router,
  store,
  mounted() {
    this.applyTheme();
  },
  watch: {
    "$store.state.themes.theme": {
      handler(newTheme, oldTheme) {
        this.applyTheme(newTheme, oldTheme);
      },
      immediate: true,
    },
  },
  methods: {
    async applyTheme(theme, oldTheme) {
      const themeFile = theme || this.$store.state.themes.theme;
      // 动态加载新的主题样式
      try {
        // 动态导入 SCSS 文件
        const theme = await import(`@/themes/${themeFile}.scss`);

        Vue.prototype.$backgroundColor = getComputedStyle(
          document.documentElement
        ).getPropertyValue("--background-color");

        // 移除之前的主题样式
        let oldThemeStyle = document.getElementById("theme-style");
        if (oldThemeStyle) {
          oldThemeStyle.parentNode.removeChild(oldThemeStyle);
        }

        // 创建新的样式标签并插入到 head 中
        const style = document.createElement("style");
        style.id = "theme-style";
        style.type = "text/css";
        style.innerHTML = theme.default;
        document.head.appendChild(style);
        if (theme !== oldTheme && oldTheme !== undefined) {
          this.$router.go(0);
        }
      } catch (error) {
        console.error("Failed to load theme", error);
      }
    },
  },
  render: (h) => h(App),
}).$mount("#app");