<template>
<div class="xp-scatter" ref="scatter"></div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import { setOptions } from './options'

export default {
  name: 'XpScatter',

  data() {
    return {
      options: {},
      scatter: null,
      timer: null, // 轮播timer
      dataIndex: 0,
    }
  },

  computed: {
    chartType() {
      if (this.settings.series && this.settings.series.type) {
        return this.settings.series.type
      }
      return 'effectScatter'
    },
  },

  props: {
    settings: {
      type: Object,
      default: () => {}
    },
    callback: {
      type: Function,
      default: () => {}
    },
    clickCallback: {
      type: Function,
      default: () => {}
    },
    outerPlay: {
      type: Boolean,
      default: false
    },
    outerIndex: { // 外部index
      type: Number,
      default: -1
    },
  },

  methods: {
    updateData(settings) {
      if (!this.settings.datas) return
      this.options = setOptions(settings)
      this.scatter.setOption(this.options)
      if (this.settings.autoPlay) {
        if (!this.timer) {
          this.doAutoPlay()
        } else {
          this.updateRipple(this.dataIndex)
        }
      } else {
        clearInterval(this.timer)
      }
    },
    doAutoPlay() {
      let series = this.options.series[0]
      let dataLen = series.data.length
      clearInterval(this.timer)
      if (this.options.autoPlay) {
        let dataIndex = this.dataIndex
        // this.scatter.dispatchAction({
        //   type: 'highlight',
        //   seriesIndex: 0,
        //   dataIndex
        // })
        this.chartType !== 'scatter' && this.updateRipple(dataIndex)
        this.callback && this.callback(dataIndex, series.data[dataIndex])
        this.timer = setInterval(() => {
          // this.scatter.dispatchAction({
          //   type: 'downplay',
          //   seriesIndex: 0,
          //   dataIndex
          // })
          dataIndex = (dataIndex + 1) % dataLen
          // this.scatter.dispatchAction({
          //   type: 'highlight',
          //   seriesIndex: 0,
          //   dataIndex
          // })
          this.chartType !== 'scatter' && this.updateRipple(dataIndex)
          // 联动外部函数
          this.callback && this.callback(dataIndex, series.data[dataIndex])
        }, this.options.playDuration)
      } else {
        clearInterval(this.timer)
      }
    },
    updateRipple(dataIndex) {
      let data = this.settings.datas[0]
      let props = this.settings.series
      this.settings.datas[0] = data.map((item, index) => {
        return Object.assign({}, item, {
          label: {
            normal: {
              formatter: dataIndex === index ? props.elabelFormatter : props.labelFormatter,
              textStyle: {
                color: dataIndex === index ? props.elabelColor : props.labelColor,
                fontSize: dataIndex === index ? props.elabelFontSize : props.labelFontSize,
              },
            },
          },
          itemStyle: {
            normal: {
              color: dataIndex === index ? props.eitemColor : props.itemColor,
            },
          },
        })
      })
      this.options = setOptions(this.settings)
      this.scatter.setOption(this.options)
    },
  },

  watch: {
    settings(newVal) {
      this.updateData(newVal)
    },
    outerIndex(newVal) {
      this.chartType !== 'scatter' && this.updateRipple(newVal)
      this.callback && this.callback(newVal, this.options.series[0].data[newVal])
    },
  },

  mounted() {
    let scatterDom = this.$refs.scatter
    this.scatter = echarts.init(scatterDom)
    if (this.clickCallback) {
      this.scatter.on('click', this.clickCallback)
    }
    this.updateData(this.settings)
  },

  beforeDestroy() {
    if (this.scatter) return
    this.timer && clearInterval(this.timer)
    this.scatter.dispose()
  },
}
</script>
