import { debounce } from '@/utils'
  
  export default {
    data() {
      return {
        $_sidebarElm: null,
        $_resizeHandler: null
      }
    },
    mounted() {
      this.$_resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      this.$_initResizeEvent()
      this.$_initSidebarResizeEvent()
    },
    beforeDestroy() {
      this.$_destroyResizeEvent()
      this.$_destroySidebarResizeEvent()
    },
    // to fixed bug when cached by keep-alive
    // https://github.com/PanJiaChen/vue-element-admin/issues/2116
    activated() {
      this.$_initResizeEvent()
      this.$_initSidebarResizeEvent()
    },
    deactivated() {
      this.$_destroyResizeEvent()
      this.$_destroySidebarResizeEvent()
    },
    methods: {
      // use $_ for mixins properties
      // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
      $_initResizeEvent() {
        window.addEventListener('resize', this.$_resizeHandler)
      },
      $_destroyResizeEvent() {
        window.removeEventListener('resize', this.$_resizeHandler)
      },
      $_sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.$_resizeHandler()
        }
      },
      $_initSidebarResizeEvent() {
        this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
        this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
      },
      $_destroySidebarResizeEvent() {
        this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
      }
    }
  }