<template>
  <div style="width: auto; height: 100%;">
    <vue-scroll>
      <div ref="all">
<!--        <el-header class="header-button-box">-->
<!--          <div class="search-input-box">-->
<!--            <label>{{$t("Performance.performanceEvent") + '：'}}</label>-->
<!--            <el-select v-model="performType"-->
<!--                       size="mini"-->
<!--                       multiple-->
<!--                       style="width: 280px"-->
<!--                       collapse-tags-->
<!--                       :multiple-limit=5-->
<!--                       :disabled="F"-->
<!--                       @change="queryRtEventChange"-->
<!--                       :placeholder="$t('common.selectOption')">-->
<!--              <el-option-->
<!--                v-for="item in performTypeList"-->
<!--                :key="item.deviceParam"-->
<!--                :label="item.peformTypeName"-->
<!--                :value="item.deviceParam">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
<!--          <div class="search-input-box">-->
<!--            <label>{{ $t("RtPerformance.devicePort") }}：</label>-->
<!--            <el-select-->
<!--              size='mini'-->
<!--              v-model="queryRtPort"-->
<!--              :placeholder="$t('common.placeholder')"-->
<!--              multiple-->
<!--              :disabled="F"-->
<!--              collapse-tags-->
<!--              :multiple-limit=4-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="item in queryRtPortList"-->
<!--                :key="item.label"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
<!--          <div class="search-input-box">-->
<!--            <el-button size='mini' icon="el-icon-search" type="primary" @click="getRt()">-->
<!--              {{ $t("common.look")}}-->
<!--            </el-button>-->
<!--            <el-button size='mini' icon="el-icon-search" type="primary" @click="clearRt()">-->
<!--              {{ $t("common.clear")}}-->
<!--            </el-button>-->
<!--          </div>-->
<!--        </el-header>-->
        <div ref="containersAll" id="containersAll"></div>
      </div>
    </vue-scroll>
  </div>
</template>
<script>
import RtPerformanceService from '@/domain/services/RtPerformanceService'
import HelperUtil from '@/utils/HelperUtil'
import Echart from 'echarts'
import legitimacyCheck from '../../utils/legitimacyCheck'
export default {
  name: 'RtPerformance',
  data: function () {
    return {
      monitorType: ['交换机', '服务器', '存储器', '数据中心'],
      performType: [],
      performTypeList: [],
      performTypeList1: {},
      queryRtEvent: [],
      queryRtEventList: [],
      queryRtPort: [],
      flag: true,
      queryRtPortList: [],
      fullWidth: 300,
      fullHeight: document.body.clientHeight,
      div_id: [],
      echart: [],
      timeEchart: null,
      deviceKey: '',
      returnresult: []
    }
  },
  created () {
    this.getPerformType()
    this.genArr()
    // this.returnresult = this.getEvent()
    // this.queryRtEventList = this.getEvent()
    // this.queryRtEvent[0] = this.queryRtEventList[0]
  },
  methods: {
    getRt: function () {
      this.initDivFirst()
      this.initDiv()
      this.initEchart()
      this.echartInit()
      // this.addSeries()
      // this.loadEchartData1(this.deviceKey, this.performType, this.queryRtPort, this.echart, this)
    },
    echartInit: function () {
      var b = new Date()
      for (var i = 0; i < this.monitorType.length; i++) {
        var seriesList = []
        var a = []
        for (var j = -10; j < 0; j++) {
          a.push([b.getTime() + 3600 * j, Math.random() * 10])
        }
        seriesList.push({
          name: this.monitorType[i],
          type: 'line',
          data: a
        })
        this.echart[i].setOption({
          series: seriesList,
          legend: {
            left: 'center',
            top: 30
          },
          title: {
            text: '监测类型' + this.monitorType[i],
            x: 'center'
          },
          yAxis: {
            name: this.monitorType[i],
            type: 'value'
          },
          xAxis:
            {
              type: 'time',
              // data: ['2019-1-1', '2019-2-1', '2019-3-1', '2019-4-1', '2019-5-1', '2019-6-1', '2019-7-1', '2019-8-1', '2019-9-1', '2019-10-2'],
              splitLine: {
                show: false
              },
              boundaryGap: ['10%', '10%'],
              axisLabel: {
                showMinLabel: true,
                showMaxLabel: true
              }
            }
        })
      }
    },
    getPerformType: function () {
      let _this = this
      RtPerformanceService.getRtEventType().then(result => {
        _this.performTypeList = Object.values(result)
        _this.performTypeList1 = result
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    genArr: function () {
      for (var i = 1; i < 25; i++) {
        this.queryRtPortList.push({
          value: i,
          label: i
        })
      }
    },
    clearRt: function () {
      this.clearAll()
    },
    loadEchartData1: function (valDevice, rtData, rtPort, chart, _this) {
      this.flag = false
      var op = []
      var eventPort = new Array(rtData.length)
      for (var k = 0; k < rtData.length; k++) {
        eventPort[k] = new Array(rtPort.length)
      }
      for (var i = 0; i < this.performType.length; i++) {
        op[i] = this.echart[i].getOption()
        // if (this.contains(this.performType[i])) {
        if (this.performTypeList1[this.performType[i]].resourceType === 1) {
          for (var m = 0; m < this.queryRtPort.length; m++) {
            eventPort[i][m] = op[i].series[m].data
          }
        } else {
          eventPort[i] = op[i].series[0].data
        }
      }
      this.timeEchart = setInterval(function () {
        RtPerformanceService.rtPerformDatas(valDevice, rtPort, rtData).then(result => {
          for (var j = 0; j < rtData.length; j++) {
            // if (_this.contains(rtData[j])) {
            if (_this.performTypeList1[_this.performType[j]].resourceType === 1) {
              var portData = []
              for (var n = 0; n < rtPort.length; n++) {
                var array1 = []
                // array1.push(result.time, Math.random())
                eventPort[j][n].shift()
                eventPort[j][n].push(result[j][n])
                portData.push(
                  {
                    data: eventPort[j][n]
                  }
                )
              }
              chart[j].setOption({
                series: portData
              })
            } else {
              eventPort[j].shift()
              eventPort[j].push(result[j])
              chart[j].setOption({
                series: {
                  data: eventPort[j]
                }
              })
            }
          }
        }).catch(err => {
          // this.InfoTip.errorTip(this, err);
        })
      }, 1000)
    },
    addSeries1: function () {
      for (var i = 0; i < this.queryRtEvent.length; i++) {
        var seriesList = []
        if (this.contains(this.queryRtEvent[i])) {
          for (var j = 0; j < this.queryRtPort.length; j++) {
            seriesList.push({
              name: '端口' + this.queryRtPort[j],
              data: this.getData1(),
              type: 'line',
              smooth: true
            })
          }
        } else {
          seriesList.push({
            name: this.queryRtEvent[i],
            type: 'line',
            smooth: 'true',
            data: this.getData1(),
            markLine: {
              silent: true,
              data: [{
                yAxis: 0.3
              }, {
                yAxis: 0.7
              }]
            }
          })
        }
        this.echart[i].setOption({
          series: seriesList,
          legend: {
            left: 'center',
            top: 30
          },
          title: {
            text: this.queryRtEvent[i] + '设备' + this.deviceKey.displayName,
            x: 'center'
          },
          yAxis: {
            name: this.queryRtEvent[i]
          },
          color: ['#7cb5ec', '#434348', '#90ed7d']
        })
      }
    },
    addSeries: function () {
      for (var i = 0; i < this.performType.length; i++) {
        var seriesList = []
        if (this.performTypeList1[this.performType[i]].resourceType === 1) {
          for (var j = 0; j < this.queryRtPort.length; j++) {
            seriesList.push({
              name: this.queryRtPort[j] + '端口',
              data: this.getData1(),
              type: 'line',
              smooth: true
            })
          }
        } else {
          seriesList.push({
            name: this.performType[i],
            type: 'line',
            smooth: 'true',
            data: this.getData1()
          })
        }
        this.echart[i].setOption({
          series: seriesList,
          legend: {
            left: 'center',
            top: 30
          },
          title: {
            text: '设备' + this.deviceKey.displayName + this.performType[i],
            x: 'center'
          },
          yAxis: {
            name: this.performType[i]
          }
          // color: ['#7cb5ec', '#434348', '#90ed7d']
        })
      }
    },
    initEchart: function () {
      for (var j = 0; j < this.monitorType.length; j++) {
        var div_e = document.getElementById(this.div_id[j])
        this.echart[j] = Echart.init(div_e)
        this.echart[j].setOption(
          {
            animation: false,
            tooltip: {
              trigger: 'axis'
            },
            // color: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
            //   '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
            // color: ['#7cb5ec'],
            // visualMap: {
            //   show: false,
            //   top: 10,
            //   right: 10,
            //   pieces: [{
            //     gt: 0,
            //     lte: 0.3,
            //     color: '#ffde33'
            //   }, {
            //     gt: 0.3,
            //     lte: 0.7,
            //     color: '#660099'
            //   }, {
            //     gt: 0.7,
            //     color: '#7e0023'
            //   }],
            //   outOfRange: {
            //     color: '#999'
            //   }
            // },
            toolbox: {
              show: true,
              orient: 'vertical',
              itemSize: 15,
              itemGap: 5,
              showTitle: false,
              // left: '92%',
              right: '30',
              top: '20',
              // right: '20%',
              feature: {
                magicType: {
                  title: {
                    line: '切换为折线图',
                    bar: '切换为柱状图'
                  },
                  type: ['line', 'bar']
                },
                saveAsImage: {
                  show: true,
                  type: 'png',
                  // backgroundColor: "#fff333",
                  // title: "保存图片",
                  pixelRatio: 1,
                  excludeComponents: ['toolbox']
                },
                dataView: {
                  show: true,
                  backgroundColor: '#78633e',
                  textareaColor: 'red'
                }
              }
            }
          }
        )
      }
    },
    getData1: function () {
      var data = [],
        time = (new Date().getTime()),
        i
      for (i = -100; i < 0; i += 1) {
        data.push([
          time + i * 1000, 0
        ])
      }
      return data
    },
    initDivFirst: function () {
      var nd = this.$refs.containersAll
      if (nd.children.length > 0) {
        this.closeAll()
      }
      var par = this.$refs.containersAll
      var chids = par.childNodes
      for (var i = chids.length - 1; i >= 0; i--) {
        par.removeChild(chids[i])
      }
    },
    initDiv: function () {
      var div_parent = this.$refs.containersAll
      this.fullWidth = div_parent.clientWidth
      // this.fullHeight = div_parent.clientHeight
      this.fullHeight1 = document.documentElement.clientHeight - 200
      this.fullHeight = document.documentElement.clientHeight
      for (var m = 0; m < this.monitorType.length; m++) {
        var div = document.createElement('div')
        this.div_id[m] = 'chartDiv_' + m
        div.setAttribute('id', this.div_id[m])
        // div.setAttribute('style', 'width: 500px;height: 500px;')
        if (this.monitorType.length === 1) {
          // div.setAttribute('style', 'width: 100%;height: 500px')
          div.setAttribute('style', 'width:' + this.fullWidth + 'px;height:' + this.fullHeight1 + 'px;')
        } else {
          if (m === this.monitorType.length - 1) {
            div.setAttribute('style', 'width:' + this.fullWidth / 2 + 'px;height: 500px;float: left')
            // div.setAttribute('style', 'width:' + this.fullWidth / 2 + 'px;height:' + this.fullHeight / 2 + 'px')
            // div.setAttribute('style', 'width:' + this.fullWidth / 2 + 'px;height:500%;float: left')
          } else {
            div.setAttribute('style', 'width:' + this.fullWidth / 2 + 'px;height:500px;float: left')
            // div.setAttribute('style', 'width:' + this.fullWidth / 2 + 'px;height:' + this.fullHeight / 2 + 'px')
            // div.setAttribute('style', 'width:' + this.fullWidth / 2 + 'px;height:' + this.fullHeight / 2 + 'px;float: left')
          }
        }
        div.setAttribute('class', 'box')
        div_parent.appendChild(div)
      }
    },
    contains: function (value) {
      var flag = false
      switch (value) {
        case 'shangxing':
          flag = true
          break
        case 'cpu':
          flag = false
          break
        case 'temperature':
          flag = false
          break
        case 'error':
          flag = true
          break
      }
      return flag
    },
    portOr: function (type) {
      for (var j = 0; j < this.performTypeList.length; j++) {
        if (this.performTypeList1[type].resourceType === 0) {
          return true
        }
      }
    },
    queryRtEventChange: function () {
      let deviceCheck = legitimacyCheck()
      var result = deviceCheck.textNullCheck(this.performType)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('RtPerformance.performanceEvents'))
        return false
      }
      return true
    },
    check: function () {
      let rtCheck = legitimacyCheck()
      var _this = this
      if (this.performType.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('RtPerformance.performanceEvents'))
        return false
      } else {
        var result = rtCheck.textNullCheck(this.queryRtPort)
        var flag = _this.performType.some(function (val) {
          return _this.performTypeList1[val].resourceType === 1
        })
        if (result && !flag) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('RtPerformance.performancePortEvents'))
          return false
        }
        if (flag && !result) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('RtPerformance.devicePort'))
          return false
        } else {
          return true
        }
      }
    },
    clearAll: function () {
      if (this.timeEchart) {
        if (this.timeEchart) {
          clearInterval(this.timeEchart)
        }
      }
    },
    closeAll: function () {
      if (this.echart) {
        for (var i = 0; i < this.echart.length; i++) {
          this.echart[i].clear()
        }
      }
      if (this.timeEchart) {
        clearInterval(this.timeEchart)
      }
    },
    closeAll1: function () {
      if (this.echart) {
        for (var i = 0; i < this.echart.length; i++) {
          this.echart[i].dispose()
        }
      }
      if (this.timeEchart) {
        clearInterval(this.timeEchart)
      }
    }
  },
  mounted: function () {
    this.getRt()
    window.addEventListener('resize', this.resizeResolve())
  },
  destroyed: function () {
    this.closeAll1()
  },
  beforeDestroy: function () {
    window.removeEventListener('resize', this.resizeResolve())
  },
  computed: {
    deviceKeyList () {
      return this.$store.state.passDev
    }
  },
  watch: {
    deviceKeyList (newVal) {
      this.flag = true
      this.F = false
      this.deviceKey = newVal
      this.initDivFirst()
    },
    fullWidth: {
      immediate: true,
      deep: true,
      handler: function () {
        if (this.echart) {
          this.resizeResolve()
        }
      }
    }
  }
}
</script>
<style lang="scss">
  .box {
    /*width: 800px;*/
    /*height: 600px;*/
    display: inline-block;
    border: 1px solid #ccc;
    overflow: hidden;
    /*position: relative;*/
  }
</style>