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

<script>
import echarts from 'echarts';

export default {
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    id: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '200px',
    },
    height: {
      type: String,
      default: '200px',
    },
    titleText: {
      type: String,
      default: '默认图表名',
    },
    option: {
      type: Object,
    },
    forceRefresh: {
      type: Boolean,
      default: false,
    },
    clickFn: {
      type: Function,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', () => {
      this.chart.resize();
    });
    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0];
    sidebarElm.addEventListener('transitionend', () => {
      this.chart.resize();
    });
  },
  beforeDestory() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  watch: {
    option(val) {
      this.chart.setOption(val);
    },
    forceRefresh(val) {
      if (val) {
        this.chart.resize();
      }
    },
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));

      this.chart.setOption(this.option);

      this.chart.on('click', (params) => {
        this.$emit('clickFn', params);
      });

      this.chart.on('dblclick', (params) => {
        this.$emit('dblclickFn', params);
      });

      this.chart.on('mousedown', (params) => {
        this.$emit('mousedownFn', params);
      });

      this.chart.on('mouseup', (params) => {
        this.$emit('mouseupFn', params);
      });

      this.chart.on('mouseover', (params) => {
        this.$emit('mouseoverFn', params);
      });

      this.chart.on('mouseout', (params) => {
        this.$emit('mouseoutFn', params);
      });

      this.chart.on('globalout', (params) => {
        this.$emit('globaloutFn', params);
      });
    },
  },
};
</script>

