<template>
  <div>
    <div class="android_body">
      <div class="content" ref="content" >
        <div class="logo">
          <img src="static/images/downloadPageLogo.png" alt="logo"  style="width: 1.6rem;" />
        </div>
        <div class="title">功道云7.0</div>
        <div class="describe">管理执行难就用功道云</div>
        <img src="static/images/downloadPagePhone.png" alt="phone" style="width: 90vw;" />
        <van-row>
          <van-col span="10" offset="7" >
            <van-button class="downloadBtn" type="info" block @click="downloadBtn" >立 即 下 载</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-overlay :show="showOverlay" class-name="WeChatOverlay">
      <div class="upIconDiv">
        <img src="static/images/WeChatUpIcon.png" style="width: .5rem; height: .5rem" alt="upIcon">
      </div>
      <div style="text-align: center; color: #fff; margin-top: 1rem">
        <p><h3>温馨提示：</h3></p>
        <p>1、点击右上角菜单。</p>
        <p>2、选择【浏览器】打开,再下载。</p>
        <van-row>
          <van-col span="8" offset="8" >
            <van-button type="default" plain hairline block @click="showOverlay = false">关 闭</van-button>
          </van-col>
        </van-row>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Vue from 'vue'
import { Overlay, Button } from 'vant'
import moment from 'moment'
Vue.use(Overlay).use(Button)
export default {
  name: 'android_download',
  data () {
    return {
      showOverlay: false,
      contentHeight: ''
    }
  },
  created () {
  },
  methods: {
    downloadBtn () {
      let type = navigator.userAgent
      var startTime = moment().format('YYYYMMDDhhmmss')
      // let name = navigator.userAgent.toLowerCase()
      if (type.indexOf('Android') > -1 || type.indexOf('Linux') > -1) {
        window.open('https://gdyapp.oss-cn-shenzhen.aliyuncs.com/app70/apk/gongdaoyun.apk?v=' + startTime, '_blank')
      } else if (type.indexOf('iPhone') > -1 || type.indexOf('iOS') > -1) {
        window.open('https://apps.apple.com/cn/app/%e5%8a%9f%e9%81%93%e4%ba%91%e7%bb%a9%e6%95%88%e8%80%83%e6%a0%b8/id1517932085', '_blank')
      }
    }
  },
  mounted () {
    let name = navigator.userAgent.toLowerCase()
    if (name.match(/MicroMessenger/i) == 'micromessenger') {
      this.showOverlay = true
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss" >
  .android_body{
    height: 100vh;
    width: 100vw;
    background-color: #26A2FF;
    color: #fff;
    .title{
      font-size: .64rem;
      font-weight: bold;
    }
    .describe{
      font-size: .4rem;
      padding: 0.1rem 0 0.4rem;
    }
    .downloadBtn{
      background-color: #fff;
      color: #26A2FF;
      border-radius: 5px;
    }
  }
  .WeChatOverlay{
    width: 100vw;
    height: 100vh;
  }
  .upIconDiv{
    position:absolute;
    right: 15px;
    top: 0;
    transform: rotate(45deg);
  }
  .content{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
    height: 90vh;
  }

</style>
