<template>
  <div class="MainDiv">
    <div class="GroundGlass">
      <p class="Logo"></p>
      <div class="AppName">团蜂家居 App</div>
      <a
        v-if="!isWeixin"
        download
        href="https://zhult-com.oss-cn-beijing.aliyuncs.com/tuanfeng/__UNI__B07FE0F__20230707152300(1).apk"
        class="DownLoaButton"
      >
        <span class="iconfont icon-anzhuologo"></span> 下载</a
      >

      <a
        v-if="!isWeixin"
        download
        href="https://zhult-com.oss-cn-beijing.aliyuncs.com/tuanfeng/__UNI__B07FE0F_0708092849.ipa"
        class="DownLoaButton"
      >
        <span class="iconfont icon-ios"></span> 下载</a
      >

      <div v-else>
        <div
          style="display: flex; align-items: center; justify-content: center"
          class="DownLoaButton"
          @click="handleShow"
        >
          <span class="iconfont icon-anzhuologo"></span> 下载
        </div>

        <div
          style="display: flex; align-items: center; justify-content: center"
          class="DownLoaButton"
          @click="handleShow"
        >
          <span class="iconfont icon-ios"></span> 下载
        </div>
      </div>
    </div>

    <view
      class="mask"
      :style="{
        'z-index': isShowMask ? 1 : -100,
        opacity: isShowMask ? 1 : 0,
      }"
    >
      <img
        class="tip"
        src="./assets/4cf8340dbf2c13fbef9fa081f2b62a8.png"
        alt=""
      />

      <img
        @click="isShowMask = false"
        class="know"
        src="./assets/point_btn.png"
        alt=""
      />
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowMask: false,
      isWeixin: true,
    };
  },
  mounted() {
    this.isWeixin = this.checkedIsWeixin();
  },
  methods: {
    handleDowmloadApp() {},

    handleShow() {
      console.log(1);
      this.isShowMask = true;
    },

    checkedIsWeixin() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 300ms;
}

.tip {
  width: 100%;
}

.know {
  width: 70%;
  margin-top: 20px;
}

.iconfont {
  font-size: 1em !important;
  margin-right: 10px;
}

.icon-anzhuologo {
  color: #99c149;
}

.icon-ios{
  color: #0389d0;
}
</style>
