<template>
  <div class="apply">
    <div class="head" :style="{ width: '75%', margin: '0px auto' ,height:'100px'}">
      <Steps :steps="steps"  :style="{height:'100%'}"/>
    </div>
    <TypeForm v-if="steps==1" :style="{marginTop:'50px'}" @changeSteps="changeSteps"/>
    <AccountCreate v-else-if="steps==2 && type ==1" :style="{marginTop:'50px'}" @changeSteps="changeSteps" :type="type"/>
    <AccountModify v-else-if="steps==2 && type ==2" :style="{marginTop:'50px'}" @changeSteps="changeSteps" :type="type"/>
    <RoleApply v-else-if="steps==2 && type ==3" :style="{marginTop:'50px'}" @changeSteps="changeSteps" :type="type"/>
    <MenuApply v-else-if="steps==2 && type ==4" :style="{marginTop:'50px'}" @changeSteps="changeSteps" :type="type"/>



  <!-- 成功页面 -->
    <Success v-else-if="steps==3" :style="{marginTop:'50px'}" @changeSteps="changeSteps"/>



  </div>
</template>
<script>
import Steps from "@/baseConfigComponents/views/apply/components/Form/components/Steps";
import TypeForm from "@/baseConfigComponents/views/apply/components/Form/components/TypeForm";
import RoleApply from "@/baseConfigComponents/views/apply/components/Form/components/RoleApply";
import AccountCreate from "@/baseConfigComponents/views/apply/components/Form/components/AccountCreate";
import AccountModify from "@/baseConfigComponents/views/apply/components/Form/components/AccountModify";
import Success from "@/baseConfigComponents/views/apply/components/Form/components/Success";
import MenuApply from "@/baseConfigComponents/views/apply/components/Form/components/MenuApply";
export default {
  data(){
    return {
      steps:1,
      type:'',
    }
  },
  components: {
    Steps,
    TypeForm,
    RoleApply,
    AccountCreate,
    AccountModify,
    MenuApply,
    Success,
  },
  methods:{
    changeSteps(num,type){
      this.steps = num
      this.type = type

     

    },


  }
};
</script>
