<template>
  <div class="forget">
    <div class="header flex-start">
      <img src="@/assets/images/home/logo.png" alt="" />
      <div class="title">防爆机器人管理平台</div>
    </div>
    <div class="content">
      <modelVue :current-index="currentIndex">
        <template #content>
          <step1Vue
            @success="
              (value) => {
                currentIndex++
              }
            "
            ref="step1Ref"
            v-if="currentIndex === 1"
          />

          <step2Vue
            v-if="currentIndex === 2"
            ref="step2Ref"
            @success="
              (value) => {
                currentIndex++
              }
            "
          />
          <step3Vue v-if="currentIndex === 3" />
        </template>

        <template #btns>
          <template v-if="currentIndex === 1">
            <div class="confirm-btn" @click="next">下一步</div>
          </template>
          <template v-if="currentIndex === 2">
            <div class="flex-start">
              <div class="cancel-btn" @click="pre">上一步</div>
              <div class="confirm-btn ml10" @click="confirm">确定</div>
            </div>
          </template>
          <template v-if="currentIndex === 3">
            <div class="confirm-btn" @click="tologin">立即登录</div>
          </template>
        </template>
      </modelVue>

      <div class="bottom-title">
        <span v-if="currentIndex !== 3" @click="tologin">返回登录界面</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import modelVue from './components/model.vue'
import step1Vue from './components/step1.vue'
import step2Vue from './components/step2.vue'
import step3Vue from './components/step3.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const step1Ref = ref<InstanceType<typeof step1Vue>>()

const step2Ref = ref<InstanceType<typeof step2Vue>>()

const currentIndex = ref(1)

const next = () => {
  step1Ref.value?.next()
}

const pre = () => {
  currentIndex.value--
}

const tologin = () => {
  router.push('/login')
}

const confirm = () => {
  step2Ref.value?.next()
}
</script>

<style scoped lang="less">
.forget {
  width: 100%;
  height: 100%;
  .header {
    width: 1920px;
    height: 64px;
    background: #3480c6;

    img {
      width: 34px;
      height: 34px;
      margin-right: 16px;
      margin-left: 24px;
    }
    .title {
      font-size: 24px;
      color: #ffffff;
      font-weight: 700;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 64px);
    background: #f1f2f6;
    padding: 54px 460px;

    .bottom-title {
      margin-top: 64px;
      text-align: center;
      color: #3480c6;
      font-size: 16px;
    }
  }
}
</style>
