<template>
  <div class="step-four">
    <i class="iconfont icondg"></i>
    <h3>恭喜您顺利通过企业实名认证</h3>
    <p>{{ count }}S后为您自动返回首页</p>
    <el-button class="back-btn" type="primary" @click="back()">返回</el-button>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      timer: 0,
      count: 0,
    };
  },
  mounted() {
    this.countDown();
  },
  watch: {
    count(val) {
      if (val === 0) this.$router.push("/userCenter");
    },
  },
  methods: {
    back() {
      this.$router.push("/userCenter");
    },
    countDown() {
      const TIME_COUNT = 3;
      if (!(this as any).timer) {
        this.count = TIME_COUNT;
        (this as any).timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval((this as any).timer);
            (this as any).timer = 0;
          }
        }, 1000);
      }
    },
  },
});
</script>

<style scoped>
.step-four {
  margin-top: 80px;
  text-align: center;
}
.icondg {
  font-size: 50px;
  color: #27cf72;
}
h3 {
  margin: 34px auto 18px;
}
p {
  margin-bottom: 32px;
}
.back-btn {
  width: 120px;
  height: 40px;
  border-radius: 4px;
}
</style>
