import Vue from 'vue';
import {
  ROUTE_CHANGE,
  REPORT_YAS,
} from 'store/yoho/types';
import {createApp} from './app';
import {createApi} from 'create-api';
import {Style, Toast} from 'cube-ui'; //eslint-disable-line
import Lazy from 'vue-lazyload';
import 'statics/scss/common.scss';
import 'statics/font/iconfont.css';
import 'statics/font/ufofont.css';

const {app, router, store} = createApp();

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

// Vue.prop('yoho', yoho);
Vue.use(Toast);
Vue.prop('api', createApi());
Vue.use(Lazy, {error: ''});

router.onReady(() => {
  router.beforeResolve((to, from, next) => {
    const matched = router.getMatchedComponents(to);

    store.commit(ROUTE_CHANGE, to);

    if (window._hmt) {
      window._hmt.push(['_trackPageview', to.fullPath]);
    }
    store.dispatch(REPORT_YAS, {
      params: {
        appop: 'YB_H5_PAGE_OPEN_L',
        param: {
          F_URL: `${location.origin}${to.fullPath}`,
          PAGE_URL: `${location.origin}${from.fullPath}`,
          PAGE_NAME: from.name
        }
      }
    });

    Promise.all(matched.map(({asyncData}) =>
      asyncData && asyncData({store, router: to})))
      .then(() => {
        if (!false || store.state.yoho.visible) {
          return next();
        } else {
          history.pushState({}, '', from.fullPath);
        }
      })
      .catch(e => {
        console.error(e);
        return next();
      });
  });
  app.$mount('#app');
});

router.onError(e => {
  console.error(e);
  router.push({name: 'error.500'});
});