<template>
	<view class=" conter-box">
		<view class="box" v-if="props.trainProjectsList.length != 0">
			<view class="text">培训科目</view>
			<view class="box2">
				<checkbox-group>
					<view class="box-check" v-for="item in props.trainProjectsList" :key="item.id">
						<view class="">
							<view class="title">{{ item.projectName }}</view>
							<view class="content">
								{{ item.isNecessary == 1 ? '必选' : '非必选' }}&nbsp;&nbsp;合计：
								<view class="span">{{ item.cost }}元</view>
							</view>
						</view>
						<view class="checkbox">
							<checkbox
								:disabled="item.isNecessary == 1"
								:value="item.id"
								@click="checkTrain(item)"
								:checked="item.check"
							/>
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>
		<view class="box" v-if="props.examProjectsList.length != 0">
			<view class="text">考试科目</view>
			<view class="box2">
				<checkbox-group>
					<view class="box-check" v-for="item in props.examProjectsList" :key="item.id">
						<view class="">
							<view class="title">{{ item.projectName }}</view>
							<view class="content">
								{{ item.isNecessary == 1 ? '必选' : '非必选' }}&nbsp;&nbsp;合计：
								<view class="span">{{ item.cost }}元</view>
							</view>
						</view>
						<view class="checkbox">
							<checkbox
								:disabled="item.isNecessary == 1"
								:value="item.id"
								@click="checkTrain(item)"
								:checked="item.check"
							/>
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>
	</view>
	<view class="foot">
		<view class="button1" @click="upFN">上一步</view>
		<view class="button" @click="nextFN">下一步</view>
	</view>
	<view class="nodata " v-if="props.examProjectsList.length == 0 && props.trainProjectsList.length == 0">
		没有培训科目
	</view>
</template>

<script setup>
import { forEach } from 'lodash';
import { ref, getCurrentInstance, reactive, toRefs } from 'vue';
const props = defineProps({
	trainProjectsList: {},
	examProjectsList: {},
	hotelList: {},
	id: {}
});
const data = reactive({
	projectIdsArray: []
});

const examIdsArry = ref([]);
const { projectIdsArray } = toRefs(data);
const emit = defineEmits(['nextFN']);
const checkbox1 = ref([0]);

function checkTrain(item) {
	if (item.isNecessary == 1) {
		item.check = true;
	} else {
		item.check = !item.check;
	}
}

// 上一步
function upFN() {
	emit('nextFN', 0);
}

// 下一步
function nextFN() {
	let falg = true;
	let arr1 = [];
	let arr2 = [];
	props.examProjectsList.forEach(item => {
		if (item.check) {
			arr1.push(item.id);
		}
	});
	props.trainProjectsList.forEach(item => {
		if (item.check) {
			arr2.push(item.id);
		}
	});
	let examList = JSON.parse(JSON.stringify(props.examProjectsList));
	let trainList = JSON.parse(JSON.stringify(props.trainProjectsList));
	examList.concat(trainList).forEach(item => {
		if (item.isNecessary == 1 && item.check == false) {
			falg = false;
		}
	});

	if (falg) {
		examIdsArry.value = arr1;
		projectIdsArray.value = arr2;
		if (props.hotelList.length == 0) {
			// 没有酒店直接报名
			// 页面跳转
			let path = `/pages/train/costBreakdown/costBreakdown?id=` + props.id;
			wx.navigateTo({
				url: path
			});
		} else {
			emit('nextFN', 2, projectIdsArray.value, examIdsArry.value);
		}
	} else {
		uni.showToast({
			title: '请选择必选科目！',
			duration: 2000,
			icon: 'error'
		});
		return false;
	}
}
</script>

<style scoped lang="scss">
.nodata {
	background: url(/static/nodata.png) no-repeat;
	background-size: 100%;
	width: 100%;
	height: 835rpx;
	color: #aaa59f;
	font-size: 50rpx;
}

.conter-box {
	padding-bottom: 100rpx;
}

.box {
	padding: 34rpx 25rpx;
	background-color: #f4f6fa;
	padding-bottom: 0;

	.box2 {
		background-color: #fff;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}

	.text {
		height: 29px;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 62rpx;
	}

	.box-check {
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e6e6e6;
		padding-bottom: 20rpx;

		:deep(.checkbox__inner) {
			background-color: #d9d9d9 !important;
			border-color: #d9d9d9 !important;
			border-radius: 50% !important;
			width: 45rpx !important;
			height: 45rpx !important;
			line-height: 40rpx;
		}

		.text {
			font-size: 12px;
			color: #666;
			margin-top: 5px;
		}

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #2b3133;
			margin-bottom: 10rpx;
		}

		.content {
			display: flex;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #2b3133;

			.span {
				color: #ff8124;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
		}
	}

	:deep(.checkbox__inner-icon) {
		position: absolute !important;
		top: 4px !important;
		left: 7px !important;
		color: #000 !important;
	}

	:deep(.uni-data-checklist .checklist-group .checklist-box) {
		margin-right: 0;
	}
}

.conter-button {
	position: absolute;
	left: 0;
	bottom: 10rpx;
	width: 100%;
	display: flex;
	justify-content: center;

	.button {
		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;
	}
}

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

	.button {
		margin: 0 auto;
		height: 80rpx;
		width: 300rpx;
		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;
	}

	.button1 {
		margin: 0 auto;
		height: 80rpx;
		width: 300rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 80rpx;
		background: #fff;
		border-radius: 40rpx;
		border: 1px solid #2ed981;
		color: #2ed981;
	}
}
</style>