<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>
      <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)

let type
onMounted(() => {
  if (route.path.indexOf('rank') > -1) {
    type = 'rank'
  } else if (route.path.indexOf('beyond') > -1) {
    type = 'beyond'
  }

  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: `/${type}/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 scoped>
.box{
  width: 1000px;
}
.center{
  display: flex;
  justify-content: center;
}
</style>