<template>
  <div class="footer">
    <div class="footer__hills footer__item" />
    <div class="footer__clouds footer__item" />
    <div class="footer__copyright" v-if="!($site.themeConfig.copyright && $site.themeConfig.copyright.show === false)">
      © {{ $site.themeConfig.copyright && $site.themeConfig.copyright.name || 'linrz' }} Themed By <a target="_blank" href="https://github.com/linrz/vuepress-theme-plain">vuepress-theme-plain</a>
    </div>
  </div>   
</template>

<script>

export default {
  watch: {
    $route({ path }){
      if (path.match(/^\/page|blog/)) {
        this.adjustFooterPosition();
      }
    }
  },

  mounted() {
    this.adjustFooterPosition();
    if (window.location.pathname === '/') {
      this.startAnimation();
    }
  },

  methods: {
    adjustFooterPosition() {
      const listDom = [].slice.call(document.getElementsByClassName('theme-plain__list'));
      const contentDom = [].slice.call(document.getElementsByClassName('theme-plain__body'));
      const footerDom = document.getElementsByClassName('footer')[0];
      if (
        listDom.length && listDom[0].getBoundingClientRect().height + 530 < window.innerHeight ||
        contentDom.length && contentDom[0].getBoundingClientRect().height + 530 < window.innerHeight
      ) {
        footerDom.style.position = 'absolute';
        footerDom.style.bottom = 0;
      } else {
        footerDom.style.position = 'relative';
      }
    },

    startAnimation() {
      const hills = [].slice.call(document.getElementsByClassName('footer__hills'))[0];
      const clouds = [].slice.call(document.getElementsByClassName('footer__clouds'))[0];
      let hillsPos = 0, cloudsPos = 0;
      const animate = () => {
        cloudsPos++;
        hillsPos -= 0.5;
        clouds.style.backgroundPositionX = `${cloudsPos}px`;
        hills.style.backgroundPositionX = `${hillsPos}px`;
        window.requestAnimationFrame(animate);
      };
      window.requestAnimationFrame(animate);
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>