<script lang='ts' setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { useForgot } from './useForgot'

const { stage } = useForgot()
</script>

<template>
  <div>
    <div class="w-1400px mx-auto">
      <div class="flex    py-150px">
        <div class="w-50% h-full flex items-center mr-120px">
          <img
            src="~/assets/images/register_forgot.png"
            class="w-620px h-730px"
            srcset=""
          >
          <!-- <img
        v-else
        src="@/assets/images/icon-email-verity.png"
        class="w-550px h-480px"
        srcset=""
      > -->
        </div>
        <div class="w-50% h-full flex items-center">
          <business-forgot-stage-one v-if="stage === 1" />
          <business-forgot-stage-two v-if="stage === 2" />
          <business-forgot-stage-three v-if="stage === 3" />
        </div>
      </div>
    </div>
    <common-footer-guide />
  </div>
</template>

<style lang='less' scoped>
</style>
