<template>
  <view>
    <!-- #ifdef H5 -->
    <view class="wrapper" v-if="!weChat" @click="openApp()">
      <!-- 左侧图标 -->
      <image class="img" :src="logo"></image>
      <view class="open">
        打开{{config.name}}
      </view>
    </view>

    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import config from "@/config/config"
import logoImg from "@/icon.png"

const weChat = ref(false)
const logo = logoImg

onMounted(() => {
  // #ifdef H5
  // 判断是否是微信浏览器
  var ua = navigator.userAgent.toLowerCase();
  var isWeixin = ua.indexOf("micromessenger") != -1;
  weChat.value = isWeixin ? true : false
  // #endif
})

/**
 * 跳转到下载app页面
 */
const downloadApp = () => {
  setTimeout(function () {
    window.location.href = config.downloadLink;
  }, 2000);
}

/**
 * 打开app 仅在h5生效 使用ifream唤醒app
 */
const openApp = () => {
  let src: string = ''
  if (location.href) {
    src = location.href.split("/pages")[1];
  }
  let t = `${config.schemeLink}pages${src}`

  try {
    var e = navigator.userAgent.toLowerCase(),
      n = e.match(/cpu iphone os (.*?) like mac os/);
    if (
      ((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)
    ) {
      window.location.href = t

      downloadApp()
    } else {
      var r = document.createElement("iframe");
      (r.src = t), (r.style.display = "none"), document.body.appendChild(r)

      downloadApp()
    }
  } catch (e) {
    window.location.href = t
    downloadApp()
  }
}
</script>

<style scoped lang="scss">
.img {
  margin: 0 4rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  border: 5rpx solid #fff;
}

.open {
  margin: 0 10rpx;
  text-align: center;
  font-size: 26rpx;
}
.wrapper:hover {
  transform: translateX(0);
}
.wrapper {
  transform: translateX(160rpx);
  transition: 0.35s;
  align-items: center;
  justify-content: center;
  display: flex;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #fff;
  // width: 220rpx;
  background: $light-color;
  position: fixed;
  top: 25%;
  right: 0;
  height: 60rpx;
  z-index: 9;
}
</style>
