<template>
  <div>
    <div class="mt30 mb60">
      <div class="box">
        <!--机构注册-->
        <el-card v-if="!user">
          <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,useRouter} from "vue-router";
import useUserStore from "@/store/modules/user";

const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const data = reactive({
  isShow: false,
  isCodeTrue: false,
  counting: false,
  form: {
    userName: ''
  },
  activeStep: 0
})
const {isShow, isCodeTrue, counting, form, activeStep} = toRefs(data)
const user = useUserStore().user
onMounted(() => {
  if (route.query.step) {
    activeStep.value = Number(route.query.step)
  }
  if (user) {
    form.value.userName = user.userName
  }
  if(user&&(user.utype=='1'||user.utype=='2')){
    router.push({name: 'matchList'})
  }
})
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>