<template>
  <div
    id="download"
    :class="{ app: true, block: type === 1 }"
    :style="{ width: client.width + 'px', height: client.height + 'px' }"
    ref="download"
  >
    <van-overlay :show="show" class-name="overlay">
      <div class="wrapper text">
        <div class="top"></div>
        请点击右上角选择“浏览器中打开”
      </div>
    </van-overlay>
    <div class="main">
      <img src="../../assets/image/down.jpg" style=" height: 100%" />
      <div class="content" :style="{ fontSize: client.fs + 'px' }">
        <div class="title">应用简介:</div>
        <div class="body">
          《智慧融媒APP》作为集团信息化统一入口，实现了信息化系统，实现办公自动化系统、综合信息服务系统，内容生产系统等多系统为一体的综合型掌上服务平台应用。目前已实现的业务功能包含了新闻资讯发布、党员管理、门禁系统及活动传播数据统计分析，后续会逐步拓展业务功能，最终实现集团办公信息化、自动化。
        </div>
      </div>
    </div>
    <div class="button" :style="{ width: client.width + 'px' }">
      <van-button
        type="danger"
        style="border-color: #FF6066; background-color: #FF6066"
        round
        hairline
        @click="down"
        block
      >
        下载APP
      </van-button>
    </div>
  </div>
</template>

<script>
import { sysConfig } from "@/api/user/user.js";
import { currentUrlToParams } from "@/utils/common.js";
import { Button as vanButton, Overlay as vanOverlay } from "vant";
import "vant/lib/button/style";
import "vant/lib/overlay/style";
// https://apps.apple.com/cn/app/%E6%99%BA%E6%85%A7%E8%9E%8D%E5%AA%92app/id1563693329
export default {
  name: "app",
  data: function() {
    return {
      isAndroid: true,
      isWindows: false,
      isIphone: false,
      show: false,
      client: {
        width: 0,
        height: 0,
        fs: 0
      },
      url: {
        dev: {
          ios:
            "https://apps.apple.com/cn/app/%E6%99%BA%E6%85%A7%E8%9E%8D%E5%AA%92app/id1563693329",
          android:
            "https://zhihui-dangjian.oss-cn-chengdu.aliyuncs.com/package/cmpb_formal.apk"
        },
        pro: {
          ios:
            "https://apps.apple.com/cn/app/%E6%99%BA%E6%85%A7%E8%9E%8D%E5%AA%92app/id1563693329",
          android:
            "https://zhihui-dangjian.oss-cn-chengdu.aliyuncs.com/package/cmpb.apk"
        }
      },
      type: undefined
    };
  },
  methods: {
    down() {
      if (this.isIphone) {
        window.location.href = this.url[this.$pageParams.env].ios;
      } else {
        window.location.href = this.url[this.$pageParams.env].android;
      }
    }
  },
  mounted() {
    this.$pageParams = currentUrlToParams();
    !this.$pageParams.env && (this.$pageParams.env = "dev");
    this.client = {
      width:
        document.documentElement.clientWidth >= 750
          ? document.documentElement.clientHeight / 1.9
          : document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      fs: 16
    };
    sysConfig().then(res => {
      this.type = res.GRAY_MODE - 0;
    });
    const sys = window.navigator.userAgent.toLowerCase();
    this.isAndroid = /android/g.test(sys);
    this.isWindows = /windows/g.test(sys);
    this.isIphone = /iphone/g.test(sys);
    var isWeixin = sys.indexOf("micromessenger") != -1;
    if (isWeixin) {
      this.show = true;
      return;
    }
    if (this.$pageParams.env != "dev" && this.isIphone) {
      window.location.href = this.url.pro.ios;
    }
  },
  beforeDestroy: function() {},
  components: { vanButton, vanOverlay }
};
</script>
<style lang="scss">
#download {
  max-width: 750px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: hidden;
  background-color: #ff7268;
  .main {
    overflow-y: scroll;
    height: 100%;
    position: relative;
    .content {
      .title {
        padding-bottom: 10px;
      }
      .body {
        line-height: 1.5em;
        text-indent: 2em;
        padding: 0 10px;
      }
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      font-size: 16px;
      top: 55%;
      color: #ffffff;
      text-shadow: 0px 7px 8px rgba(4, 0, 0, 0.32);
    }
  }
  .text {
    width: 9.5em;
    float: right;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    border-radius: 10px;
    margin: 1em;
    padding: 10px;
    .top {
      transform: rotate(45deg);
      -ms-transform: rotate(45deg); /* IE 9 */
      -moz-transform: rotate(45deg); /* Firefox */
      -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
      -o-transform: rotate(45deg); /* Opera */
      border: none;
      border: 5px solid rgba(0, 0, 0, 0);
      border-top-color: rgba(0, 0, 0, 0.6);
      border-left-color: rgba(0, 0, 0, 0.6);
      width: 0;
      float: right;
      margin-top: -14px;
    }
  }
  .button {
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 100%;
    max-width: 750px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  }
}
.overlay {
  background-color: rgba(0, 0, 0, 0);
}
</style>
