import Vue from 'vue'
import VueRouter from 'vue-router'
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 UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
// const ElementUI = require('element-ui')
// require('element-ui/lib/theme-chalk/index.css')
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import iconfont from './assets/iconfont/iconfont.css'

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

import * as Sentry from '@sentry/browser'
import {
  Vue as VueIntegration
} from '@sentry/integrations'

import App from './App'
import store from './store'
import router from './router'
import i18n from './i18n'
import '@/icons' // icon
import '@/permission' // permission control
import './icons'
import * as filters from './filters' // global filters
import Leaflet from 'leaflet'
import "leaflet/dist/leaflet.css"
Vue.use(Leaflet);
Vue.config.productionTip = false
/**
 * 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! ! !
 */
// import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
  // mockXHR()
}
var pageCount = 50
// console.log(process.env)
if (process.env.NODE_ENV !== 'development') {
  Sentry.init({
    release: 'vislib@' + process.env.npm_package_version,
    // dsn: 'https://9d8ee0ea1a2749949dd1e641b0f7c071@o286322.ingest.sentry.io/5217806',
    integrations: [new VueIntegration({
      Vue,
      attachProps: true
    })]
  })
}


// store.commit('app/SET_LANG', 'CN')
Vue.use(VueRouter)
Vue.use(pageCount)
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
Vue.use(UmyUi);
// register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

import echarts from 'echarts'
Vue.use(echarts)
// Vue.prototype.$echarts = echarts

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

Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper')
    selectWrap.addEventListener('scroll', function() {
      let sign = 0
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (scrollDistance <= sign) {
        binding.value()
      }
    })
  }
})
