import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/icon/iconfont.css'
import dayjs from 'dayjs'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
import isBetween from 'dayjs/plugin/isBetween'
import numeral from 'numeral'
import lodash from 'lodash'
import qs from 'qs'
import PortalVue from 'portal-vue'
Vue.use(PortalVue)
import {
  permission
} from "@/utils/directivePage";

dayjs.extend(isSameOrBefore)
dayjs.extend(isSameOrAfter)
dayjs.extend(isBetween)

import * as constant from '@/constant'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import 'default-passive-events'
import 'babel-polyfill'
// import './theme/index.css'

// import './global.scss'

// import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

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

// import '@/assets/element-variables.scss'
import App from './App'
import store from './store'
import installComponents from '@/components/install'
import router from './router'
import './utils/vueFilter'
import './utils/directive'
// Vue.use(vueFilter)
import '@/icons' // icon
import '@/permission' // permission control
import {
  Message
} from 'element-ui'
const showMessage = Symbol('showMessage')
class DonMessage {
  success(options, single = true) {
    this[showMessage]('success', options, single)
  }
  warning(options, single = true) {
    this[showMessage]('warning', options, single)
  }
  info(options, single = true) {
    this[showMessage]('info', options, single)
  }
  error(options, single = true) {
      this[showMessage]('error', options, single)
    }
    [showMessage](type, options, single) {
      // console.log(type, options, Message)
      let params = {
        message: options,
        offset: 90
      }
      if (single) {
        // 判断是否已存在Message
        if (document.getElementsByClassName('el-message').length === 0) {
          Message[type](params)
        }
      } else {
        Message[type](params)
      }
    }
}

// 修改默认属性
ElementUI.Dialog.props.closeOnClickModal.default = false;
// ElementUI.Dialog.props.destroyOnClose.default = true;
//  (ElementUI.Input)
// 全局修改选择如果value与label都为数字0则清空
const SelectValueWatch = ElementUI.Select.watch.value
ElementUI.Select.watch.value = function (newValue, oldValue) {
  SelectValueWatch.call(this, newValue, oldValue)
  if (this.selected && this.selected.value === 0 && this.selected.currentLabel === 0 && newValue !== oldValue) {
    this.handleClearClick.call(this, {
      stopPropagation: () => {}
    })
  }
}

// Vue.use(ElementUI)
Vue.use(installComponents)
// 命名根据需要，DonMessage只是在文章中使用
export const $message = new DonMessage()
Vue.prototype.$message = $message

// 全局移除数字滚动
document.addEventListener('mousewheel', function () {
  if (document.activeElement.type === 'number') {
    document.activeElement.blur()
  }
})
document.addEventListener('keydown', function (event) {
  //  (document.activeElement,event.keyCode)
  if (event.keyCode == 13) {
    setTimeout(res => {
      document.activeElement.blur()
    }, 300)

  }
})
/**
 * 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()
// }

// 高德地址
import VueAMap from 'vue-amap'
Vue.use(VueAMap)

// 检测浏览器是否缩放
// import '@/utils/zoom'
Vue.prototype.$ELEMENT = {
  size: 'medium',
  zIndex: 3000
}
// set ElementUI lang to EN
Vue.use(ElementUI, {
  locale
})

Vue.config.productionTip = false
Vue.prototype.$bus = new Vue()


// 将selects全局混入当前vue实例中
Vue.mixin({
  computed: {
    selects() {
      return store.state.selects
    },
    $helpers() {
      return {
        dayjs,
        numeral,
        lodash,
        qs,
        permission,

      }
    },
    $constant() {
      return constant
    }
  },
  methods: {
    changeHash(value) {
      const origin = window.location.origin
      history.replaceState("", "", `${origin}/#${this.$route.path}?opt=${value}`)
    },
    getFullPermission(str) {
      let routeName = this.$route.path
      return str + routeName
    }
  }
})

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