<template>
  <div class="step-four">
    <i class="iconfont icondg"></i>
    <h3>恭喜您顺利通过企业实名认证</h3>
    <p>{{ count }}S后为您自动返回首页</p>
    <syButton
      class="back-btn"
      type="primary"
      @click="back()"
      mode="elementBtn"
      size="large"
      >返回</syButton
    >
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { syButton } from "cqk-sy-ui";
export default defineComponent({
  components: {
    syButton,
  },
  data() {
    return {
      timer: 0,
      count: 0,
    };
  },
  emits: ["update"],
  mounted() {
    this.countDown();
  },
  watch: {
    count(val) {
      if (val === 0) this.$emit("update");
    },
  },
  methods: {
    back() {
      this.$emit("update");
    },
    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 lang="scss">
.step-four {
  margin-top: 80px;
  text-align: center;
}
.icondg {
  font-size: 50px;
  color: #27cf72;
}
h3 {
  margin: 34px auto 18px;
}
p {
  margin-bottom: 32px;
}
:deep(.back-btn) {
  width: 120px;
  height: 40px;
  border-radius: 4px;
}
</style>
