<template>
  <div class="download" v-if="visible">
  </div>
</template>

<script>
export default {
  name: 'download',
  data() {
    return {
      visible: true
    };
  },
  mounted() {
    this.getDownloadElem((elem) => {
      const newElem = this.handleElem(elem.cloneNode(true));

      // elem.parentNode.removeChild(elem);
      this.$el.appendChild(newElem);
    });
  },
  methods: {
    getDownloadElem(found) {
      let vm = this;

      function checkForDownload() {
        vm.$download = document.getElementById('top-downloadbar');
        if (vm.$download) {
          found(vm.$download);
        } else {
          setTimeout(checkForDownload, 50);
        }
      }

      checkForDownload();
    },
    handleElem(elem) {
      const vm = this;
      const miniElem = elem.querySelector('#mini-app-open');

      if (miniElem) {
        elem.removeChild(miniElem);
      }

      elem.addEventListener('click', function(e) {
        let target = e.target;

        switch (target.className.toLowerCase()) {
          case 'download-close': {
            // 点击关闭
            vm.$emit('close');
            vm.visible = false;
            break;
          }
          case 'download-go': {
            // 尝试打开app
            vm.$openApp();

            e.stopPropagation();
            e.preventDefault();
            break;
          }
          case 'download-go-wechat': {
            // 尝试打开app
            vm.$openApp();

            e.stopPropagation();
            e.preventDefault();
            break;
          }
          default: {
            // pass
          }
        }
      });

      const downloadGo = elem.querySelector('#download-go');

      if (downloadGo) {
        downloadGo.innerText = '下载APP';
      }

      return elem;
    }
  }
};
</script>

<style lang="scss" scoped>
  .download {
    width: 100%;
    height: 110px;
  }
</style>