import Vue from 'vue'
import '@/styles/index.scss'

import App from './App.vue'
import { Loading, Message, MessageBox, Notification, Button, Slider, Tooltip } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'
import store from './store'
import SvgIcon from 'vue-svgicon'
import '@/icons/components'
import VueClipboard from 'vue-clipboard2'

Vue.use(Loading.directive)
Vue.use(Slider)
Vue.use(Tooltip)
Vue.use(Button)
Vue.use(SvgIcon, {
  tagName: 'svg-icon'
})
Vue.use(VueClipboard)

Vue.config.productionTip = false

Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

const CustomerPlugin = {
  install(_vue: typeof Vue, options?: any) {
    _vue.prototype.comingSoon = () => {
      Message({
        message: 'coming soon',
        type: 'info',
        duration: 5 * 1000
      })
    }
  }
}
Vue.use(CustomerPlugin)

new Vue({
  router,
  store,
  render: (h) => h(App),
  mounted() {
    // You'll need this for renderAfterDocumentEvent.
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')