import { createApp, defineAsyncComponent } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import { createI18n } from 'vue-i18n/dist/vue-i18n.cjs.js';
import { createStore } from 'vuex';

import 'viewerjs/dist/viewer.css';
import VueViewer from 'v-viewer';

import 'vue-select/dist/vue-select.css';

var App = require('../src/App.vue').default;

const routes = require('./router/wmsapp_routes.js').default;

window.appCommon = require('./common/AppCommon.js');

const i18n = createI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': require('./common/lang/zh-CN.js'),
    'en-US': require('./common/lang/en-US.js'),
  },
});

VueViewer.setDefaults({
  Options: {
    // Options必须，否则会出现默认打开等等不可预知的错误
    inline: true,
    button: true, // 显示右上角关闭按钮
    navbar: true, // 缩略图导航
    title: true, // 是否显示当前图片的标题
    toolbar: true, // 显示工具栏
    tooltip: true, // 显示缩放百分比
    movable: true, // 图片是否可移动
    zoomable: true, // 是否可缩放
    rotatable: true, // 是否可旋转
    scalable: true, // 是否可翻转
    transition: true, // 是否使用 CSS3 过度
    fullscreen: true, // 播放时是否全屏
    keyboard: true, // 是否支持键盘
    url: 'data-src', // 设置大图片的 url
  },
});

const router = createRouter({
  history: createWebHashHistory(),
  base: '/',
  mode: 'hash',
  routes: routes,
});

const curd = {
  state: () => ({
    selectWidgetVisible: false,
    selectTabIndex: 0,
  }),
  mutations: {
    /**
     * 显示搜索框的时候调用
     * @param {*} state
     */
    showSelectWidget(state, selectTabIndex) {
      state.selectWidgetVisible = true;
      state.selectTabIndex = selectTabIndex;
    },

    /**
     * 关闭搜索框的时候调用
     * @param {*} state
     */
    hideSelectWidget(state) {
      state.selectWidgetVisible = false;
      state.selectTabIndex = 0;
    },
  },
};

const store = createStore({
  modules: {
    curd: curd,
  },
});

const app = createApp(App);
app.use(i18n);
app.use(router);
app.use(store);
app.use(VueViewer);
app.mount('#app');

window.app = app;

/**
 * 路由钩子
 * @param  {[type]} (to, from,         next [description]
 * @return {[type]}      [description]
 */
router.beforeEach((to, from, next) => {
  // to : 即将要进入的目标 路由对象
  // from: 当前导航正要离开的路由
  // next: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数
  console.log(to);
  if (
    to != undefined &&
    to.path != undefined &&
    (to.path.indexOf('desktop') == 0 || to.path.indexOf('desktop') == 1)
  ) {
    // 判断是否已登录
    const token = $.cookie('token');
    if (token == undefined || token.length == 0) {
      // 如果没有登录则直接返回
      next({ path: '/' });
    } else {
      next();
    }
  } else {
    next();
  }
});
