<template>
	<view class="box">
		<view class="box-title">
			<view class="title-left">是否住宿</view>
			<view class="title-right ">
				<radio-group name="radio" @change="radio">
					<label>
						<radio value="1" :checked="flag" />
						<text>是</text>
					</label>
					<label>
						<radio value="0" :checked="!flag" />
						<text>否</text>
					</label>
				</radio-group>
			</view>
		</view>

		<!-- 酒店信息 -->
		<view class="box-conter" v-if="flag">
			<checkbox-group @change="change">
				<view class="conter-conter" v-for="item in range" :key="item.id">
					<view class="bgcColor">
						<view class="conter-top">
							<view class="text">{{ item.name }}</view>
							<checkbox :value="item.hotelFlag" @click="checkedFN(item)" :disabled="disabled" />
						</view>
						<view class="box-dress">
							<uni-icons custom-prefix="iconfont" type="icon-31dingwei" color="#95A1A6"></uni-icons>
							{{ item.address }}
						</view>
						<view class="conter-text">
							<view class="conter-liner">
								<view class="liner-left">房型:</view>
								<view class="liner-right">{{ item.houseType }}</view>
							</view>

							<view class="conter-liner">
								<view class="liner-left">价格:</view>
								<view class="liner-right">{{ item.spend }}元</view>
							</view>

							<view class="conter-liner">
								<view class="liner-left">餐食:</view>
								<view class="liner-right">{{ item.haveDinner == 1 ? '含早' : '不含早参' }}</view>
							</view>

							<view class="conter-liner">
								<view class="liner-left">入住时间:</view>
								<view class="liner-right liner-move">
									<view class="liner-right-hotl" v-for="val in item.move" :key="val.id">
										<uni-datetime-picker
											:start="val.moveIntoTime"
											:end="val.leaveTime"
											type="daterange"
											v-model="val.move"
											return-type="yyyy/MM/dd"
											@change="maskClick(val)"
										/>
										<uni-icons
											class="liner-del"
											@click="delHot(item, val)"
											v-if="item.move.length > 1"
											custom-prefix="custom-icon"
											type="trash"
											size="20"
										/>
									</view>
									<uni-icons
										@click="addHot(item)"
										custom-prefix="custom-icon"
										type="plusempty"
										size="20"
									/>
								</view>
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
			<view class="remark" v-if="hotelList">
				<view class="liner-left">备注:</view>
				<input class="uni-input" v-model="remark" placeholder="请输入你的内容" />
			</view>
		</view>
		<view class="foot ">
			<view class="button1" @click="upFN">上一步</view>
			<view class="button" @click="nextFN">下一步</view>
		</view>
	</view>
</template>

<script setup>
import * as train from '@/common/train.js';
import {
	onLoad,
	onReady,
	onShareAppMessage,
	onShareTimeline,
	onPullDownRefresh,
	onReachBottom,
	onShow
} from '@dcloudio/uni-app';
import { ref, getCurrentInstance, reactive, watch, toRefs } from 'vue';

const emit = defineEmits(['nextFN']);
const props = defineProps({
	projectIdsArray: {},
	id: {},
	signId: {},
	examIdsArry: {}
});
const moveList = ref([
	{
		id: 1,
		move: null
	}
]);
const hotShow = ref(true);
const popup = ref();
const hotlList = ref();
const omve = ref();
const arr = ref([]);
const range = ref();
const id = ref(props.id);
const hotelIdsArray = ref();
const state = ref(); //是否住宿
const remark = ref();
const flag = ref(true);
const disabled = ref(false);
const costID = ref();
const code = ref();
const status = ref();
const signId = ref();
const data = reactive({
	addForm: {}
});
const { addForm } = toRefs(data);

onShow(() => {
	status.value = 3;
});
getList();
async function getList() {
	addForm.value.id = id.value;
	let res = await train.trainParticulars(addForm.value);
	status.value = res.data.signStatus;
	range.value = res.data.hotelList;
	range.value.forEach(item => {
		let tId = uuid();
		item.move = [
			{
				moveIntoTime: item.moveIntoTime.replace(/-/g, '/'),
				leaveTime: item.leaveTime.replace(/-/g, '/'),
				id: tId,
				hotlId: item.id,
				move: [item.moveIntoTime.replace(/-/g, '/'), item.leaveTime.replace(/-/g, '/')]
			}
		];
	});
	// 数据加工

	if (res.data.signId) signId.value = res.data.signId;
	console.log(range.value);
}

function uuid() {
	var s = [];
	var hexDigits = '0123456789abcdef';
	for (var i = 0; i < 36; i++) {
		s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
	}
	s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
	s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
	s[8] = s[13] = s[18] = s[23] = '-';
	var uuid = s.join('');
	return uuid;
}

// 是否住宿
function changeRadio(e) {
	console.log(e);
	if (e.target.value == 0) {
		hotShow.value = false;
	} else {
		hotShow.value = true;
	}
}

// 获取用酒店信息
function change(e) {
	hotelIdsArray.value = e.target;
}

// 封装数据处理
function changeKey(arr) {
	let newArr = [];
	arr.forEach(item => {
		newArr.push({
			text: item.moveIntoTimeStr,
			value: item.id
		});
	});
	return newArr;
}

// 下一步
async function nextFN() {
	await initData();
}

// 上一步
function upFN() {
	console.log(111);
	emit('nextFN', 1);
}

// 是否住宿
function radio(e) {
	console.log(e);
	e.target.value == 1 ? (flag.value = true) : (flag.value = false);
	console.log(flag.value);
}

// 页面跳转
async function goRenew() {
	let path = `/pages/train/costBreakdown/costBreakdown?id=` + id.value;
	await wx.navigateTo({
		url: path
	});
}

function checkedFN(item) {
	item.hotelFlag = !item.hotelFlag;
}

// 日期确定时处发
// function maskClick(item) {
// 	item.move.forEach(val => {
// 		val = val.replace(/-/g, '/');
// 	});
// 	console.log(item.move);
// 	console.log(item);
// }

// 添加住宿
function addHot(item) {
	let tId = uuid;
	item.move.push({
		moveIntoTime: item.moveIntoTime.replace(/-/g, '/'),
		leaveTime: item.leaveTime.replace(/-/g, '/'),
		id: tId,
		move: [item.moveIntoTime.replace(/-/g, '/'), item.leaveTime.replace(/-/g, '/')],
		hotlId: item.id
	});
}

function delHot(item, val) {
	item.move = item.move.filter(obj => {
		return obj.id != val.id;
	});
}

// 提交
async function initData() {
	let list = null;
	list = JSON.parse(JSON.stringify(range.value));
	// 1.过滤没有选中的酒店
	list = list.filter(item => {
		return item.hotelFlag == true;
	});
	// 2.过滤没有选择日期的
	let arr = [];
	list.forEach((item, index) => {
		arr[index] = item;
		arr[index].move = item.move.filter(val => {
			return val.move.length != 0;
		});
	});

	// 3.过滤酒店日期相同
	let arr1 = [];
	arr.forEach((item, index) => {
		item.move.forEach(val => {
			arr1.push(val);
		});
	});
	let arr2 = [];
	arr1.forEach(item => {
		item.move = item.move.join();
		arr2.push({
			hotlId: item.hotlId,
			move: item.move
		});
	});
	// // 去重
	// for (var i = 0; i < arr2.length - 1; i++) {
	// 	for (var j = i + 1; j < arr2.length; j++) {
	// 		if (arr2[i].move == arr2[j].move) {
	// 			arr2.splice(j, 1);
	// 			j--;
	// 		}
	// 	}
	// }

	if (flag.value) {
		if (arr2.length == 0) {
			uni.showToast({
				title: '请选择入住酒店!',
				duration: 2000,
				icon: 'error'
			});
			return false;
		}
		addForm.value.hotelIdsArray = arr2;
	} else {
		addForm.value.hotelIdsArray = [];
	}
	addForm.value.projectIdsArray = props.projectIdsArray;
	addForm.value.examIdsArray = props.examIdsArry;
	addForm.value.trainId = id.value;
	addForm.value.remark = remark.value;
	let res = null;
	// if (status.value == null || status.value == 4) {
	// 添加
	// addForm.value.id = null
	addForm.value.id = signId.value;
	res = await train.trainNext(addForm.value);
	signId.value = res.data;
	// } else {
	// 	// 修改
	// 	addForm.value.id = signId.value
	// 	res = await train.trainUpdata(addForm.value);
	// }
	costID.value = res.data;
	// 报名成功才跳转
	if (res.code == 200) {
		// 酒店是否已住满

		goRenew();
	}
}
</script>

<style scoped lang="scss">
.box {
	margin-top: 5rpx;
	padding: 25rpx;

	.bgcColor {
		background-color: #fff;
		border-radius: 15rpx;
		padding: 25rpx;
	}

	.box-title {
		padding: 25rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.title-left {
		text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}

	.box-conter {
		padding: 25rpx 0;
		display: block;

		.conter-conter {
			margin-bottom: 20rpx;

			.conter-top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;

				.text {
					font-size: 33rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2b3133;
				}

				.checkbox {
				}
			}

			.box-dress {
				font-family: PingFang SC;
				font-weight: 400;
				color: #2b3133;
				font-size: 24rpx;
				border-bottom: 1px solid #e6e6e6;
				padding-bottom: 32rpx;
			}

			.conter-text {
				.conter-liner {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					padding: 0 10rpx;

					.liner-left {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #7b7f83;
						padding-top: 10rpx;
					}

					.liner-right {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #2b3133;
						width: 80%;
						text-align: right;
					}
				}
			}
		}
	}

	.remark {
		margin-top: 35rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 120rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 10rpx 25rpx;

		.liner-left {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #7b7f83;
			padding-top: 18rpx;
		}
	}

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

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

	.select {
		width: 300rpx;
	}
}

.uni-date {
	flex: 0;
	width: 65%;
}

.popup-center {
	display: flex;
	justify-content: space-between;
}

.popup-title {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #e6e6e6;
	padding: 30rpx 50rpx;
}

.popup-title-left {
	font-size: 30rpx;
	font-weight: 400;
	color: 000;
	font-family: PingFangSC-Medium;
}

.popup-body {
	border-bottom: 1px solid #e6e6e6;
	padding: 15rpx 50rpx;
	color: #4c5359;
	font-size: 30rpx;
}

.popup-box {
	height: 500rpx;
	overflow-y: scroll;
}

.liner-right-hotl {
	display: flex;
}

.liner-del {
	margin-top: 19rpx;
}
</style>