<template>
  <div class="map">
    <div class="full-width flex flex-center">
      <div class="chart-m-l-c">
        <div class="center-count flex flex-center">
          <img class="img-count mr-15" src="@/assets/biz-img/count.png" />
          <div class="flex flex-center count">
            <b v-for="(item, index) in userLoginCount.split('')" :key="index">
              <div :style="{ top: -item * 40 + 'px' }">
                <i v-for="(ic, indexc) in 10" :key="indexc"> {{ ic - 1 }}</i>
              </div>
            </b>
          </div>
        </div>
      </div>
    </div>

    <div class="content" ref="mapbox"></div>
  </div>
</template>
<script>
import 'echarts/map/js/china'
export default {
  data() {
    return {
      prosecutorArr: ['0', '0', '0', '0', '0', '0', '0', '0'],
      numbers: '59832',
      lockReconnect: false, // 是否真正建立连接
      timeout: 58 * 1000, // 58秒一次心跳
      timeoutObj: null, // 心跳心跳倒计时
      serverTimeoutObj: null, // 心跳倒计时
      timeoutnum: null, // 断开 重连倒计时
      userLoginCount: '000000',
      option: {
        visualMap: {
          show: false,
          min: 0,
          max: 1000,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: false,
          orient: 'horizontal',
          inRange: {
            color: ['#e0ffff', '#006edd'],
            symbolSize: [30, 100]
          }
        },
        series: [
          {
            type: 'map',
            map: 'china',
            label: {
              show: true,
              color: '#ffffff',
              fontSize: 8
            },
            itemStyle: {
              areaColor: '#5999ec'
            },
            roam: false,
            zoom: 1.25,
            emphasis: {
              label: {
                color: '#ffffff',
                fontSize: 12
              },
              itemStyle: {
                areaColor: '#ecbe7a'
              }
            },
            data: [
              { name: '北京', selected: false, code: '11', value: '616' },
              { name: '天津', selected: false, code: '12', value: '120' },
              { name: '上海', selected: false, code: '31', value: '310' },
              { name: '重庆', selected: false, code: '50', value: '500' },
              { name: '河北', selected: false, code: '13', value: '530' },
              { name: '河南', selected: false, code: '41', value: '710' },
              { name: '云南', selected: false, code: '53', value: '830' },
              { name: '辽宁', selected: false, code: '21', value: '410' },
              { name: '黑龙江', selected: false, code: '23', value: '830' },
              { name: '湖南', selected: false, code: '43', value: '730' },
              { name: '安徽', selected: false, code: '34', value: '340' },
              { name: '山东', selected: false, code: '37', value: '370' },
              { name: '新疆', selected: false, code: '65', value: '650' },
              { name: '江苏', selected: false, code: '32', value: '320' },
              { name: '浙江', selected: false, code: '33', value: '330' },
              { name: '江西', selected: false, code: '36', value: '760' },
              { name: '湖北', selected: false, code: '42', value: '220' },
              { name: '广西', selected: false, code: '45', value: '350' },
              { name: '甘肃', selected: false, code: '62', value: '420' },
              { name: '山西', selected: false, code: '14', value: '540' },
              { name: '内蒙古', selected: false, code: '15', value: '950' },
              { name: '陕西', selected: false, code: '61', value: '610' },
              { name: '吉林', selected: false, code: '22', value: '220' },
              { name: '福建', selected: false, code: '35', value: '820' },
              { name: '贵州', selected: false, code: '52', value: '820' },
              { name: '广东', selected: false, code: '44', value: '340' },
              { name: '青海', selected: false, code: '63', value: '730' },
              { name: '西藏', selected: false, code: '54', value: '840' },
              { name: '四川', selected: false, code: '51', value: '410' },
              { name: '宁夏', selected: false, code: '64', value: '640' },
              { name: '海南', selected: false, code: '46', value: '460' },
              { name: '台湾', selected: false, code: '71', value: '710' },
              { name: '香港', selected: false, code: '81', value: '810' },
              { name: '澳门', selected: false, code: '82', value: '820' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.mapcharts = this.$echarts.init(this.$refs.mapbox)
    this.mapcharts.setOption(this.option)
    this.getUserLoginCount()
    this.initWebSocket()
    this.plusNPrAll()
  },
  unmounted() {
    this.websock.close() // 离开路由之后断开websocket连接
  },
  methods: {
    PrefixInteger(num, length) {
      //给数字前面补零 比如‘59832’补成8位即位‘00059832’
      return (Array(length).join('0') + num).slice(-length)
    },
    plusNPrAll() {
      //为了看效果，点击上面html中的iconfont触发，refreshLeft方法
      const res = this.PrefixInteger(this.numbers, 8)
      this.prosecutorArr = res.toString().split('')
    },

    getUserLoginCount() {
      this.$api.biz.getUserLoginCount().then(res => {
        if (res.code === 200) {
          this.userLoginCount = res.data.toString()
        }
      })
    },
    initWebSocket() {
      const wsuri =
        'wss://bizdata.wutongshucloud.com/bigws/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.code === json.code) {
          item.selected = true
        }
      })
      this.mapcharts.setOption(this.option)
      setTimeout(() => {
        //延迟两秒后取消选中
        this.option.series[0].data.map(item => {
          if (item.code === 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: 930px;
  height: 530px;
  background-color: rgba(0, 0, 0, 0);
  margin-top: 0px;
}
.content {
  width: 930px;
  height: 530px;
  background-color: rgba(0, 0, 0, 0);
  margin-top: -105px;
}

.chart-m-l-c {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 550px;
  height: 90px;
  padding: 10px 0;
  float: left;
  .center-count {
    border: 1px solid #1b6ad2;
    width: 550px;
    height: 90px;
    background: rgba(11, 23, 38, 0.78);
    z-index: 9999;
    .img-count {
      width: 165px;
      height: 24px;
    }
    .count {
      height: 60px;
      float: left;
      padding: 0 5px;
      b {
        width: 30px;
        height: 40px;
        float: left;
        color: #000;
        margin-right: 15px;
        text-align: center;
        line-height: 40px;
        position: relative;
        z-index: 3;
        overflow: hidden;
        div {
          width: 100%;
          height: 400px;
          position: absolute;
          left: 0;
          top: 0;
          transition: all 0.8s ease-in-out;
          i {
            background: #bad5e0;
            font-size: 26px;
            color: #2c6e8b;
            border-radius: 5px;
            z-index: 9999;
            width: 100%;
            height: 40px;
            float: left;
            font-style: normal;
          }
        }
      }
    }
    span {
      line-height: 40px;
      float: left;
    }

    span.iconfont {
      width: 40px;
      height: 40px;
      line-height: 40px;
      float: right;
      text-align: center;
      cursor: pointer;
      color: #0071ff;
    }

    span.iconfont:hover {
      color: #5ec2a6;
    }
  }
}
</style>
