<template>
  <div class="screen" v-if="showTime">
    <img src="@/assets/service/screen.png" alt="">
    <span @click="skip">跳过 {{time}}</span>
  </div>
</template>
<script>
export default {
  props: {
    reload: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      time: 3,
      showTime: true,
      timeInterval: ''
    }
  },
  mounted () {
    let timeAlreadyShown = localStorage.getItem('timeAlreadyShown');
    if (timeAlreadyShown && !this.reload) {
      this.showTime = false
      return;
    }
    this.timeInterval = setInterval(() => {
      this.time--
      if (this.time <= 0) {
        this.skip()
      }
    }, 1000)
  },
  methods: {
    skip () {
      this.showTime = false
      clearInterval(this.timeInterval)
      localStorage.setItem('timeAlreadyShown', true)
    }
  }
}
</script>
<style lang="scss" scoped>
.screen {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  img {
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  span {
    font-size: 22px;
    color: #fff;
    position: absolute;
    top: 30px;
    right: 30px;
    width: 116px;
    line-height: 48px;
    background: rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    text-align: center;
  }
}
</style>