<template>
  <div class="realtime-line-modal">
    <div style="flex: 1;display: flex;">
      <div class="left-desc">
        <div
          v-for="(item, index) in collectEntity.tagList"
          :key="index"
          style="height: 100%"
        >
          {{ item.desc + '\n' + '(' + item.unit + ')' }}
        </div>
      </div>
      <div class="right-chart" v-loading="chartLoading">
        <div
          :id="item.tag"
          v-for="(item, index) in collectEntity.tagList"
          :key="index"
          style="height: 100%"
        />
      </div>
    </div>

    <div class="jg-btn-group" style="float: right">
      <div :class="activeButton === 0 ? 'btn-active' : ''" class="jg-btn" @click="onClick(0)">X轴长5分钟</div>
      <div :class="activeButton === 1 ? 'btn-active' : ''" class="jg-btn" @click="onClick(1)">X轴长1小时</div>
      <div :class="activeButton === 2 ? 'btn-active' : ''" class="jg-btn" @click="onClick(2)">X轴长2小时</div>
      <div :class="activeButton === 6 ? 'btn-active' : ''" class="jg-btn" @click="onClick(6)">X轴长6小时</div>
      <!--<div class="jg-btn" style="margin-left: 40px">打印</div>
      <div class="jg-btn">退出</div>-->
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { historyChartData } from '@/api/HistoryData'
import { mapState } from 'vuex'

export default {
  name: 'RealtimeLineModal',
  props: {
    collectEntity: {
      type: Object,
      default: () => {}
    },
  },
  data () {
    return {
      duration6: true,
      chartLoading: false,
      chartList: {},
      chartData: {},
      timeList: [],
      activeButton: 0,
      durTime: [
        moment().subtract(5, 'minutes').valueOf(),
        moment().valueOf()
      ],
    }
  },
  computed: {
    ...mapState({
      realtimeData: (state, getter) => state.queue.realtimeData,
    }),
  },
  watch: {
    realtimeData(newVal) {
      const keys = Object.getOwnPropertyNames(this.chartList)
      if (keys.length > 1) {
        for (const item of newVal) {
          if (item.collectEntityId === this.collectEntity.id + '') {
            for (const tagItem of this.collectEntity.tagList) {
              if (tagItem.id + '' === item.id) {
                this.chartData[tagItem.tag].push(item.value)
                this.chartData[tagItem.tag].shift()
              }
            }
          }
        }
        this.timeList.push(moment(Number(newVal[0].timestamp)).format('YYYY-MM-DD HH:mm:ss'))
        this.timeList.shift()
        this.updateChart()
      }
    },
  },
  methods: {
    fetchData() {
      this.chartLoading = true
      const params = {
        entityId: this.collectEntity.id,
        start: this.durTime[0],
        end: this.durTime[1],
        step: 2
      }
      historyChartData(params).then(res => {
        if (res && res.code === '200') {
          console.log('historyChartData =>', res, this.collectEntity)
          for (const item of this.collectEntity.tagList) {
            this.chartData[item.tag] = []
            for (const data of res.data) {
              const key = item.tableColumn.toLowerCase()
              this.chartData[item.tag].push(Number(data[key]))
            }
            this.chartList[item.tag].setOption({
              xAxis: {
                data: res.data.map(e => e.dateTime)
              },
              series: [{
                data: this.chartData[item.tag]
              }]
            })
          }
          this.timeList = res.data.map(e => e.dateTime)
        }
        // console.log('wwwwwwwwwwwww', this.chartList, this.chartData, this.timeList)
      }).finally(() => {
        this.chartLoading = false
      })
    },
    onClick(time) {
      this.activeButton = time
      if (time === 0) {
        this.durTime[0] = moment().subtract(5, 'minutes').valueOf()
      } else {
        this.durTime[0] = moment().subtract(time, 'hours').valueOf()
      }
      this.fetchData()
    },
    updateChart() {
      for (const key in this.chartList) {
        this.chartList[key].setOption({
          xAxis: {
            data: this.timeList
          },
          series: [{
            data: this.chartData[key]
          }]
        })
      }
    },
    initData() {
      for (const key in this.chartList) {
        window.removeEventListener('resize', this.chartList[key].resize)
        this.chartList[key].dispose()
        this.chartList[key] = null
      }
      this.chartList = {}
      for (const item of this.collectEntity.tagList) {
        this.$nextTick(() => {
          this.chartList[item.tag] = this.$echarts.init(document.getElementById(item.tag))
          this.chartList[item.tag].setOption({
            color: ['#c71016', '#37A2FF', '#80FFA5', '#00DDFF', '#FFBF00', '#FF0087'],
            legend: {
              right: '4%',
              icon: 'roundRect',
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            grid: {
              top: '8%',
              left: '5%',
              right: '6%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: [],
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: {
                    x: 1,
                    y: 0,
                    colorStops: [{
                      offset: 0,
                      color: '#AAA7A7' // 100% 处的颜色
                    }, {
                      offset: 1,
                      color: '#FFFFFF' // 0% 处的颜色
                    }]
                  },
                }
              },
            },
            yAxis: {
              // name: this.collectEntity,
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: {
                    x: 0,
                    y: 0,
                    colorStops: [{
                      offset: 0,
                      color: '#AAA7A7' // 100% 处的颜色
                    }, {
                      offset: 1,
                      color: '#FFFFFF' // 0% 处的颜色
                    }]
                  },
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: {
                    x: 1,
                    y: 1,
                    colorStops: [{
                      offset: 1,
                      color: '#AAA7A7' // 100% 处的颜色
                    }, {
                      offset: 0,
                      color: '#FFFFFF' // 0% 处的颜色
                    }]
                  },
                },
              },
            },
            series: [{
              type: 'line',
              data: [],
              connectNulls: true,
            }]
          })
          window.addEventListener('resize', this.chartList[item.tag].resize)
        })
      }
      this.fetchData()
    },
  },
}
</script>

<style lang="less" scoped>
  .realtime-line-modal {
    height: calc(100% - 8px);
    display: flex;
    flex-direction: column;

    .left-desc {
      width: 140px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      text-align: center;

      div {
        white-space: pre-line;
        height: 100%;
        line-height: 30px;
        margin: 16px;
        font-size: 20px;
        font-weight: 600;
        box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.1rem -0.1rem 0.1rem #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .right-chart {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      /*justify-content: space-around;*/
    }

    .jg-btn-group {
      display: flex;
      padding: 1px;
      text-align: center;
      margin-top: 32px;
      justify-content: flex-end;

      .jg-btn {
        height: 40px;
        line-height: 40px;
        margin-left: 16px;
        padding: 0 24px;
        cursor: pointer;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 500;
        border-radius: 8px;
        box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.1rem -0.1rem 0.1rem #FFFFFF;
        user-select: none;
      }

      .jg-btn:active {
        color: #FFFFFF;
        background-color: #A20D13;
        box-shadow: inset 0.2rem 0.2rem 0.5rem #6e090c, inset -0.2rem -0.2rem 0.5rem #c71016;
      }

      .btn-active {
        color: #FFFFFF;
        background-color: #A20D13;
        box-shadow: inset 0.2rem 0.2rem 0.5rem #6e090c, inset -0.2rem -0.2rem 0.5rem #c71016;
        pointer-events: none;
        cursor: not-allowed;
      }
    }
  }
</style>
