import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

/**
 * 引入antd
 */
import Antd from 'ant-design-vue'
Vue.use(Antd)

/**
 * 引入swiper
 */
import 'swiper/swiper-bundle.css'
import {
  Swiper as SwiperClass,
  Pagination,
  Mousewheel,
  Autoplay,
  Scrollbar
} from 'swiper/core'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
SwiperClass.use([Pagination, Mousewheel, Autoplay, Scrollbar])
Vue.use(getAwesomeSwiper(SwiperClass))

import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
Vue.use(hljs.vuePlugin);

/**
 * api全局化
 */
import { api } from './common/api'
Vue.prototype.$api = api

/**
 * Lodash全局化
 */
import _ from 'lodash'
Vue.prototype.$_ = _
/**
 * moment全局化
 */
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.updateLocale('zh-cn', {
  meridiem: function (hour, minute, isLowercase) {
    if (hour < 9) {
      return '早上'
    } else if (hour < 11) {
      return '上午'
    } else if (hour < 13) {
      return '中午'
    } else if (hour < 18) {
      return '下午'
    } else {
      return '晚上'
    }
  }
})
Vue.prototype.$moment = moment
/**
 * 权限验证全局化
 */
import { auth } from './components/authorized'
Vue.prototype.$auth = auth

/**
 * 注册全局组件
 */
import Container from './components/container'
Vue.component('Container', Container)
import Authorized from './components/authorized'
Vue.component('Auth', Authorized)
import YoTable from './components/yoTable'
Vue.component('YoTable', YoTable)
import YoTableActions from './components/yoTableActions'
Vue.component('YoTableActions', YoTableActions)
import YoModalForm from './components/yoModalForm'
Vue.component('YoModalForm', YoModalForm)
import YoImage from './components/yoImage'
Vue.component('YoImage', YoImage)
import YoFormLink from './components/yoFormLink'
Vue.component('YoFormLink', YoFormLink)

/**
 * 引入主题样式
 */
import './assets/style/app.less'

import { SETTING_KEY } from './common/storage'

const settings = JSON.parse(window.localStorage.getItem(SETTING_KEY))

const app = new Vue({
  data: {
    /**
     * 全局属性
     * 可通过this.$root.global调用
     */
    global: {

      defaultWindow: [{
        title: '首页',
        path: '/home',
        icon: 'home',
        closable: false,
      }],

      /**
       * 用于存储用户信息
       */
      info: undefined,
      /**
       * 设置
       */
      settings: settings || {
        /**
         * 导航颜色
         */
        navTheme: 'dark',
        /**
         * 布局类型
         * left-menu 左侧菜单经典结构
         * top-nav 顶部导航菜单
         */
        layout: 'left-menu',
        /**
         * 内容区域宽度
         * container-fluid 整宽
         * container 1200px宽度并居中
         */
        container: 'container-fluid',
        /**
         * 左侧菜单是否收缩
         */
        siderCollapsed: false
      }
    }
  },
  mounted() {
    this.onChangeNavTheme()
  },
  watch: {
    'global.settings': {
      deep: true,
      handler() {
        window.localStorage.setItem(SETTING_KEY, JSON.stringify(this.global.settings))
      }
    },
    'global.settings.navTheme'() {
      this.onChangeNavTheme()
    }
  },
  methods: {
    onChangeNavTheme() {
      document.body.classList.remove('yo-nav-theme--dark', 'yo-nav-theme--light')
      document.body.classList.add(`yo-nav-theme--${this.global.settings.navTheme}`)
    }
  },
  router,
  render: h => h(App),
}).$mount('#app')

export default app