<template>
  <div class="root_container">
    <div class="content_container">
      <div class="loading_container" v-show="pageStatus == 0">
        <span class="el-icon-loading"></span>
        <div>加载中...</div>
      </div>
      <div class="content_container" v-show="pageStatus == 1">
        <div class="wx_container" v-show="isInWx">
          <span
            >点击右上角按钮，然后在弹出的菜单中，点击在浏览器中打开，即可安装
          </span>
          <i
            style="font-size: 24px"
            class="iconfont icon-Down-Right wx_tips"
          ></i>
        </div>
        <div class="header"></div>
        <div class="icon_container">
          <img :src="appDetails.icon" />
        </div>
        <div class="name_container">
          <i style="font-size: 24px" class="iconfont icon-android"></i>
          {{ appDetails.apkName }}
        </div>
        <div class="control_container">
          <div class="step_one" v-show="currentStep == 1">
            <div class="control_tips">
              该应用仅限于内测使用，您必须输入密码才能继续
            </div>
            <div class="control_psw">
              <input
                type="tel"
                id="password"
                v-model="localPsw"
                class="form-control text-center margin-bottom-30"
                style="
                  width: 70%;
                  margin: auto;
                  margin-bottom: 20px;
                  margin-top: 20px;
                "
              />
            </div>
            <div class="btn_container" @click="realCheckPsw">
              <span>立即进入</span>
            </div>
          </div>
          <div class="step_two" v-show="currentStep == 2">
            <div class="apk_info">
              <div>
                版本：{{ appDetails.appVersion }}（{{ appDetails.appCode }}） |
                大小：{{ appDetails.apkSize }}
              </div>
              <div>更新时间：{{ appDetails.updateTime }}</div>
            </div>
            <div class="btn_container" @click="realInstallApk">
              <span>安装</span>
            </div>
          </div>
          <div class="qrcode_tips">用手机扫描二维码安装</div>
          <div class="qrcode_container">
            <img class="qr_img" :src="appDetails.qrcodeUrl" />
          </div>
        </div>
      </div>
      <div class="error_container" v-show="pageStatus == 2">
        <div class="err_view">
          <img src="/images/not_found.png" alt="" />
          <div>未找到应用信息，应用可能已经停止分发，请联系客服处理~</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getApkDetails, checkpsw } from "../../api/log/apk";
import constant from "../../utils/constants";
import md5 from "js-md5";
import { Message } from "element-ui";
export default {
  data() {
    return {
      isInWx: this.isWeiXin(),

      //页面状态 0 加载中 1 加载成功 2 app不存在
      pageStatus: 0,

      //app信息
      appDetails: {},

      localPsw: "",

      //应用id
      id: "",

      currentStep: 1, //步骤1 是验证密码 步骤2 是安装
    };
  },
  mounted: function () {
    document.title = "";
    this.id = this.$route.query.id;

    //获取详情信息
    this.realGetApkDetails();
  },
  methods: {
    //判断是否是微信浏览器的函数
    isWeiXin() {
      //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      var ua = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    },

    //获取apk信息
    realGetApkDetails() {
      getApkDetails(this.id)
        .then((result) => {
          this.pageStatus = 1;
          if (result.data.code == 200) {
            this.appDetails = result.data.data;
            document.title = this.appDetails.apkName;
            if (this.appDetails.needPsw) {
              this.currentStep = 1;
            } else {
              this.currentStep = 2;
            }
          }
        })
        .catch((err) => {
          this.pageStatus = 2;
        });
    },

    //检查密码
    realCheckPsw() {
      if (this.isInWx) {
        Message.warning("请在浏览器中打开此页面");
        return;
      }
      checkpsw(this.id, md5(this.localPsw))
        .then((result) => {
          if (result.data.code == 200) {
            this, (this.currentStep = 2);
          }
        })
        .catch((err) => {});
    },

    //安装apk
    realInstallApk() {
      if (this.isInWx) {
        Message.warning("请在浏览器中打开此页面");
        return;
      }
      window.open(
        constant.BASE_HOST +
          "common/apk/install?id=" +
          this.id +
          "&psw=" +
          md5(this.localPsw),
        "_blank"
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.content_container {
}
.header {
  background: url("/images/top_bg_mobile_ratio.png") top center no-repeat;
  background-size: 100% auto;
  height: 100px;
}
.icon_container img {
  width: 100px;
  margin: 0 auto;
  display: block;
  border-radius: 10px;
  height: 100px;
  margin-top: 20px;
}
.name_container {
  margin-top: 25px;
  text-align: center;
  text-shadow: none;
  font-weight: 400;
  color: #333;
  font-size: 24px;
}
.control_container {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 30px;
  padding-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  box-shadow: 0 0 8px #eee;
}
.control_tips {
  color: #969b9d;
  text-align: center;
}
.control_psw #password {
  background: #f5f8fb;
  outline: 0;
  -webkit-appearance: none;
  box-shadow: none;
  width: 70%;
  margin: auto;
  text-align: center;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  display: block;
  margin-top: 20px;
  height: 34px;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.btn_container span {
  cursor: pointer;
  border-radius: 25px;
  width: 80%;
  margin: 0 auto;
  line-height: 40px;
  color: #ffffff;
  display: block;
  text-align: center;
  height: 40px;
  background: #28caad !important;
  font-size: 18px;
  border-radius: 30px;
  border: 1px solid transparent;
}
.qrcode_tips {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  color: #969b9d;
  font-family: NotoSansHans-Regular, AvenirNext-Regular, proxima-nova,
    "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Open Sans",
    "Helvetica Neue", Arial, sans-serif, "Source Han Sans";
}

.qrcode_container {
  position: relative;
  margin: 0 auto;
  width: 156px;
  height: 156px;
}

.qrcode_container .qr_img {
  width: 156px;
  height: 156px;
  margin: 0 auto;
  display: block;
}
.qrcode_container .qr_logo {
  position: absolute;
  width: 42px;
  height: 42px;
  top: 50%;
  left: 50%;
  border-radius: 10px;
  padding: 3px;
  background-color: #ffffff;
  border: 1px solid #fff;
  transform: translateX(-50%) translateY(-50%);
}
.apk_info {
  font-size: 14px;
  line-height: 2;
  color: #788090;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 30px;
}

.wx_container {
  height: 90px;
  padding-left: 30px;
  padding-right: 40px;
  background-color: #444;
  position: relative;
}

.wx_container span {
  color: #ffffff;
  padding-top: 22px;
  font-size: 14px;
  display: block;
  line-height: 22px;
  opacity: 0.6;
}

.wx_container .wx_tips {
  position: absolute;
  top: 10px;
  color: #ffffff;
  font-size: 40px;
  display: block;
  transform: rotate(-90deg);
  right: 15px;
  z-index: 1000;
}

.loading_container {
  text-align: center;
  padding-top: 50%;
  font-size: 14px;
}

.loading_container div {
  padding-top: 10px;
}

.loading_container span {
  font-size: 30px;
}

.error_container {
  height: 100%;
  position: relative;
}

.error_container img {
  width: 100%;
}

.err_view {
  margin-top: 100px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  padding-left: 40px;
  padding-right: 40px;
  color: #777;
  position: absolute;
}
</style>