import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 高分屏方案和 Rem 适配 (移动端配置且兼容了@media问题)
import "@/config/loader/flex-rem";

/* IFDEBUG // 开发环境下远程调试vconsole
import "@/config/loader/vconsole";
FIDEBUG */


// 按需引入组件库 & 主题和样式重置

/* IFTRUE_ELEMENT */
import "@/styles/loader/element.variables"; // 主题和样式重置
import "@/config/loader/element-ui";
/* FITRUE_ELEMENT */

/* IFTRUE_ANT_DESIGN */
import "@/config/loader/ant-design"; // ant design 使用less loader在vue.config.js内配置条件编译, 无需再此处重新引入
/* FITRUE_ANT_DESIGN */

/* IFTRUE_QUASAR */
import "@/styles/quasar.variables"; // 备注: 不能修改文件名称和路径: loader对路径做了绑定和优化, 需要引入才会生效 (vue add quasar 自动添加)
import "@/config/loader/quasar";
/* FITRUE_QUASAR */

Vue.config.productionTip = false;

import "@/directive/loader"; // 全局自定义指令
import mixin from "@/config/expert/mixins"; // 全局混入
Vue.mixin(mixin);
import * as filters from "@/config/expert/filters"; // 注册全局自定义过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});

// 路由钩子
import progress from "@/service/progress";
router.beforeEach((to, _, next) => {
  // 需要鉴权页面
  if (to.meta.authToken && store.state.user.token) {
    progress.invalidToken("登录已失效");
    return;
  }
  next();
});
router.afterEach(to => {
  // 路由切换后更新标题
  document.title = `${to.meta.title} | 丰凯利`;
});

const app = new Vue({
  router,
  store,
  render: h => h(App)
});

// 骨架屏: 全局记录挂在方法
window.mountApp = () => {
  app.$mount("#app");
  window.mountApp = null;
};

// 骨架屏：当js晚于css加载完成 || 取消骨架屏，那直接执行渲染
if (window.STYLE_READY || !process.env.VUE_APP_SKELETON) {
  window.mountApp?.();
}
