<template>
	<!-- 报名 -->
	<view class="box">
		<view class="box1" v-if="reactvt == 0">
			<view class="header"><image class="image" mode="aspectFit" :src="userList.picUrl"></image></view>
			<view class="body">
				<view class="liner">
					<view class="liner-left">姓名</view>
					<view class="liner-right">{{ userList.realName }}</view>
				</view>
				<view class="liner">
					<view class="liner-left">性别</view>
					<view class="liner-right">{{ userList.sex }}</view>
				</view>
				<view class="liner">
					<view class="liner-left">出生日期</view>
					<view class="liner-right">{{ birthday }}</view>
				</view>
				<view class="liner">
					<view class="liner-left">证件类型</view>
					<view class="liner-right">{{ userList.identify }}</view>
				</view>
				<view class="liner">
					<view class="liner-left">证件号</view>
					<view class="liner-right">{{ userList.identifyCode }}</view>
				</view>
				<view class="liner">
					<view class="liner-left">联系方式</view>
					<view class="liner-right">{{ userList.phone }}</view>
				</view>
			</view>
			<view class="foot "><view class="button" @click="nextFN(1)">下一步</view></view>
		</view>

		<trainApply2
			v-show="reactvt == 1"
			:hotelList="hotelList"
			:examProjectsList="examProjectsList"
			:trainProjectsList="trainProjectsList"
			@nextFN="nextFN"
			:id="id"
		/>
		<trainApply3
			v-if="reactvt == 2"
			:signId="signId"
			:id="id"
			:hotelList="hotelList"
			:projectIdsArray="projectIdsArray"
			:examIdsArry="examIdsArry"
			@nextFN="nextFN"
		/>
	</view>
</template>

<script setup>
import trainApply2 from '@/components/train/train-apply/train-apply.vue';
import trainApply3 from '@/components/train/train-apply-three/train-apply-three.vue';
import { onLoad, onReady, onShareAppMessage, onShareTimeline, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref, getCurrentInstance, reactive, toRefs } from 'vue';
import * as train from '@/common/train.js';
const reactvt = ref(0);
const id = ref();
const trainProjectsList = ref([]);
const examProjectsList = ref([]);
const hotelList = ref();
const birthday = ref();
const projectIdsArray = ref();
const examIdsArry = ref();
const signId = ref();
const data = reactive({
	addForm: {},
	userList: {}
});
const { addForm, userList } = toRefs(data);
onLoad(option => {
	const arr = option.data.split(',');
	id.value = arr[0];
	initData();
});
// 获取详情数据
async function initData() {
	addForm.value.id = id.value;
	let res = await train.trainParticulars(addForm.value);
	signId.value = res.data.signId;
	res.data.examProjectsList.forEach(item => {
		if (item.isNecessary == 1) {
			item.check = true;
		} else {
			item.check = false;
		}
		examProjectsList.value.push(item);
	});

	res.data.trainProjectsList.forEach(item => {
		if (item.isNecessary == 1) {
			item.check = true;
		} else {
			item.check = false;
		}
		trainProjectsList.value.push(item);
	});

	hotelList.value = res.data.hotelList;
	userList.value = res.data.userList[0];
	birthday.value = userList.value.birth.slice(0, 10);
}

// 下一步
const nextFN = (e, val, arr) => {
	reactvt.value = e;
	projectIdsArray.value = val;
	examIdsArry.value = arr;
};
</script>

<style scoped lang="scss">
.box {
	position: relative;
	min-height: 1442rpx;
}

.box1 {
	background-color: #fff;
	padding: 30rpx;
}

.header {
	text-align: center;
	margin-bottom: 30rpx;

	.image {
		border-radius: 15rpx;
		width: 230rpx;
		height: 280rpx;
		background-color: #eeeeee;
	}
}

.body {
	.liner {
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #e6e6e6;
		height: 100rpx;
		line-height: 100rpx;
	}

	.liner-left {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4c5359;
	}

	.liner-right {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}
}

.foot {
	background-color: #ffffff;
	padding: 20rpx 0;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;

	.button {
		margin: 0 auto;
		height: 80rpx;
		width: 500rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 80rpx;
		background: linear-gradient(270deg, #54e1b9, #00caa6);
		border-radius: 40rpx;
	}
}
</style>