<template>
  <div>
  <div class="mt30 mb60">
  <div class="box">
    <!--    国内-机构注册-->
    <el-card>
      <el-steps :active="activeStep" align-center>
        <el-step title="创建账号"  />
        <el-step title="账号信息" />
        <el-step title="注册完成" />
      </el-steps>
    </el-card>

  <div class="mt20"></div>
    <Step1 v-if="activeStep==0" @submit="toStep2" @userName="getUserName" />
    <Step2 v-if="activeStep==1" @submit="toStep3" @prev="toStep1"/>
    <Step3 v-if="activeStep==2"/>



  </div>
  </div>
  </div>
</template>

<script setup>
import {reactive} from "@vue/runtime-core";
import Step1 from "./step1";
import Step2 from "./step2";
import Step3 from "./step3";
import * as match from "@/apiPc/match";
import {onMounted,toRefs} from "vue";
const data = reactive({
  isShow:false,
  isCodeTrue:false,
  counting:false,
  form:{},
  activeStep: 0
})
const {isShow,isCodeTrue,counting,form,activeStep} = toRefs(data)

const toStep1 = () => {
  activeStep.value = 0
}
const toStep2 = () => {
  activeStep.value = 1
}
const toStep3 = () => {
  activeStep.value = 2
}
const getUserName = (val) => {
  console.log(val)
  form.value.userName = val
}
</script>

<style scoped>

</style>