<template>
  <PageWrapper
    title="分步表单"
    content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
  >
    <el-card shadow="never" class="mt-3 proCard">
      <el-row :gutter="20" justify="center">
        <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
          <el-steps align-center :active="currentTab" class="mt-4">
            <el-step title="填写转账信息" description="确保填写正确" />
            <el-step title="确认转账信息" description="确认转账信息" />
            <el-step title="完成转账" description="恭喜您，转账成功" />
          </el-steps>
          <step1 v-if="currentTab === 1" @next-step="nextStep" />
          <step2 v-if="currentTab === 2" @next-step="nextStep" @prev-step="prevStep" />
          <step3 v-if="currentTab === 3" @prev-step="prevStep" @finish="finish" />
        </el-col>
      </el-row>
    </el-card>
  </PageWrapper>
</template>

<script setup>
  import { ref } from 'vue';
  import step1 from './Step1.vue';
  import step2 from './Step2.vue';
  import step3 from './Step3.vue';

  const currentTab = ref(1);

  function nextStep() {
    if (currentTab.value < 3) {
      currentTab.value += 1;
    }
  }

  function prevStep() {
    if (currentTab.value > 1) {
      currentTab.value -= 1;
    }
  }

  function finish() {
    currentTab.value = 1;
  }
</script>

<style lang="scss" scoped></style>
