<template>
  <div class="app-container">
    <div class="box ph-30">
      <div class="panel">
        <div class="panel-head" style="width: 100%;">
          <el-steps :active="active" align-center style="width: 100%;">
            <el-step title="报名须知" />
            <el-step title="个人信息完善" />
            <el-step title="培训信息完善" />
            <el-step title="培训考试选择" />
          </el-steps>
        </div>
        <br>
        <component
          :is="StepInfo" :activity="activity" :personal="personal" :exam-list="examList" :train-list="trainList"
          @prev="prev" @next="next" @publish="publish"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent, reactive, ref, watch } from 'vue'
import { onMounted } from '@vue/runtime-core'
import * as train from '@/apiPc/train'
import { toRefs } from '@vueuse/shared'
import { useRouter, useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const active = ref(-1)
const modules = import.meta.glob('./components/*.vue')

let StepInfo

const data = reactive({
  activity: {},
  examList: [],
  trainList: [],
  personal: {}
})
const { activity, examList, trainList, personal } = toRefs(data)

onMounted(() => {
  if (!userStore.checkAndLogin()) {
    return
  }

  if (!route.params.id) {
    return
  }

  const step = route.query.step || '1'
  active.value = (parseInt(step) - 1) || 0

  train.getTrainDetails(route.params.id).then((res) => {
    activity.value = res.data.activity
    examList.value = res.data.examVoList
    trainList.value = res.data.subjectTrainList

    if (activity.value.signNoticeAttachment) {
      activity.value.signNoticeAttachment = JSON.parse(activity.value.signNoticeAttachment)[0]
    }
  })

  train.getPersonalInfo().then((res) => {
    personal.value = res.data
  })
})

watch(active, (val) => {
  if (val !== -1) {
    StepInfo = defineAsyncComponent(modules[`./components/step${val + 1}.vue`])
  }
})

function next() {
  active.value++
  router.push({
    query: { step: active.value + 1 }
  })
}

function prev() {
  active.value--
  router.push({
    query: { step: active.value + 1 }
  })
}

function publish() {
  router.replace({
    name: 'trainList'
  })
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 0;
  background: #f5f7f9;
}

.panel{
  padding: 20px 100px;
}
.panel-box{
  border:1px solid #F5766A;
  padding:10px 20px;
}

.panel-footer .el-button--success {
  background: linear-gradient(270deg, #39dba7, #38ef7d);
  border: none;
  padding: 0 40px;
  font-size: 16px;
}

.signForm {
  .el-form-item__label {
    color: #4c5359;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.threeFour {
  width: 100%;
}

:deep(.el-upload--picture-card) {
  width: 120px;
  height: 160px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 120px;
  height: 160px;
}

.red {
  color: #f56c6c;
}

.train-h3{
  font-size: 16px;
  font-weight: 600;
  color: var(--el-color-primary);
  padding-left: 20px;
  border-left: 3px solid var(--el-color-primary) ;
 }


</style>