<template>
  <div id="app" class="keyInput">
    <img v-if="show" src="https://img2.baidu.com/it/u=3473953544,1174334705&fm=253&fmt=auto&app=138&f=JPEG?w=925&h=500" style=""/>
    <el-input v-model="input" id="keyInput"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showInput:false,
      show:false,
      input:'',
      timer:''
    }
  },
  watch:{
    show(val){
      if(val){
        var that = this
        var dom = document.getElementById('keyInput')
        dom.focus()
        document.onkeyup=function(e){
          if(e.keyCode == 13){
            if(that.input == 'xiaoshi'){
              that.show = false
              clearInterval(that.timer)
              localStorage.canShow = true
              that.$router.push(
                {
                  name: 'Login',
                  params:{
                    canShow:true
                  }
                })
            }else{
              that.$set(that,'input','')
            }
          }
        }
      }
    },
  },
  mounted() {
    var time = new Date(this.$c.updateTime).getTime()
    var time2 = new Date().getTime()
    if(time2>=time){
      this.show = false
      if(localStorage.canShow){
        localStorage.canShow = false
      }
      this.$router.push({name: 'Login'})
    }else{
      this.show = true
      this.timer = setInterval(() => {
        if (new Date().getTime()>=time) {
          this.show = false
          clearInterval(this.timer)
          this.$router.push({name: 'Login'})
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss">
.keyInput{
  .el-input{
  width:0;
  opacity: 0;
  z-index: -1;
  border: none;
   position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
}
  
</style>
<style lang="scss" scoped>
#app{
    width: 100%;
    height: 100%;
    // overflow:hidden;
    background: white;
}
img{
   position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

</style>