<template>
  <div class="map">
    <div
      class="full-width flex flex-center"
      style="margin-top: -40px; margin-bottom: 25px"
    >
      <div class="center-count flex flex-center">
        <img class="count mr-15" src="@/assets/biz-img/count.png" />
        <div class="flex flex-center" v-for="i in userLoginCount.length">
          <div class="ml-5 bold flex-center flex count-number">
            {{ userLoginCount.split('')[i - 1] }}
          </div>
        </div>
      </div>
    </div>

    <div class="content" ref="mapbox"></div>
  </div>
</template>
<script>
import 'echarts/map/js/china'
import jsonp from 'jsonp'
export default {
  data() {
    return {
      lockReconnect: false, // 是否真正建立连接
      timeout: 58 * 1000, // 58秒一次心跳
      timeoutObj: null, // 心跳心跳倒计时
      serverTimeoutObj: null, // 心跳倒计时
      timeoutnum: null, // 断开 重连倒计时
      userLoginCount: '000000',
      option: {
        series: [
          {
            type: 'map',
            map: 'china',
            label: {
              show: true,
              color: '#ffffff',
              fontSize: 8
            },
            itemStyle: {
              areaColor: '#5999ec'
            },
            roam: false,
            zoom: 1.2,
            emphasis: {
              label: {
                color: '#ffffff',
                fontSize: 12
              },
              itemStyle: {
                areaColor: '#ecbe7a'
              }
            },
            data: [
              { name: '北京', selected: false, value: '11' },
              { name: '天津', selected: false, value: '12' },
              { name: '上海', selected: false, value: '31' },
              { name: '重庆', selected: false, value: '50' },
              { name: '河北', selected: false, value: '13' },
              { name: '河南', selected: false, value: '41' },
              { name: '云南', selected: false, value: '53' },
              { name: '辽宁', selected: false, value: '21' },
              { name: '黑龙江', selected: false, value: '23' },
              { name: '湖南', selected: false, value: '43' },
              { name: '安徽', selected: false, value: '34' },
              { name: '山东', selected: false, value: '37' },
              { name: '新疆', selected: false, value: '65' },
              { name: '江苏', selected: false, value: '32' },
              { name: '浙江', selected: false, value: '33' },
              { name: '江西', selected: false, value: '36' },
              { name: '湖北', selected: false, value: '42' },
              { name: '广西', selected: false, value: '45' },
              { name: '甘肃', selected: false, value: '62' },
              { name: '山西', selected: false, value: '14' },
              { name: '内蒙古', selected: false, value: '15' },
              { name: '陕西', selected: false, value: '61' },
              { name: '吉林', selected: false, value: '22' },
              { name: '福建', selected: false, value: '35' },
              { name: '贵州', selected: false, value: '52' },
              { name: '广东', selected: false, value: '44' },
              { name: '青海', selected: false, value: '63' },
              { name: '西藏', selected: false, value: '54' },
              { name: '四川', selected: false, value: '51' },
              { name: '宁夏', selected: false, value: '64' },
              { name: '海南', selected: false, value: '46' },
              { name: '台湾', selected: false, value: '71' },
              { name: '香港', selected: false, value: '81' },
              { name: '澳门', selected: false, value: '82' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.mapcharts = this.$echarts.init(this.$refs.mapbox)
    this.mapcharts.setOption(this.option)
    this.getUserLoginCount()
    this.initWebSocket()
  },
  unmounted() {
    this.websock.close() // 离开路由之后断开websocket连接
  },
  methods: {
    getUserLoginCount() {
      this.$api.biz.getUserLoginCount().then(res => {
        if (res.code === 200) {
          this.userLoginCount = res.data.toString()
        }
      })
    },
    initWebSocket() {
      const wsuri = 'ws://localhost:8201/websocket/bigData001'
      this.websock = new WebSocket(wsuri)
      this.websock.onmessage = this.websocketonmessage
      // 连接建立时触发
      this.websock.onopen = this.websocketonopen
      // 通信发生错误时触发
      this.websock.onerror = this.websocketonerror
      // 连接关闭时触发
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() {
      console.log('已连接')
      // 开启心跳
      this.start()
    },
    // 通信发生错误时触发
    websocketonerror() {
      console.log('出现错误')
      this.reconnect()
    },
    // 客户端接收服务端数据时触发
    websocketonmessage(e) {
      console.log('接收到消息：' + e.data)
      const json = JSON.parse(e.data)
      this.userLoginCount = json.userLoginCount.toString()
      this.option.series[0].data.map(item => {
        if (item.value === json.code) {
          item.selected = true
        }
      })
      this.mapcharts.setOption(this.option)
      setTimeout(() => {
        //延迟两秒后取消选中
        this.option.series[0].data.map(item => {
          if (item.value === json.code) {
            item.selected = false
          }
        })
        this.mapcharts.setOption(this.option)
      }, 2000)
    },

    // 连接关闭时触发
    websocketclose(e) {
      console.log('断开连接', e)
      // 重连
      this.reconnect()
    },
    reconnect() {
      // 重新连接
      const that = this
      if (that.lockReconnect) {
        return
      }
      that.lockReconnect = true
      // 没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum)
      that.timeoutnum = setTimeout(function () {
        // 新连接
        that.initWebSocket()
        that.lockReconnect = false
      }, 5000)
    },

    start() {
      // 开启心跳
      console.log('开启心跳')
      const self = this
      self.timeoutObj && clearTimeout(self.timeoutObj)
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
      self.timeoutObj = setTimeout(function () {
        // 这里发送一个心跳，后端收到后，返回一个心跳消息，
        console.log(self.websock)
        if (self.websock.readyState === 1) {
          // 如果连接正常
          self.websock.send('heartCheck') // 这里可以自己跟后端约定
        } else {
          // 否则重连
          self.reconnect()
        }
        self.serverTimeoutObj = setTimeout(function () {
          // 超时关闭
          // self.websock.close()
        }, self.timeout)
      }, self.timeout)
    }
  }
}
</script>
<style lang="scss" scoped>
.map {
  width: 830px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0);
  margin-top: 40px;
}
.content {
  width: 830px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0);
}
.center-count {
  align-items: center;
  border: 1px solid #1b6ad2;
  width: 550px;
  height: 90px;
  margin-bottom: -100px;
  background: rgba(11, 23, 38, 0.78);
  z-index: 9999;
  .count {
    width: 165px;
    height: 24px;
  }
  .count-number {
    width: 20px;
    background: #bad5e0;
    font-size: 26px;
    padding-right: 3px;
    padding-left: 3px;
    color: #2c6e8b;
    border-radius: 5px;
    z-index: 9999;
  }
}
</style>
