<template>
  <section class="set-success">
    <div class="title" style="text-align:center;" v-show="showTitle">设置成功</div>
    <van-image src="@/assets/success.png" width="64px" fit="contain" style="margin-top:41px;"></van-image>
    <div style="color:#737582;font-size: 16px;margin-top:16px;">{{tip}}</div>
    <van-button block type="info" style="margin-top: 200px;" :to="{name: 'UserCenter'}">返回个人中心</van-button>
    <div style="color:#B6B5BA; font-size: 14px;margin-top: 20px;" >{{count}}秒后跳转到个人中心</div>
  </section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Button, Image } from 'vant';
import { State, Getter, Action, Mutation } from 'vuex-class';
import { Route } from 'vue-router';

@Component({
  components: {
    [Button.name]: Button,
    [Image.name]: Image,
  },
})
export default class SetSuccess extends Vue {
  @Prop({
    default: '密码设置成功',
  })
  private tip!: string;
  @Prop({
    default: true,
  })
  private showTitle!: boolean;
  private count: number = 5;
  private mounted() {
    const timer = setInterval(() => {
      const { count } = this;
      if ( count <= 0) {
        clearInterval(timer);
        return this.$router.replace('/userCenter/index');
      }
      this.count--;
    }, 1000);
    this.$once('hook:beforeDestory', () => {
      clearInterval(timer);
    });
  }
}
</script>
<style scoped lang="scss">
  .set-success {
    .title{
      font-size: 22px;
      color: #353535;
      font-weight: 500;
      text-align: left;
    }
  }
</style>