<template>
  <!-- 应用渲染页 -->
  <div class="app-show main-bg-img">
    <div class="count-down">
      系统将在 <span>{{ times }}</span> 秒后返回首页
    </div>
    <iframe
      class="my-iframe"
      :src="iframeUrl"
      frameborder="0"
      @load="changeLoading"
      name="myIframe"
    ></iframe>
    <div class="back-home flex jcc aic" @click="backHome">
      <i class="iconfont icon-home mr10"></i>
      <span>首页</span>
    </div>
    <Loading v-if="loading"></Loading>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Loading from "@/components/Loading.vue";
export default {
  components: {
    Loading,
  },
  data() {
    return {
      iframeUrl: "",
      loading: true,
      timeOut: null,
      defaultTimes: 300,
      times: 0,
    };
  },
  created() {
    this.getAppInfo();
    this.isTimeOut();
  },
  computed: {
    ...mapState(["onlineSkin"]),
  },
  methods: {
    getAppInfo() {
      let {
        siteId,
        custUrl,
        serviceApi,
        appId,
        newsSource,
        devicenum,
        // appName,
      } = this.$route.query;
      this.iframeUrl = `${custUrl}?siteId=${siteId}&baseUrl=${serviceApi}&appId=${appId}&newsSource=${newsSource}&devicenum=${devicenum}`;
    },
    changeLoading() {
      this.loading = false;
      if (this.onlineSkin) {
        let obj = {
          type: "changeSkin",
          url: this.onlineSkin, // css在线地址
        };
        myIframe.window.postMessage(obj, "*");
      }
    },
    backHome() {
      this.$router.push("/");
    },
    handleBack() {
      this.$router.back();
    },
    // 返回首页
    startTimer() {
      clearInterval(this.timeOut);
      this.times = this.defaultTimes;
      this.timeOut = setInterval(() => {
        if (this.times == 0) {
          this.$router.push({ path: "/" });
        }
        this.times -= 1;
      }, 1000);
    },
    // 无任何操作返回首页
    isTimeOut() {
      if (this.$route.path == "/" || this.$route.path == "/home") {
        return;
      }
      this.startTimer();
      window.addEventListener("mousemove", this.startTimer);
      window.addEventListener("mouseup", this.startTimer);
      window.addEventListener("keyup", this.startTimer);
      window.addEventListener("click", this.startTimer);
      window.addEventListener("touchend", this.startTimer);
    },
  },
  beforeDestroy() {
    window.removeEventListener("mousemove", this.startTimer);
    window.removeEventListener("mouseup", this.startTimer);
    window.removeEventListener("keyup", this.startTimer);
    window.removeEventListener("click", this.startTimer);
    window.removeEventListener("touchend", this.startTimer);
    this.timeOut && clearInterval(this.timeOut);
  },
};
</script>

<style lang="less" scoped>
.app-show {
  width: 100%;
  height: 100%;
  position: relative;
  .count-down {
    position: absolute;
    top: 80px;
    left: 160px;
    color: #fff;
    font-size: 24px;
    // span {
    //   color: var(--main-theme-color);
    // }
  }
  .my-iframe {
    width: 100%;
    height: 100%;
    display: block;
  }
  .back-home {
    width: 150px;
    height: 64px;
    border: 1px solid var(--main-h1-color);
    border-radius: 8px;
    position: absolute;
    top: 40px;
    right: 160px;
    cursor: pointer;
    .el-icon-arrow-left,
    .icon-home {
      font-size: 26px;
      color: var(--main-h1-color);
    }
    span {
      font-size: 28px;
      font-family: Microsoft YaHei;
      color: var(--main-h1-color);
    }
  }
}
</style>
