import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import './styles/element-variables.scss'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@babel/polyfill';

// 注册全局指令
Vue.directive('permit', {
  inserted(el, binding) {
    const { getters } = store
    // 超级管理员拥有所有权限
    if (getters.role === '超级管理员') {
      return false
    }
    try {
      // 获取el上绑定的roles @dataset{Array} roles 该页面所拥有的所有按钮权限
      const roles = el.getAttribute('roles-permit') ? el.getAttribute('roles-permit').split(',') : []
      console.log(roles, 'roles')
      // 该el对应的权限 强制转为字符串
      const { value } = binding

      if (typeof value === 'string' || typeof value === 'number') {
        // 判断是否存在权限roles 不存在删除元素
        if (roles.indexOf(String(value)) === -1) {
          el.parentNode.removeChild(el)
        }
      } else {
        if (Array.isArray(value)) {
          value.filter(item => {
            return roles.indexOf(String(item)) !== -1
          }).length === 0 ? el.parentNode.removeChild(el) : ''
        } else {
          el.parentNode.removeChild(el)
        }
      }
    } catch (e) {
      // 抛出异常 直接删除元素
      el.parentNode.removeChild(el)
    }
  }
})

// 保存排行榜
import VueHtml2Canvas from 'vue-html2canvas'
Vue.use(VueHtml2Canvas)

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import * as filters from './filters' // global filters

import * as echarts from 'echarts'
import 'echarts/map/js/china'
Vue.prototype.$echarts = echarts

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

// 注册全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

// 注册全局组件
import Pagination from '@/components/Pagination'
Vue.component('pagination', Pagination)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
