<template>
  <div class="app-container">
    <div class="table center">
      <div class="box">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="考级基本信息" />
          <el-step title="添加考生" />
        </el-steps>
      </div>
    </div>
    <div class="table">
      <exam-info v-show="active==0" ref="examInfoRef" @next="next" />
      <exam-person v-show="active==1" ref="examPersonRef" @prev="prev" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import ExamInfo from './components/examInfo'
import ExamPerson from './components/examPerson'
import { useRoute, useRouter } from 'vue-router'
import { getCurrentInstance } from '@vue/runtime-core'


const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const active = ref(-1)

onMounted(() => {
  const examId = route.params.examId
  const step = route.query.step
  if (!examId || examId == '0') {
    active.value = 0
  } else {
    active.value = step == '2' ? 1 : 0
    if (active.value == 0) {
      proxy.$refs['examInfoRef'].init(examId)
    } else {
      proxy.$refs['examPersonRef'].init(examId)
    }
  }
})

function next(examId) {
  active.value++
  router.push({
    path: `/level/apply/modify/${examId}`,
    query: { step: active.value + 1 }
  })
  proxy.$refs['examPersonRef'].init(examId)
}

function prev(examId) {
  active.value--
  router.push({
    query: { step: active.value + 1 }
  })
  proxy.$refs['examInfoRef'].init(examId)
}

</script>

<style lang="scss" scoped>
:deep(.el-step__title.is-process){color: var(--el-color-primary)}
:deep(.el-step__head.is-process){color: var(--el-color-primary);border-color: var(--el-color-primary)}
.box{
  width: 1000px;
}
.center{
  display: flex;
  justify-content: center;
}
</style>