<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/xs'
import moment from 'moment'
import warnApi from '@/api/warnApi'
import _ from 'lodash'

export default {
  name: 'WarnHistoryXs',
  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({ jh: this.jh })
        .then(res => {
          this.chartMain.chart.hideLoading()

          this.chartMain.chart.setOption(config.mainOption(res.result.data))
          this.chartSub.chart.setOption(config.subOption([]))
        }).catch(e => {
          this.chartMain.chart.hideLoading()
          this.$message.error('获取报警历史信息时出现错误,请重试')
        })
    },
    pushData (newData) {
    },
    subChartFllow (recodrOnTime) {
      if (!recodrOnTime) {
        return
      }
      const data = [
        { name: '复杂情况', number: _.get(recodrOnTime, 'fzqk', 0) },
        { name: '工程预警', number: _.get(recodrOnTime, 'gcyj', 0) },
        { name: '钻井液', number: _.get(recodrOnTime, 'zjy', 0) }
      ]

      this.chartSub.chart.setOption({
        title: {
          text: recodrOnTime.date,
          left: 'center',
          top: 8
        },
        dataset: [{
          id: 'raw',
          source: data
        }]
      })
    }
  },
  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)

    this.debounceMediaQuery = _.debounce((width, height) => {
      const breakPoints = { xxl: 1600, xl: 1200, lg: 992, md: 768, sm: 458, xs: -1 }
      const keys = Object.keys(breakPoints)
      // media query logic
      let fitIndex = -1
      for (var p in breakPoints) {
        fitIndex++
        if (width >= breakPoints[p]) {
          break
        }
      }
      _.forEach(sizeProp, p1 => {
        const vals = _.get(sizeInfoBreaks, p1, undefined)
        for (var k = fitIndex; k < keys.length; k++) {
          const sizeKey = keys[k]
          if (vals && _.has(vals, sizeKey)) {
            _.set(this.sizeInfo, p1, vals[sizeKey])
            break
          }
        }
      })
      // ------------- end -------------------------------
    }, 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]
      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>
