<template>
	<view class="concent">
		<view class="view_body">
			<u-navbar :is-back="true" title='添加作业' title-color="#000" :border-bottom="false" :background="bgc"
				id="navbar">
			</u-navbar>
			<view class="view_header">
				<view class="view_title">标题</view>
				<view class="view_input">
					<u-form-item prop="value">
						<u-input v-model="worktit" :type="type" :border="border" placeholder="输入作业标题" />
					</u-form-item>
				</view>
			</view>
			<!-- 班级安排 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">班级安排</view>
					<view class="view_tb" @click="addclass()">
						+
					</view>
				</view>
				<view class="noting" v-if="classinfo.length <= 0">
					<image src="https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H"></image>
					<view class="text1">
						暂未安排哦！
					</view>
					<view class="text2" @click="addclass()">
						去安排
					</view>
				</view>
				<view class="class_bj">

					<view class="class_images">
						<view class="class_ys" v-for="(item, index) in classinfo" :key="index"
							style="position: relative;">
							<view class="close"
								style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;"
								@click="delcls(item.id)">
								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE" mode="">
								</image>
							</view>
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode="">
								</image>
							</view>
							<view class="class_wz">{{ item.name }}</view>
						</view>


					</view>
				</view>
			</view>
			<!-- 学员安排 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">学员安排</view>
					<view class="view_tb" @click="toaddstu()">

						+
					</view>
				</view>
				<view class="noting" v-if="stuinfo.length <= 0">
					<image src="https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H"></image>
					<view class="text1">
						暂未安排哦！
					</view>
					<view class="text2" @click="toaddstu()">
						去安排
					</view>
				</view>
				<view class="class_bj">
					<view class="class_images">
						<view class="class_ys" v-for="(item, index) in stuinfo" :key="index"
							style="position: relative;">
							<view class="close"
								style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;"
								@click="delstu(item.id)">
								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE" mode="">
								</image>
							</view>
							<view class="class_tp">
								<image :src="item.avatar" mode=""></image>
							</view>
							<view class="class_wz">{{ item.name }}</view>
						</view>

					</view>


				</view>
			</view>
			<!-- 作业安排 -->
			<view>
				<view>
					<view>
						<view class="view_tubiao">
							<view class="view_title">作业安排</view>
						</view>

					</view>
					<view>
						<view v-for="(item,index) in selectreadlist" :key="index">
							<view class="Ielts">{{item.papername}}</view>
							<view
								style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2" v-for="(items,indexs) in item.message" :key="indexs">
										<template v-slot:content>
											<view>
												<view style="display: flex;flex-wrap: nowrap;">

													<view class="Test">{{items.testname}}</view>

													<view class="ellipses">阅读</view>


												</view>
												<view class="u-order-desc">
													<text>{{items.questionname}} {{items.typeName}}</text>
												</view>
											</view>
										</template>
									</u-time-line-item>

								</u-time-line>
							</view>
						</view>
					</view>
					<view>
						<view v-for="(item,index) in selectlistenlist" :key="index">
							<view class="Ielts">{{item.papername}}</view>
							<view
								style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2" v-for="(items,indexs) in item.message" :key="indexs">
										<template v-slot:content>
											<view>
												<view style="display: flex;flex-wrap: nowrap;">

													<view class="Test">{{items.testname}}</view>

													<view class="greener">听力</view>


												</view>
												<view class="u-order-desc">
													<text>{{items.questionname}} {{items.typeName}}</text>
												</view>
											</view>
										</template>
									</u-time-line-item>

								</u-time-line>
							</view>
						</view>
					</view>
					<view>
						<view v-for="(item,index) in selectwritelist" :key="index">
							<view class="Ielts">{{item.examName}}</view>
							<view
								style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2" v-for="(items,indexs) in item.message" :key="indexs">
										<template v-slot:content>
											<view>
												<view style="display: flex;flex-wrap: nowrap;">

													<view class="Test">{{items.test}}</view>

													<view class="ellipses"
														style="background: rgba(63,122,242,0.2);color: #3F7AF2;">写作
													</view>

												</view>
												<view class="u-order-desc">
													<text>{{items.task}}</text>
												</view>
											</view>
										</template>
									</u-time-line-item>

								</u-time-line>
							</view>
						</view>
					</view>
					<view>
						<view>
							<view class="Ielts"></view>
							<view
								style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2" v-for="(item, index) in selectspeak" :key="index">
										<template v-slot:content>
											<view>
												<view style="display: flex;flex-wrap: nowrap;">

													<view class="Test" style="width: 80%;">
														{{ item.part }}-{{ item.introduction }}
													</view>

													<view class="erotic">口语</view>

												</view>
												<view class="u-order-desc">
													<view style="display: inline;">
														<view class="txt">{{ item.topicEn }}:</view>
														<view v-for="(items, indexs) in item.speakingType" :key="indexs"
															class="type" style="display: inline;">
															<view v-if="items == 1">串题</view>
															<view v-else-if="items == 2">跟读</view>
															<view v-else-if="items == 3">模考</view>
														</view>
													</view>
												</view>
											</view>
										</template>
									</u-time-line-item>

								</u-time-line>
							</view>
						</view>
					</view>
					<!--按钮 -->
					<view style="display: flex; justify-content: center; margin-top: 32rpx;" @click="addwork()">
						<view class="increase">
							<u-icon name="plus"></u-icon>
							添加
						</view>
					</view>
				</view>

			</view>
			<!-- 截止时间 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">截止时间</view>
				</view>
				<view>
					<view class="view_form">
						<u-picker mode="time" v-model="show" :params="params" @confirm="printValue"></u-picker>
						<u-form-item prop="times">
							<u-input v-model="times" :type="type" :border="border" placeholder="选择作业截止的时间"
								@click="show = true" placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;" />
						</u-form-item>


					</view>
				</view>
			</view>
			<!-- 描述 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">描述</view>
				</view>
				<view class="view_textrea">
					<textarea v-model="classword" placeholder="输入你的描述... "
						placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;" />
				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="zhanwei" style="width: 100%;height: 230rpx;">

		</view>
		<view class="botbtn">
			<view class="btn" @click="addclassinfo()">
				确定添加
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F6F9FC",
				},
				// prick 时间选择框数据
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: false,
					second: false,
					timestamp: true
				},
				show: false,
				radio: '',
				switchVal: false,
				classinfo: [],
				stuinfo: [],
				worktit: '',
				times: '',
				time: 0,
				selectspeak: [],
				selectwrite: [],
				selectlisten: [],
				selectread: [],
				selectwritelist: [],
				selectlistenlist: [],
				selectreadlist: [],
				classword: 'aaa',
				mocktype:'0'

			}
		},
		onLoad(option) {
			uni.removeStorageSync('selectedClassInfo');
			uni.removeStorageSync('selectedStuInfo');
			uni.removeStorageSync('selectforwork');
			this.classinfo = JSON.parse(decodeURIComponent(option.classinfo))
			// let classinofs = [{
			// 	name: '阅读5班',
			// 	avatar: 'Excepteur',
			// 	id: 15,

			// }]
			this.classinfo = classinofs

		},
		onShow() {
			// Read selectedClassInfo data
			const selectedClassInfo = uni.getStorageSync('selectedClassInfo');

			if (selectedClassInfo && selectedClassInfo.length > 0) {
				this.classinfo = selectedClassInfo
				// Remove duplicates from this.classinfo
				//     this.classinfo = this.classinfo.filter(item => !selectedClassInfo.some(selectedItem => selectedItem.id === item.id));

				//     // Add non-duplicate items from selectedClassInfo to this.classinfo
				//     this.classinfo = this.classinfo.concat(selectedClassInfo);

			}
			const selectedstuInfo = uni.getStorageSync('selectedStuInfo');

			if (selectedstuInfo && selectedstuInfo.length > 0) {
				this.stuinfo = selectedstuInfo
				// Remove duplicates from this.classinfo
				// this.stuinfo = this.stuinfo.filter(item => !selectedstuInfo.some(selectedItem => selectedItem.id === item.id));

				// // Add non-duplicate items from selectedClassInfo to this.classinfo
				// this.stuinfo = this.stuinfo.concat(selectedstuInfo);

			}
			const selectforwork = uni.getStorageSync('selectforwork');
			console.log(selectforwork, 'selectedClassInfoselectedClassInfo');
			if (selectforwork) {
				this.selectspeak = selectforwork.selectspeak
				this.selectwrite = selectforwork.selectwrite
				this.selectlisten = selectforwork.selectlisten
				this.selectread = selectforwork.selectread
				this.mocktype= selectforwork.mocktype
				// this.selectwrite = selectforwork.selectwrite;
				//处理写作数据
				const groupedItems = {};

				this.selectwrite.forEach(item => {
					const examName = item.examName;

					if (!groupedItems[examName]) {
						groupedItems[examName] = {
							examName: examName,
							message: []
						};
					}

					groupedItems[examName].message.push({
						test: item.test,
						task: item.task,
						id: item.id
					});
				});


				this.selectwritelist = Object.values(groupedItems);
				//处理听力数据
				const groupedItems1 = {};

				this.selectlisten.forEach(item => {
					const papername = item.papername;

					if (!groupedItems1[papername]) {
						groupedItems1[papername] = {
							papername: papername,
							message: []
						};
					}

					groupedItems1[papername].message.push({
						id: item.id,
						paperId: item.paperId,
						// papername: paperTitle,
						partId: item.partId,
						testId: item.testId,
						testname: item.testname,
						typeName: item.typeName,
						questionname: item.questionname,
					});
				});

				// Convert groupedItems object to an array
				this.selectlistenlist = Object.values(groupedItems1);

				const groupedItems2 = {};

				this.selectread.forEach(item => {
					const papername = item.papername;

					if (!groupedItems2[papername]) {
						groupedItems2[papername] = {
							papername: papername,
							message: []
						};
					}

					groupedItems2[papername].message.push({
						id: item.id,
						paperId: item.paperId,
						// papername: paperTitle,
						partId: item.partId,
						testId: item.testId,
						testname: item.testname,
						typeName: item.typeName,
						questionname: item.questionname,
					});
				});

				// Convert groupedItems object to an array
				this.selectreadlist = Object.values(groupedItems2);

				console.log(this.selectread, 'this.selectread');
				console.log(this.selectlisten, 'this.selectlisten');
				// Remove duplicates from this.classinfo
				// this.stuinfo = this.stuinfo.filter(item => !selectedstuInfo.some(selectedItem => selectedItem.id === item.id));

				// // Add non-duplicate items from selectedClassInfo to this.classinfo
				// this.stuinfo = this.stuinfo.concat(selectedstuInfo);

			}

		},
		methods: {

			addwork() {
				const dataToSave = {
					selectspeak: this.selectspeak,
					selectwrite: this.selectwrite,
					selectlisten: this.selectlisten,
					selectread: this.selectread,
					mocktype:this.mocktype,
				};
				uni.navigateTo({
					url: "/pages_teacher/teacher_teachers/teacher_writeadd?dataToSave=" + encodeURIComponent(JSON
						.stringify(dataToSave))
				}).then(res => {

				}).catch(err => {

				});
			},
			delcls(id) {
				this.classinfo = this.classinfo.filter(item => item.id !== id);
			},
			delstu(id) {
				this.stuinfo = this.stuinfo.filter(item => item.id !== id);
			},
			toaddstu() {
				uni.navigateTo({
					url: "/pages_teacher/pages_add/add_studentsforwork?stuinfo=" + encodeURIComponent(JSON
						.stringify(this.stuinfo))

				}).then(res => {

				}).catch(err => {

				});
			},
			addclass() {
				uni.navigateTo({
					url: "/pages/Mystudent/addclassforwork?classinfo=" + encodeURIComponent(JSON.stringify(this
						.classinfo))
				}).then(res => {

				}).catch(err => {

				});
			},

			// 获取截止时间
			printValue(e) {
				// console.log(e,'timestamp: truetimestamp: true');
				this.times = `${e.year}-${e.month}-${e.day}-${e.hour}`;
				this.time = e.timestamp
			},
			addclassinfo() {
				let classIdSet = []; // 初始化一个数组，用于存储唯一的 class id
				let studentIdSet = []; // 初始化一个数组，用于存储唯一的 class id
				let workDetailsPageReqVOList = [];
				let des =this.classword
				let doneTime = this.times
				let name =this.worktit
				this.classinfo.forEach(item => {
					classIdSet.push(item.id); // 将 id 添加到数组中
				});
				

				this.stuinfo.forEach(item => {
					studentIdSet.push(item.id); // 将 id 添加到数组中
				});

				// 现在 classIdSet 包含了唯一的 class id
				// console.log(studentIdSet);
				// let classIdSet
				

				this.selectspeak.forEach(item => {
					workDetailsPageReqVOList.push({
						classify:'4',
						questionId: item.id,
						speakingType: item.speakingType.join(','), // 将数组转换为逗号分隔的字符串
						// 其他字段按需添加
					});
				});
				this.selectwrite.forEach(item => {
					workDetailsPageReqVOList.push({
						questionId: item.id,
						classify:'3'
						// speakingType: item.speakingType.join(','), // 将数组转换为逗号分隔的字符串
						// 其他字段按需添加
					});
				});
				this.selectlisten.forEach(item => {
					workDetailsPageReqVOList.push({
						moduleId: item.id,
						testId: item.testId,
						partId: item.partId,
						paperId: item.paperId,
						classify:'1'
						// speakingType: item.speakingType.join(','), // 将数组转换为逗号分隔的字符串
						// 其他字段按需添加
					});
				});
				this.selectread.forEach(item => {
					workDetailsPageReqVOList.push({
						moduleId: item.id,
						testId: item.testId,
						partId: item.partId,
						paperId: item.paperId,
						classify:'2'
						// speakingType: item.speakingType.join(','), // 将数组转换为逗号分隔的字符串
						// 其他字段按需添加
					});
				});
				// 现在 this.workDetailsPageReqVOList 包含了转换后的数据
				let data={
					mockType:this.mocktype,
					name:name,
					des:des,
					doneTime:doneTime,
					classIdSet:classIdSet,
					studentIdSet:studentIdSet,
					workDetailsPageReqVOList:workDetailsPageReqVOList
					
				}
				console.log(data,'datadata');
				this.$u.post(`https://api.admin-v2.langsi.online/admin-api/classroom/work-record/add`, data).then(res => {
					if (res.code === 0) {
						this.$refs.uToast.show({
							title: '添加成功',
							type: 'success',
							position:'top'
						})
						this.selectedIds=[]
						this.fuwei()
					}else{
						this.$refs.uToast.show({
							title: '添加失败',
							type: 'error',
							position:'top'
							
						})
						this.selectedIds=[]
						this.fuwei()
					}
				});
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.botbtn {
		padding: 32rpx 32rpx 0 32rpx;
		// margin-left: -32rpx;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202, 202, 202, 0.25);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		z-index: 999;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: 'PingFang', 'PingFang';
			font-weight: 800;
			color: #FFFFFF;
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
			border-radius: 104rpx 104rpx 104rpx 104rpx;
		}
	}

	// 样式穿透
	::v-deep .u-dot {
		background: #2D7CE6 !important;
	}

	.concent {
		width: 100vw;
		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
	}

	.view_body {
		width: 91.3%;
		margin: 0 auto;
	}

	.view_title {
		font-size: 28rpx;
		font-family: 'PingFang';
		font-weight: 800;
		color: #2E4975;
	}

	.view_input {
		line-height: 70rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 16rpx;
		padding: 0 24rpx;
	}

	.view_tubiao {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 46rpx;

		.view_tb {
			display: flex;
			padding-left: 24rpx;
			// align-items: center;
			// padding: 11rpx  24rpx 11rpx 24rpx;
			width: 120rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 26rpx 26rpx 26rpx 26rpx;

			border: 2rpx solid #F1F1F1;

			color: #F18F21;
			font-size: 30rpx;
		}
	}

	.noting {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		margin-top: 16rpx;
		width: 686rpx;
		height: 124rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		image {
			width: 58.19rpx;
			height: 60rpx;
		}

		.text1 {
			margin-left: 12rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #627698;
		}

		.text2 {
			margin-left: 12rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #2D7CE6;
			border-bottom: 2px solid #2D7CE6;
		}
	}

	.class_bj {
		margin-top: 16rpx;
	}

	.class_images {
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		// margin-top: 20rpx;
	}

	.class_tp {
		width: 56rpx;
		height: 56rpx;
		margin-right: 12rpx;
	}

	.Ielts {
		font-size: 40rpx;
		font-weight: 400;
		color: #2E4975;
		margin: 20rpx 0;
	}

	.class_ys:nth-child(3n) {
		margin-right: 0;
	}

	.class_ys {
		margin-top: 20rpx;
		margin-right: 20rpx;
		width: 215rpx;
		height: 96rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		// width: 215rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}


	.class_wz {
		width: 125rpx;
		font-size: 28rpx;
		font-family: 'PingFang';
		font-weight: 500;
		color: #072F5A;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.view_form {
		padding: 0rpx 32rpx;
		background: #FFFFFF;
		margin-top: 16rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.view_textrea {
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		;
		margin-top: 16rpx;
		padding: 28rpx 32rpx;
	}

	.view_button {
		width: 93.1%;
		margin: auto;
		text-align: center;
		line-height: 80rpx;
		background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
		border-radius: 104rpx 104rpx 104rpx 104rpx;
		color: #FFFFFF;
	}

	.view_footer {
		width: 100%;
		padding: 0 16rpx;
		height: 144rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 32rpx 0rpx;
		background-color: #fff;
		box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202, 202, 202, 0.25);
		margin-top: 8rpx;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-desc {
		display: block;
		// flex-wrap: nowrap;
		padding: 20rpx;
		background: #F9F9F9;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 12rpx 0rpx;

		.txt {

			font-size: 24rpx;
			font-weight: 500;
			color: #2E4975;
		}
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.yuandi {
		width: 18rpx;
		height: 18rpx;
		background: #2D7CE6;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.Test {
		font-size: 28rpx;
		font-weight: 800;
		color: #2E4975;
		margin-left: 12rpx;
	}

	.ellipses {
		font-size: 20rpx;
		background: rgba(242, 170, 2, 0.2);
		margin-left: 12rpx;
		padding: 8rpx 20rpx;
		color: #F2AA02;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.erotic {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 36rpx;
		font-size: 20rpx;
		background: rgba(242, 63, 170, 0.1);
		margin-left: 12rpx;
		// padding: 8rpx 20rpx;
		color: #F23FEB;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.greener {
		font-size: 20rpx;
		background: rgba(27, 225, 178, 0.1);
		margin-left: 12rpx;
		padding: 8rpx 20rpx;
		color: #1BE1B2;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.increase {
		padding: 26rpx 125rpx;
		color: #FFFFFF;
		background-color: #F39852;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
	}
</style>