// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
// element css
import '@/theme/index.css'

import '@/assets/css/base.scss'
import '@/assets/font/font.css'
import '@/assets/iconfont/iconfont.css'
import '@/assets/iconfont/iconfont.js'
import '@/utils/rem.js'

import { mockXHR } from './mock'

// 全局公共组件
import NoData from '@/components/NoData'
import MenuItem from '@/components/menu/MenuItem'
import PanelTitle1 from '@/components/title/PanelTitle1'
import TitleThree from '@/components/title/TitleThree'
import request from './utils/request'
import Container from '@/components/layout/Container'
import ModularLayout from '@/components/layout/ModularLayout'
import PanelContainer from '@/components/layout/PanelContainer'
import ChartLayout from '@/components/layout/chartLayout'
import Corner1 from '@/components/corner/Corner1'
import qs from 'qs'

// 滚动条插件
import vuescroll from 'vuescroll/dist/vuescroll-native'
import 'vuescroll/dist/vuescroll.css'

// echart
import echarts from 'echarts'
// 百度地图
// import 'echarts/extension/bmap/bmap.js'

// 注册dataV组件
import dataV from '@jiaminghi/data-view'
// 引入animate.css
import animate from 'animate.css'
// 高德地图
// import VueAMap from 'vue-amap'
// Vue.use(VueAMap)

// elementUI
import ElementUI from 'element-ui'

// 在main.js中加入下面代码
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'

// 导入mars3d插件（按需使用，需要先npm install）
// import 'mars3d-space'
Vue.use(dataV)
Vue.use(animate)
Vue.use(ElementUI)

// import { mapActions } from 'vuex'

// 开启模拟数据
// if (process.env.NODE_ENV === 'development') {
//   mockXHR()
// }
Vue.component('NoData', NoData)
Vue.component('MenuItem', MenuItem)
Vue.component('PanelTitle1', PanelTitle1)
Vue.component('TitleThree', TitleThree)
Vue.component('container', Container)
Vue.component('modularLayout', ModularLayout)
Vue.component('panelContainer', PanelContainer)
Vue.component('chartLayout', ChartLayout)
Vue.component('corner1', Corner1)
Vue.prototype.request = request
Vue.prototype.qs = qs
Vue.use(vuescroll, {
  ops: {
    bar: {
      showDelay: 1000,
      keepShow: false,
      background: '#cecece',
      opacity: 0.3,
      size: '.03rem',
      /** 是否只在滚动的时候现实滚动条 */
      onlyShowBarOnScroll: false
    }
  }
})
Vue.prototype.$echarts = echarts

Vue.prototype.mars3d = mars3d

// websocket
let ws = new WebSocket(store.state.websocketUrl)
Vue.prototype.$ws = ws
ws.onmessage = function (msg) { // 接收消息触发
  let data = msg.data.replace(/\{/g, '') // 左括号替换成空
  console.log(data)
  // 如果是双屏，则触发doubleChange
  // 其他字符替换括号转空，引号转空
  data = data.replace(/\}/g, '') // 右括号替换成空
  data = data.replace(/\"/g, '') // 引号替换成空
  if (data.includes('doubleScreen')) {
    store.dispatch('changeDoubleScreen', data.split(':')[1])
  } else {
    let component = data.split(',')[0].split(':')[1]
    let curStatus = data.split(',')[1].split(':')[1]
    if (component && curStatus) {
      store.dispatch('changeStatus', {component, curStatus: Number(curStatus)})
    }
  }
}
ws.onopen = function () { // 连接成功触发
  console.log('WebSocket连接成功')
  ws.send('WebSocket,hello!') // 向服务端发送数据
}
ws.onerror = function () { // 连接失败触发
  console.log('WebSocket连接失败')
}
ws.onclose = function () { // 关闭连接触发
  console.log('WebSocket连接关闭')
}
setInterval(() => {
  ws.send('WebSocket,refresh!') // 向服务端发送数据
}, 50000)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})