<template>
  <a v-if="visible" class="openapp-btn hover-opacity" href="javascript:;" @click="toDownloadPage">
        <span class="avatar-block">
          <div class="avatar"></div>
        </span>
        在App中查看
    <i class="iconfont mg">&#xe7b0;</i>
  </a>
</template>

<script>
export default {
  data() {
    return {
      visible: true
    };
  },
  async mounted() {
    let isHide = await this.isDownloadBarHide();

    if (isHide) {
      this.visible = false;
    }
  },
  methods: {
    toDownloadPage() {
      if (this.$yoho.isAndroid && (this.$yoho.isWechat || this.$yoho.isMobileQQ)) {
        this.openByBrowser();
      } else {
        this.$openApp();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .openapp-btn {
    width: 320px;
    height: 80px;
    border-radius: 10px;
    font-size: 30px;
    color: #fff;
    background: #d0021b;
    position: absolute;
    bottom: 120px;
    left: calc(50% - 160px);
    z-index: 100;
    display: flex;
    align-items: center;
    transition: all 600ms ease-in-out;

    &.scroll-opacity {
      opacity: 0.3;
    }

    .avatar-block {
      width: 60px;
      height: 60px;
      margin: 10px 25px 10px 10px;
      overflow: hidden;
    }

    .avatar {
      display: block;
      width: 100%;
      height: 100%;
      background-image: url("~statics/image/common/app.png");
      background-size: 100% 100%;
    }

    .mg {
      margin-left: 10px;
      font-size: 30px;
    }
  }
</style>