<template>
  <div :style="styleObject">
    自动退出倒计时：{{ counter }}秒
  </div>
</template>

<script>
export default {
  props: {
    times: {
      type: String,          //类型
      default: 300,       //设置默认值
    },
    bottomOffset: {
      type: String,          //类型
      default: '10',       //设置默认值
    },
    rightOffset: {
      type: String,          //类型
      default: '10',       //设置默认值
    },
    fontSize: {
      type: String,          //类型
      default: '18',       //设置默认值
    }
  },
  data() {
	  return {
      acceptHandler: '',
      counter: this.times,
      styleObject: {
        position: "absolute",
        bottom: this.bottomOffset + 'px',
        right: this.rightOffset + 'px',
        color: "rgb(156 223 247)",
        fontSize: this.fontSize + 'px',
      }
    }
	},
  created() {
    clearInterval(this.acceptHandler);
    this.init();
  },
	methods:{
		init() {
		  var _this = this;
      this.acceptHandler = setInterval(function(){
        _this.counter--;
        if(_this.counter == 0){
          clearInterval(_this.acceptHandler);
          _this.$router.push({ path: '/errorPage' , query: {msg: '操作超时，系统将返回到咨询页面！'}});
        }
      },1000);
		}
  },
  unmounted(){
    if (this.acceptHandler) {
      clearInterval(this.acceptHandler);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
