<template>
  <div id="app">
    <router-view ></router-view>
    <TipDialog v-if="tiptype"></TipDialog>
  </div>
</template>

<script>
  import TipDialog from "@/components/tipDialog.vue";
  export default {
    components: { TipDialog },
    name: "App",
    data() {
      return {
        timeOut: 2 * 60 * 1000,//120秒未操作提示彈框
        // timeOut: 10 * 1000,
        lastTimeStoreId: 'lastTime_jc',
        tiptype: false,
        timer: null,
      };
    },
    watch: {
      //監聽再那個頁面去執行定時器
      $route(to, from) {
        let that = this;
        if (to.path == '/shoopcar' || to.path == '/orderAdd' || to.path == '/detailBox') {
          clearInterval(that.timer)
          that.timer = setInterval(this.checkTimeout, 1000);
        } else {
          clearInterval(that.timer)
        }
      }
    },
    mounted() {
      let that = this;
      // 監聽事件
      that.$nextTick(function () {
        window.addEventListener('click', that.setLastTime)
        window.addEventListener('keydown', that.setLastTime)
        window.addEventListener('scroll', that.setLastTime)
        window.addEventListener('touchstart', that.setLastTime)
        window.addEventListener('touchend', that.setLastTime)
      })
    },
    methods: {
      tipTypeson() {
        this.tiptype = false;
      },
      setLastTime() {
        localStorage.setItem(this.lastTimeStoreId, new Date().getTime());
      },
      // 獲取時間
      getLastTime() {
        return localStorage.getItem(this.lastTimeStoreId);
      },
      // 刪除
      removeLastTime() {
        localStorage.removeItem(this.lastTimeStoreId)
      },
      checkTimeout() {
        let that = this;
        console.log(111);
        let currentTime = new Date().getTime();
        let lastTime = this.getLastTime();
        if (currentTime - lastTime > that.timeOut) {
          that.tiptype = true;
          clearInterval(that.timer)
        }
      },
    },
  };
</script>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    background: #F8F8F8;
  }

  input::-webkit-input-placeholder {
    color: #999;
  }

  .tisps {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 100;
  }
</style>