<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">
							<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">
							<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 class="Ielts">IELTS 18</view>
							<view style="background-color: #fff; padding: 32rpx 40rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2">
										<template v-slot:content>
											<view>
												<view style="display: flex;">
																		
													<view class="Test">Test 2</view>
																		
													<view class="greener">听力</view>
																		
												</view>
												<view class="u-order-desc">
													<text>Part 1：多选题</text>
												</view>
											</view>
										</template>
									</u-time-line-item>
								<u-time-line-item nodeTop="2">
									<template v-slot:content>
										<view>
											<view style="display: flex;">
																	
												<view class="Test">Test 2</view>
																	
												<view class="greener">听力</view>
																	
											</view>
											<view class="u-order-desc">
												<text>Part 1：多选题</text>
											</view>
										</view>
									</template>
								</u-time-line-item>
								<u-time-line-item nodeTop="2">
									<template v-slot:content>
										<view>
											<view style="display: flex;">
																	
												<view class="Test">Test 2</view>
																	
												<view class="greener">听力</view>
																	
											</view>
											<view class="u-order-desc">
												<text>Part 1：多选题</text>
											</view>
										</view>
									</template>
								</u-time-line-item>
								</u-time-line>
							</view>
						</view>
					</view>
					<view>
							<view class="Ielts">IELTS 18</view>
							<view style="background-color: #fff; padding: 32rpx 40rpx;">
								<view style="display: flex; align-items: center;">
										<view class="yuandi"></view>
										<view class="Test">Test 2</view>
										<view class="ellipses">听力</view>
								</view>
								<view class="u-order-desc">
									<text>Part 1：多选题</text>
								</view>
							</view>
					</view>
					<view>
						<view>
							<view class="Ielts">IELTS 18</view>
							<view style="background-color: #fff; padding: 32rpx 40rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2">
										<template v-slot:content>
											<view>
												<view style="display: flex;">
																		
													<view class="Test">Test 2</view>
																		
													<view class="erotic">听力</view>
																		
												</view>
												<view class="u-order-desc">
													<text>Part 1：多选题</text>
												</view>
											</view>
										</template>
									</u-time-line-item>
									<u-time-line-item nodeTop="2">
						
										<template v-slot:content>
						
											<view>
						
											<view style="display: flex;">
																	
												<view class="Test">Test 2</view>
																	
												<view class="erotic">听力</view>
																	
											</view>
						
												<view class="u-order-desc">
						
													<text>Part 1：多选题</text>
						
												</view>
						
											</view>
						
										</template>
						
									</u-time-line-item>
								</u-time-line>
							</view>
						</view>
					</view>
						<!--按钮 -->
					<view style="display: flex; justify-content: center; margin-top: 32rpx;">
							<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="form.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 value="" placeholder="输入你的描述... "placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;"/>
					</view>
			</view>	
	</view>
	
<!-- 按钮 -->
			<view class="view_footer" @click="submit">
				<view class="view_button" >确认添加 </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
				},
				show: false,
				radio: '',
				switchVal: false,
				classinfo:[],
				stuinfo:[],
				worktit:'',
				times:'',
				
			}
		},
		onLoad(option) {
			 uni.removeStorageSync('selectedClassInfo');
			  uni.removeStorageSync('selectedStuInfo');
			// 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');
		  console.log(selectedClassInfo,'selectedClassInfoselectedClassInfo');
		  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);
		  	
		  }
		},
		methods:{
			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){
				 this.times=`${e.year}-${e.month}-${e.day}`
			 },
			 submit() {
			 			
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 样式穿透
	::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 {
			padding: 20rpx;
			background: #F9F9F9;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 12rpx 0rpx;
			text {
				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{
			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>
