<template>
  <div ref="echartdiv" class="echartdiv">
    <div style="padding-left: 2%;padding-top: 10px">
      <strong style="color: #2fa0a3">设备：</strong>
      <el-select v-model="eqId" placeholder="请选择设备" @change="getEquipmentDataType">
        <el-option
          v-for="item in equipmentInfoList"
          :key="item.equipmentId"
          :label="item.equipmentName"
          :value="item.equipmentId"
        />
      </el-select>
    </div>
    <div class="chartbox" ref="chartbox" style="width: 100%">
      <div v-for="(items,index) in equipmentDataTypeList" ref="borderBox" style="width:20%;height: 150px;display: inline-block;z-index:1000;padding-left: 0.3%">
        <dv-border-box-10 style="width:100%;margin-top: 10px" :color="['#41fafd']">
          <div :id="`echarts${index}`" :style="{width:wid + 'px',height:'150'+'px'}" />
        </dv-border-box-10>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Environment',
  data() {
    return {
      eqId: '',
      timer: '',
      equipmentDataTypeList: [],
      equipmentInfoList: [],
      wid: 306
    }
  },
  destroyed() {
    clearInterval(this.timer) // 关闭循环
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$axios.get('/dashboard/getEquipmentInfo').then(res => {
        this.equipmentInfoList = res.data
        if (this.equipmentInfoList.length !== 0) {
          this.eqId = this.equipmentInfoList[0].equipmentId
          this.getEquipmentDataType()
          this.timer = setInterval(this.getEquipmentDataType, 1000 * 60)
        }
      }).catch(error=>{
        this.$message.error("获取设备信息异常："+error)
      })
    },
    getEquipmentDataType() {
      if (this.eqId !== '') {
        this.$axios.get('/dashboard/getEquipmentDataType/' + this.eqId).then(res => {
          this.equipmentDataTypeList = res.data
          this.$nextTick(function() {
            this.drawEcharts(this.equipmentDataTypeList)
          })
        }).catch(error=>{
          this.$message.error("获取设备属性异常："+error)
        })
      }
    },
    drawEcharts(list) {
      for (var i = 0; i < list.length; i++) {
        var data = []
        var time = []
        if (document.getElementById('echarts' + i) != null) {
          var dataMap = list[i].timeAndDataDtoList
          if(dataMap.length>0){
            const varchart = this.$echarts.init(document.getElementById('echarts' + i))
            var newData = dataMap[dataMap.length-1].val === null ? '无' : dataMap[dataMap.length-1].val
            var title = list[i].dataTypeName + ':' + newData + '(' + list[i].unit+ ')'
            if (dataMap.length === 0) {
              title = list[i].dataTypeName + '(' + list[i].unit + ')' + '\n' + '无数据'
            } else {
              for (var j = 0; j < dataMap.length; j++) {
                time.push(dataMap[j].time)
                data.push(dataMap[j].val)
              }
            }
            var option = {
              title: [{
                text: title,
                textStyle: {
                  // 文字颜色
                  color: '#FFFFFF',
                  // 字体风格,'normal','italic','oblique'
                  fontStyle: 'normal',
                  // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                  fontWeight: 'bold',
                  // 字体系列
                  fontFamily: 'sans-serif',
                  // 字体大小
                  fontSize: 14
                }
              }],
              grid: {
                top: '20%',
                left: '3%',
                /* right: '4%',*/
                bottom: '15%',
                containLabel: true
              },
              tooltip: {
                trigger: 'axis',
                position: function(point, params, dom, rect, size) {
                  // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                  // 提示框位置
                  var x = 0 // x坐标位置
                  var y = 0 // y坐标位置
                  // 当前鼠标位置
                  var pointX = point[0]
                  var pointY = point[1]
                  // 外层div大小
                  // var viewWidth = size.viewSize[0];
                  // var viewHeight = size.viewSize[1];
                  // 提示框大小
                  var boxWidth = size.contentSize[0]
                  var boxHeight = size.contentSize[1]
                  // boxWidth > pointX 说明鼠标左边放不下提示框
                  if (boxWidth > pointX) {
                    x = 5
                  } else { // 左边放的下
                    x = pointX - boxWidth
                  }
                  // boxHeight > pointY 说明鼠标上边放不下提示框
                  if (boxHeight > pointY) {
                    y = 5
                  } else { // 上边放得下
                    y = pointY - boxHeight
                  }
                  return [x, y]
                },
                formatter: function(prams) {
                  // console.log(prams)
                  return '数据：' + prams[0].value + '</br>时间：' + prams[0].name
                }
              },
              xAxis: {
                type: 'category',
                data: time,
                // show: false,
                axisLabel: {
                  interval: 0,
                  /* rotate: 60,*/
                  textStyle: {
                    color: '#fff',
                    fontsize: 1
                  }
                },
                axisTick: {
                  show: false // 隐藏坐标轴的刻度
                }
                // z: 10
              },
              yAxis: {
                type: 'value',
                // show: false,
                splitLine: { show: false },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  textStyle: {
                    color: '#eae72b',
                    fontsize: 8
                  }
                }
              },
              dataZoom: [
                /* {
                        startValue: '00:00',
                        endValue: '23:45'
                      },*/
                {
                  type: 'inside'
                }
              ],
              series: [
                {
                  type: 'line',
                  /* barWidth: 5,*/
                  itemStyle: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        { offset: 1, color: '#00010A' },
                        { offset: 0.5, color: '#6D7F66' },
                        { offset: 0, color: '#ffd307' }
                      ]
                    ),
                    barBorderRadius: [10, 10, 0, 0]
                  },
                  data: data
                }
              ]
            }
            // console.log(data)
            varchart.setOption(option, true)
            window.addEventListener('resize', () => {
              this.$nextTick(() => {
                if (varchart) {
                  // if (document.getElementsByClassName('chartbox')) {
                  //   var dv1 = this.$refs.chartbox.offsetWidth
                  //   this.wid = dv1 * 0.2
                  // }
                  varchart.resize(true)
                }
              })
            })
          }

        }
      }
    }
  }
}
</script>

<style>
  .echartdiv .el-input__inner {
    -webkit-appearance: none;
    background-color: transparent;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #2fa0a3;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #2fa0a3;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
  .echartdiv{
    width: 99.7%;
  }
</style>
