<template>
  <div class="header flex aic jcb">
    <slot name="left">
      <div class="back-one flex aic pointer" @click="handleBack">
        <img class="mr10" src="../assets/img/31fanhui1.png" />
        <span class="back-text">返回上一级</span>
      </div>
    </slot>
    <slot name="title" class="title">
      <div></div>
    </slot>
    <slot name="right"><div></div></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    this.isTimeOut();
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    // 5分钟返回首页
    startTimer() {
      let that = this;
      clearInterval(that.timeOut);
      this.timeOut = setInterval(function () {
        that.$router.push({ path: "/" });
      }, 1000 * 60 * 5);
    },
    // 5分钟无任何操作返回首页
    isTimeOut() {
      if (this.$route.path == "/" || this.$route.path == "/home") {
        return;
      }
      this.startTimer();
      document.body.addEventListener("mousemove", this.startTimer);
      document.body.addEventListener("mouseup", this.startTimer);
      document.body.addEventListener("keyup", this.startTimer);
      document.body.addEventListener("click", this.startTimer);
      document.body.addEventListener("touchend", this.startTimer);
    },
  },
  beforeDestroy() {
    document.body.removeEventListener("mousemove", this.startTimer);
    document.body.removeEventListener("mouseup", this.startTimer);
    document.body.removeEventListener("keyup", this.startTimer);
    document.body.removeEventListener("click", this.startTimer);
    document.body.removeEventListener("touchend", this.startTimer);
    clearInterval(this.timeOut);
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 100px;
  padding: 0px 40px;
  background: url("../assets/img/title.jpg") no-repeat center;
  box-shadow: 0px 2px 6px 6px #ccc;
  .back-text {
    font-size: 28px;
    color: #ffffff;
  }
  .title {
    font-size: 44px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>