<template>
  <view class="pd20">
    <uni-steps :options="steps" active-icon="checkmarkempty" :active="active" />
  </view>
  <view class="hasfixedbottom">
    <view class="wpage">
      <step1 v-show="active==0" @prev="prev" @next="next" :activity="activity" />
      <step2 v-show="active==1" @prev="prev" @next="next" :personal="personal" />
      <step3 v-show="active==2" @prev="prev" @next="next" :activity="activity" :trainId="trainId"
             :active="active" />
      <step4 v-show="active==3" @prev="prev" @publish="publish" :personal="personal" :activity="activity"
             :exam-list="examList" :train-list="trainList"  :trainId="trainId" :active="active"/>
    </view>
  </view>

</template>

<script setup>
import {
  onLoad
} from '@dcloudio/uni-app'
import {
  ref,
  reactive,
  toRefs
} from 'vue'
import * as train from '@/training/train.js'
import step1 from '@/training/components/step1'
import step2 from '@/training/components/step2'
import step3 from '@/training/components/step3'
import step4 from '@/training/components/step4'
const active = ref(0)

const steps = ref([{
  title: '报名须知'
}, {
  title: '个人信息完善'
}, {
  title: '培训信息完善'
}, {
  title: '培训考试选择'
}])

const data = reactive({
  activity: {},
  examList: [],
  trainList: [],
  personal: {},
  trainId: ''
})
const {
  activity,
  examList,
  trainList,
  personal,
  trainId
} = toRefs(data)
onLoad(options => {
  active.value = options.step || 0
  trainId.value = options.id
  train.getTrainDetail(trainId.value).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 || {}
  })
})

function next() {
  active.value++
}

function prev() {
  active.value--
}

function publish() {
  uni.redirectTo({
    url: `/training/trainList`
  });
}
</script>

<style scoped lang="scss">
	.pd20 {
		padding: 30rpx 0 0;
	}

	.wpage {
		background-color: #fff;
		width: 700rpx;
		margin: 30rpx auto;
		border-radius: 5rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>