<template>
  <a-spin :spinning="formLoading.visible" class="fill">
    <a-row class="fill">
      <a-col span="16" style="height: 100%">
        <div :id="chartMain.id" class="fill"></div>
      </a-col>
      <a-col span="8" style="height: 100%">
        <div :id="chartSub.id" class="fill"></div>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script>
import * as echarts from 'echarts'
import { aggregate } from 'echarts-simple-transform'
import config from './options/md'
import moment from 'moment'
import warnApi from '@/api/warnApi'
import _ from 'lodash'

export default {
  name: 'WarnHistoryMd',
  props: {
    sourceList: {
      type: Object,
      default: () => { }
    },
    jh: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      formLoading: {
        visible: false,
        tip: '正在加载...'
      },

      minSize: { width: 330, height: 260 },
      chartMain: { id: 'warnHistoryXsChart' + moment().unix(), chart: {} },
      chartSub: {
        id: 'warnHistoryXsChartSub' + moment().unix(), chart: {}
      },
      sizeInfo: {}
    }
  },
  methods: {
    chartInit () {
      this.chartMain.chart.showLoading()
      warnApi.getWarnHistoryList_Hour({ jh: this.jh })
        .then(res => {
          this.chartMain.chart.hideLoading()

          this.chartMain.chart.setOption(config.mainOption(res.result.data))
          const firstDate = res.result.data.length > 0 ? res.result.data[0].date : ''
          this.chartSub.chart.setOption(config.subOption(firstDate, res.result.data))
        }).catch(e => {
          this.chartMain.chart.hideLoading()
          this.$message.error('获取报警历史信息时出现错误,请重试')
        })
    },
    subChartFllow (recodrOnTime) {
      if(!recodrOnTime){
        return
      }
      this.chartSub.chart.setOption({
        title: {
          text: recodrOnTime.date,
          left: 'center',
          top: 8
        },
        dataset: [{
          id: 'hours',
          transform: [{
            type: 'filter',
            config: { dimension: 'date', '=': recodrOnTime.date }
          }]
        }]
      })
    }
  },
  created () {
    echarts.registerTransform(aggregate)

    this.debounceResize = _.debounce((rec) => {
      const { chartMain, chartSub } = this
      chartMain.chart.resize()
      chartSub.chart.resize()
    }, 200)

    this.debounceSubChartFllow = _.debounce((recodrOnTime) => {
      this.subChartFllow(recodrOnTime)
    }, 200)
  },
  mounted () {
    this.chartMain.chart = echarts.init(document.getElementById(this.chartMain.id), 'shine')
    this.chartSub.chart = echarts.init(document.getElementById(this.chartSub.id), 'shine')
    const that = this
    this.chartMain.chart.on('timelinechanged', function (event) {
      const name = event.currentIndex
      that.chartSub.sourceKey = this.getOption().dataset[0].source[event.currentIndex * 24]
      that.debounceSubChartFllow(that.chartSub.sourceKey)
    })

    this.$nextTick(function () {
      this.chartInit()
      this.chartMain.chart.showLoading()
    })
  },
  computed: {},
  watch: {},
  destroyed () {
    this.chartMain.chart.dispose()
    this.chartSub.chart.dispose()
  }
}
</script>

<style lang="less" scoped>
.fill {
  width: 100%;
  height: 100%;
}
</style>
