import Vue from "vue";
import axios from "axios";

import App from "./App.vue";
import router from "./router";
import store from "./store";
import globalVuePlugins from "./plugins/globalVuePlugins";
import GLOBAL from "./config";
import { jsonBigNumberToString } from "./plugins/utils";

// https://github.com/RobinCK/vue-ls
import VueLocalStorage from "vue-ls";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "./assets/styles/index.scss";
Vue.use(ElementUI);

Vue.use(VueLocalStorage, { storage: "session" });
Vue.use(globalVuePlugins);

Vue.prototype.GLOBAL = GLOBAL;
Vue.config.productionTip = false;

// route interceptor
router.beforeEach((to, from, next) => {
  const token = Vue.ls.get("token");
  if (to.meta.noRequire) {
    next();
    // 不需要登录的页面
    // if (token) {
    //   // 当前状态是已登录
    //   ElementUI.Notice.info({
    //     title: "您已经登录，已自动跳转到主页",
    //     duration: 5
    //   });
    //   next({ name: "Home" });
    // } else {

    // }
  } else {
    // 需要登录的路由
    if (token) {
      next();
    } else {
      // 登录失效的处理
      Vue.ls.clear();
      next({ name: "Login" });
    }
  }
});

// axios interceptors
var load = "";
// 同一时间有多个请求时，会形成队列。在第一个请求创建loading，在最后一个响应关闭loading
var queue = [];

// 解决js处理超过16位number时精度丢失的问题
axios.defaults.transformResponse = [
  data => {
    return JSON.parse(jsonBigNumberToString(data));
  }
];
axios.interceptors.request.use(
  config => {
    // 显示loading提示
    if (!queue.length) {
      load = ElementUI.Message({
        iconClass: "el-message__icon el-icon-loading",
        message: "Loading...",
        duration: 0
      });
    }
    queue.push(1);

    // 为请求地址添加全局domain
    if (config.url.indexOf("http://") < 0) {
      config.url = GLOBAL.domain + config.url;
    }

    // 为请求头添加token信息
    let token = Vue.ls.get("token");
    if (token) {
      config.headers["token"] = token;
    }

    // 设置延迟时效
    config.timeout = GLOBAL.timeout;
    return config;
  },
  error => {
    // 关闭loading提示
    // 串联并发请求，延时处理是为防止多个loading实例闪屏。
    setTimeout(() => {
      queue.shift();
      if (!queue.length) load.close();
    }, 100);
    return Promise.reject(error);
  }
);
axios.interceptors.response.use(
  response => {
    // 关闭loading提示
    setTimeout(() => {
      queue.shift();
      if (!queue.length) load.close();
    }, 100);
    return response;
  },
  error => {
    // 关闭loading提示
    setTimeout(() => {
      queue.shift();
      if (!queue.length) load.close();
    }, 100);
    return Promise.reject(error);
  }
);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");