<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"/>
		</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>