<template>
  <div>
  <div class="mt30 mb60">
  <div class="box">
    <!--机构注册-->
    <el-card>
      <el-steps :active="activeStep" align-center>
        <el-step :title="language==0?'创建账号':'create an account'"  />
        <el-step :title="language==0?'账号信息':'account information'" />
        <el-step :title="language==0?'注册完成':'stered successfully'" />
      </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" :accont="form.userName"/>
    <Step3 v-if="activeStep==2" :accont="form.userName"/>
  </div>
  </div>
  </div>
</template>

<script setup>
import Step1 from "./step1";
import Step2 from "./step2";
import Step3 from "./step3";
import {onMounted,toRefs,reactive} from "vue"
import {useStorage} from "@vueuse/core/index";
import {useRoute} from "vue-router";
const language= useStorage('language',0)
const route = useRoute()
const data = reactive({
  isShow:false,
  isCodeTrue:false,
  counting:false,
  form:{
    userName:''
  },
  activeStep: 0
})
const {isShow,isCodeTrue,counting,form,activeStep} = toRefs(data)

onMounted(() => {
  if(route.query.step){
    activeStep.value = Number(route.query.step)
  }
})
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>