<template>
  <div class="onlineMonitor container">
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <div class="containerIn" ref="containerIn" style="padding: 30px">
      <line-chart domId="accessLineChart" 
      :title="accessLineData.title" 
      :catalog="accessLineData.catalog" 
      :data="accessLineData.data" 
      :width="accessLineData.width" 
      :height="accessLineData.height" 
      :y-name="yName"  
      :a-colori="accessLineData.aColor1" 
      :a-colorii="accessLineData.aColor2"
      ></line-chart>
    </div>
  </div>
</template>

<script>
  import Util from '@/utils/util.js'
  import BreadCrumb from '@/components/BreadCrumb.vue'
  import echarts from 'echarts'
  import LineChart from '@/components/LineChart.vue'
  import Api from '@/api/index.js'

  export default {
    components: { 
      BreadCrumb,
      LineChart
    },
    data () {
      return { 
        isLoadingAccessLineData: false,
        breadCrumbList: [], // 面包屑
        axisMaxLength: 60,
        accessLineData: {
          title: '在线监控数据统计',
          // width: '1100px',
          // height: '480px',
          catalog: [],
          data: [],
          aColor1: '#ffd897',
          aColor2: '#fdfdfd'
        },
        yName: '访问量',
        ws: null
      }
    },
    mounted () {
      this.breadCrumbList = [
        { title: '服务监测' },
        { title: '在线监控' }
      ]
      this.webSocketConnect()
    },
    destroyed () {
      // 断开连接
      this.ws.close()
    },
    methods: {
      // 发送websocket
      webSocketConnect () {
        this.initChart()
        let _this = this
        this.ws = new WebSocket(Api.wsUrl)
        this.ws.onopen = function () {
          // console.log('Info: WebSocket connection opened.')
          // websocket.send(message)
        }
        // 接收信息
        this.ws.onmessage = function (event) {
          let data = JSON.parse(event.data)
          if (data.status === 0) {
            while (_this.accessLineData.catalog.length > _this.axisMaxLength) {
              _this.accessLineData.catalog.splice(0, 1)
              _this.accessLineData.data.splice(0, 1)
            }
            // console.log(Util.getNowTime())
            _this.accessLineData.catalog.push(Util.getNowTime())
            _this.accessLineData.data.push(data['data'])
          } else {
            _this.$message({
              type: 'warning',
              message: '请求数据失败'
            })
          }
        }
        // 关闭
        this.ws.onclose = function () {
          // console.log('Info: WebSocket connection closed.')
        }
      },
      initChart () {       
        // this.chart = echarts.init(this.$refs.myEchart)
        
        // this.option.xAxis.data = []
        // this.option.series.data = []

        this.accessLineData.catalog = []
        this.accessLineData.data = []
      },
      // 获取当前的时间
      getTimeStr () {
        var myDate = new Date()
        var mytime = myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
        return mytime
      }
    }
  }            
</script>

<style lang="scss" scoped>
  .onlineMonitor{
    width: 100%;
    height: 100%;
    overflow: hidden;

    .dynamicCharts{ 
      padding-top: 10px;
    }
  }
</style>
