<template>
  <div class="stateWaiting">
    <!-- waiting -->
    <img src="@/assets/img/waiting.png" alt="" />
    <div class="tip">
      直播间人数较多，正在排队进入，
      <br />
      {{ wait }}秒后自动刷新
    </div>
  </div>
</template>

<script>
export default {
  name: 'state-408',
  data() {
    return {
      tiemr: null,
      wait: 5
    };
  },
  mounted() {
    this.tiemr = setInterval(() => {
      if (this.wait <= 0) {
        clearInterval(this.tiemr);
        this.tiemr = null;
        this.wait = 0;
      } else {
        this.wait--;
      }
    }, 1000);
  },
  watch: {
    wait(val) {
      if (val <= 0) {
        window.location.reload();
      }
    }
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.stateWaiting {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100vh;
  background: #fff;
  img {
    object-fit: scale-down;
    display: block;
    width: 100%;
    height: 100%;
  }
  .tip {
    line-height: 0.4rem;
    position: absolute;
    bottom: 15%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.18rem;
    color: #666;
  }
}
</style>
