<template>
  <Result status="success" title="更改密码成功" :sub-title="getSubTitle">
    <template #extra>
      <c-button key="console" type="primary" @click="finish"> 返回登录 </c-button>
    </template>
  </Result>
</template>
<script lang="ts">
  import { defineComponent, computed, unref, onMounted, watchEffect } from 'vue';
  import { Result } from 'ant-design-vue';
  import { useI18n } from '../../../../hooks/web/useI18n';
  import { useLoginState } from '@jdlinker/func';
  import { useCountdown } from '@jdlinker/ui';
  import { propTypes } from '@jdlinker/utils';

  export default defineComponent({
    name: 'step3',
    components: {
      Result
    },
    props: {
      accountInfo: {
        type: Object,
        default: () => ({})
      },
      count: propTypes.number.def(5)
    },
    emits: ['finish'],
    setup(props, { emit }) {
      const { t } = useI18n();
      const { handleBackLogin } = useLoginState();
      const { currentCount, start } = useCountdown(props.count);
      const getSubTitle = computed(() => {
        return t('sys.login.subTitleText', [unref(currentCount)]);
      });
      /**
       * 倒计时
       */
      watchEffect(() => {
        if (unref(currentCount) === 1) {
          setTimeout(() => {
            finish();
          }, 500);
        }
      });

      /**
       * 结束回调
       */
      function finish() {
        handleBackLogin();
        emit('finish');
      }

      onMounted(() => {
        start();
      });

      return {
        getSubTitle,
        finish
      };
    }
  });
</script>
