import { debounce } from '@/utils'

export default {
  data() {
    return {
      $_sidebarElm: null,
      $_itemElm1:null,
      $_itemElm2:null,
      $_itemElm3:null,
      $_itemElm4:null,
      $_windTowerItemElm1:null,
      $_windTowerItemElm2:null,
      $_windTowerItemElm3:null,
      $_tabsClass:null,
      $_resizeHandler: null,

    }
  },
  mounted() {
    this.initListener()
  },
  activated() {
    if (!this.$_resizeHandler) {
      // avoid duplication init
      this.initListener()
    }
    // when keep-alive chart activated, auto resize
    this.resize()
  },
  beforeDestroy() {
    this.destroyListener()
  },
  deactivated() {
    this.destroyListener()
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },

    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)

      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_itemElm1 = document.getElementsByClassName('item')[0]
      this.$_itemElm2 = document.getElementsByClassName('item')[1]
      this.$_itemElm3 = document.getElementsByClassName('item')[2]

      this.$_windTowerItemElm1 = document.getElementsByClassName('windTowerItem')[0]
      this.$_windTowerItemElm2 = document.getElementsByClassName('windTowerItem')[1]
      this.$_windTowerItemElm3 = document.getElementsByClassName('windTowerItem')[2]


      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
      this.$_itemElm1 && this.$_itemElm1.addEventListener('transitionend', this.$_sidebarResizeHandler)
      this.$_itemElm2 && this.$_itemElm2.addEventListener('transitionend', this.$_sidebarResizeHandler)
      this.$_itemElm3 && this.$_itemElm3.addEventListener('transitionend', this.$_sidebarResizeHandler)

      this.$_windTowerItemElm1 && this.$_windTowerItemElm1.addEventListener('transitionend', this.$_sidebarResizeHandler)
      this.$_windTowerItemElm2 && this.$_windTowerItemElm2.addEventListener('transitionend', this.$_sidebarResizeHandler)
      this.$_windTowerItemElm3 && this.$_windTowerItemElm3.addEventListener('transitionend', this.$_sidebarResizeHandler)



    },
    destroyListener() {
      window.removeEventListener('resize', this.$_resizeHandler)
      this.$_resizeHandler = null

      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    resize() {
      const { chart } = this
      chart && chart.resize()
    }
  }
}
