<template>
    <component :is="activeComponent[currentStep]" ref="acRef" :modelId="modelId" @nextStep="handleStep"/>
    <div class="btn-layout">
      <el-button type="primary" @click="handleNext">{{currentStep === 1?'完成':'下一步'}}</el-button>
    </div>
</template>
<script setup lang="ts">
import step1 from "./step1.vue"
import step2 from "./step2.vue"
import {nextTick} from "vue";
const {proxy,emit} = getCurrentInstance()
const activeComponent = [step1,step2];
const currentStep = ref(0);
const acRef=ref(null)
const modelId = ref(null)

function handleNext() {
  if(currentStep.value === 1){
    return emit('cancel')
  }
  nextTick(()=>{
    proxy.$refs['acRef'].submitForm()
  })
}
function handleStep(id){
  if(currentStep.value === 0){
    currentStep.value++
    if(id){
      modelId.value = id
      emit('success')
    }
  }
}

function editRow(row){
  modelId.value = null
  currentStep.value = 0
  if(row){
    modelId.value = row.modelId
  }
  nextTick(()=>{
    proxy.$refs['acRef'].handleUpdate(row)
  })
}

defineExpose({editRow})

</script>
<style scoped lang="scss">
.btn-layout{
  display: flex;
  justify-content: center;
  border-top:1px solid #e1e1e180;
  padding-top:10px;
  margin:20px -20px -10px -20px;
}
</style>

