<template>
  <div id="HostActivityStatistics" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '@ability/components/Echarts/mixins/resize'
import moment from 'moment'
export default {
  name: 'HostActivityStatistics',
  mixins: [resize],
  props: {
    option: {
      type: Object,
      default: () => { return {} }
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(newVal, oldVal) {
        console.log(newVal)
        this.initChart()
      }
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById('HostActivityStatistics'))
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const option = {
        color: ['#409EFF'],
        grid: {
          left: '20%'
        },
        tooltip: {
          show: true,
          formatter: (params) => {
            const name = params.data[1]
            const time = moment(params.data[0]).format('YYYY-MM-DD HH:mm:ss')
            const times = params.data[2]
            return `类名:${name}<br/>时间:${time}<br/>发生次数:${times}`
          }
        },
        xAxis: {
          type: 'time',
          splitNumber: 5,
          maxInterval: 3600 * 24 * 1000,
          minInterval: 3600 * 2 * 1000,
          splitLine: { show: true },
          axisLabel: {
            interval: 6,
            showMinLabel: false
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: true
          }
        },
        yAxis: {
          splitLine: {
            show: true
          },
          type: 'category'
        },
        series: [{
          // symbolSize: [4, 180 / this.chartData.length],
          symbol: 'circle',
          data: this.chartData,
          type: 'scatter'
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style>

</style>
