<template>
  <div >
    <el-dialog
      class="echartDiv"
      :visible.sync="echartsShow"
      :append-to-body="true"
      :modal-append-to-body="false"
      width="65%"
      @closed="closeDraw"
      style="height: 100%">
    <div style="padding-left: .5%;padding-top: 1%;padding-bottom: 1%">
      <strong style="color: #2fa0a3;font-size: 14px">设备：</strong>
      <el-select v-model="eqId" placeholder="请选择设备" @change="getEquipmentDataType" size="mini">
        <el-option
          v-for="item in equipmentInfoList"
          :key="item.equipmentId"
          :label="item.equipmentName"
          :value="item.equipmentId"
        />
      </el-select>
    </div>
    <div class="chartbox" ref="chartbox">
      <div v-for="(items,index) in equipmentDataTypeList" ref="borderBox" style="width:20%;height: 120px;display: inline-block;z-index:1000;padding-left: 0.3%">
        <div style="width:100%;margin-top: 1%" class="chartStyle">
          <div :id="`echarts${index}`" style="width: 100%;height: 120px;"/>
        </div>
      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Environment',
    props: {
      enshow:{
        type: Object
      }
    },
    data() {
      return {
        eqId: '',
        timer: '',
        equipmentDataTypeList: [],
        equipmentInfoList: [],
        echartsShow: true
      }
    },
    watch: {
      enshow(newValue, oldValue) {
        this.echartsShow = newValue.show
      }
    },
    destroyed() {
      // console.log('环境数据页面销毁开始')
      this.timer && clearInterval(this.timer) // 关闭循环
      // console.log('环境数据页面销毁结束')
    },
    beforeDestroy(){
      // console.log('环境数据页面准备销毁')
    },
    updated(){
      // console.log('环境数据页面更新渲染结束')
    },
    beforeMount(){
      // console.log('环境数据页面渲染准备中')
    },
    mounted() {
      // console.log('环境数据页面准备渲染')
      this.init()
      // console.log('渲染结束')
    },
    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(e=>{
          console.log('获取所有设备信息异常：'+e)
        })
      },
      closeDraw(){
        this.echartsShow = false
        this.$emit('onEnChange', this.echartsShow)
      },
      getEquipmentDataType() {
        if (this.eqId !== '') {
          this.$axios.get('/dashboard/getEquipmentDataType/' + this.eqId).then(res => {
            this.equipmentDataTypeList = res.data
            this.$nextTick(function() {
              // var data =[
              //   {
              //     "dataTypeName": "10米瞬时风速",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 4.82
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 4.69
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 4.71
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 4.65
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 4.63
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 4.64
              //       }
              //     ],
              //     "displayOrder": 1,
              //     "unit": "m/s"
              //   },
              //   {
              //     "dataTypeName": "10米瞬时风向",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 212
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 211
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 211
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 210
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 210
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 210
              //       }
              //     ],
              //     "displayOrder": 2,
              //     "unit": "°"
              //   },
              //   {
              //     "dataTypeName": "10米瞬时风向",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 212
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 211
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 211
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 210
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 210
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 210
              //       }
              //     ],
              //     "displayOrder": 2,
              //     "unit": "°"
              //   },
              //   {
              //     "dataTypeName": "30米瞬时风速",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 6.3
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 5.61
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 5.48
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 5.46
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 5.48
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 5.42
              //       }
              //     ],
              //     "displayOrder": 5,
              //     "unit": "m/s"
              //   },
              //   {
              //     "dataTypeName": "30米瞬时风向",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 211
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 208
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 208
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 208
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 207
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 206
              //       }
              //     ],
              //     "displayOrder": 6,
              //     "unit": "°"
              //   },
              //   {
              //     "dataTypeName": "50米瞬时风速",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 7.37
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 7.38
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 7.41
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 7.39
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 7.42
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 7.52
              //       }
              //     ],
              //     "displayOrder": 9,
              //     "unit": "m/s"
              //   },
              //   {
              //     "dataTypeName": "50米瞬时风向",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 209
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 208
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 209
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 208
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 208
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 208
              //       }
              //     ],
              //     "displayOrder": 10,
              //     "unit": "°"
              //   },
              //   {
              //     "dataTypeName": "70米瞬时风速",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 8.88
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 9.01
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 8.97
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 9.01
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 8.44
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 9.09
              //       }
              //     ],
              //     "displayOrder": 13,
              //     "unit": "m/s"
              //   },
              //   {
              //     "dataTypeName": "70米瞬时风向",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 205
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 205
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 204
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 203
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 205
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 202
              //       }
              //     ],
              //     "displayOrder": 14,
              //     "unit": "°"
              //   },
              //   {
              //     "dataTypeName": "瞬时温度",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 2.63
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 2.58
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 2.45
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 2.51
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 2.29
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 2.3
              //       }
              //     ],
              //     "displayOrder": 15,
              //     "unit": "℃"
              //   },
              //   {
              //     "dataTypeName": "瞬时湿度",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 35.1
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 35.4
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 35.8
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 36
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 36.3
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 36.8
              //       }
              //     ],
              //     "displayOrder": 16,
              //     "unit": "%"
              //   },
              //   {
              //     "dataTypeName": "瞬时气压",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 106.25
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 106.26
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 106.25
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 106.25
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 106.25
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 106.25
              //       }
              //     ],
              //     "displayOrder": 17,
              //     "unit": "KPa"
              //   },
              //   {
              //     "dataTypeName": "10米瞬时风向",
              //     "timeAndDataDtoList": [
              //       {
              //         "time": "16:37",
              //         "val": 0
              //       },
              //       {
              //         "time": "16:38",
              //         "val": 0
              //       },
              //       {
              //         "time": "16:39",
              //         "val": 0
              //       },
              //       {
              //         "time": "16:40",
              //         "val": 0
              //       },
              //       {
              //         "time": "16:41",
              //         "val": 0
              //       },
              //       {
              //         "time": "16:42",
              //         "val": 0
              //       }
              //     ],
              //     "displayOrder": 2,
              //     "unit": "°"
              //   }
              // ]
              // this.drawEcharts(data)
              this.drawEcharts(this.equipmentDataTypeList)
            })
          }).catch(e=>{
            console.log('根据设备id查询设备信息异常:'+e)
          })
        }
      },
      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 = {
                backgroundColor: '#fff',
                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: 10,
                  bottom: 5,
                  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]
                    // 提示框大小
                    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) {
                    return '数据：' + prams[0].value + '</br>时间：' + prams[0].name
                  }
                },
                xAxis: {
                  type: 'category',
                  data: time,
                  axisLabel: {
                    interval: 0,
                    textStyle: {
                      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: [
                  {
                    type: 'inside'
                  }
                ],
                series: [
                  {
                    type: 'line',
                    /* barWidth: 5,*/
                    symbol: 'triangle',
                    symbolSize: 8,
                    // symbolRotate: 180,
                    areaStyle: {
                      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(98, 227, 255, 1)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(98, 227, 255, 0)'
                        }
                      ])
                    },
                    itemStyle: {
                      color: '#62c43a',
                    },
                    label:{
                      show: true,
                      color: '#1483ff',
                      position: 'bottom'
                    },
                    data: data
                  }
                ]
              }
              // console.log(data)
              varchart.setOption(option, true)
              window.addEventListener('resize', () => {
                varchart.resize(true)
              })
            }

          }
        }
      }
    }
  }
</script>

<style>
  .chartbox{
    width: 100%;
    margin-bottom: .5%;
    /*min-height:calc(50vh - 10px);*/
  }
  .chartStyle{
    border: 2px solid rgba(87,87,87,.5);
    box-shadow: 0px 0px 10px rgba(102,102,102,.5);
    border-radius: 5px;
  }

</style>
