<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      timer: null,
    }
  },
  watch: {
    $route(val) {
      console.log(val)
      let bodyClass = val.query?.theme
      this.$nextTick(() => {
        if (!!bodyClass) {
          document.getElementsByTagName('body')[0].setAttribute('class', bodyClass)
        } else {
          document.getElementsByTagName('body')[0].setAttribute('class', '')
        }
      })
    },
  },
  mounted() {
    const scrollFunc = (ev) => {
      document.body.toggleAttribute('scroll', true)
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        document.body.toggleAttribute('scroll')
      }, 500)
    }
    this.$nextTick(() => {
      window.addEventListener('scroll', scrollFunc)
    })
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('scroll', scrollFunc)
      clearTimeout(this.timer)
      this.timer = null
    })
  },
}
</script>
