<template>
  <div id="halloween2019">
    <!-- loading -->
    <div class="loading-page page-item" v-if="!show">
      <v-loading>v-loading</v-loading>
    </div>
    <!-- 选择页 -->
    <div class="home-page page-item" v-if="show">
      home-page
    </div>
    <!-- 答题模块 -->     
    <div class="answer-page page-item">
      answer-page
    </div>
    <!-- 捣蛋 -->
    <div class="trick-page page-item">
      trick-page
    </div>
    <!-- 结果页 -->
    <div class="result-page page-item">
      result-page
    </div>
  </div>
</template>

<script>
import load from './components/load/load.vue';
export default {
  data(){
    return{
      count:1,
      show:false
    }
  },
  components:{
    "v-loading":load
  },
  created(){
    this.goGrdoupRecor()
  },
  methods:{
    goGrdoupRecor(){
      const TIME_COUNT = 3;
      if(!this.timer){
        this.timer = setInterval(() => {
          console.log(this.count);
          if(this.count > 0 && this.count <= TIME_COUNT){
            this.count++;
          }else{
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    }
  }
}
</script>