<template>
	<view class="view_body">
		<u-navbar :is-back="true" title='班级详情' title-color="#2E4975" :border-bottom="false" :background="true" id="navbar">
		</u-navbar>
		<view class="view_botton" v-if="loading==false">
			<view class="view_spoken">
				<view>
					<image src="https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy" mode=""></image>
				</view>
				<view class="view_span">
					<text>{{classinfo.name}}</text>
					<!-- <view>基础班</view> -->
					<view  v-show="classinfo.classify == 1">
						听力
					</view>
					<view v-show="classinfo.classify == 2">
						阅读
					</view>
					<view  v-show="classinfo.classify == 3">
						写作
					</view>
					<view v-show="classinfo.classify == 4">
						口语
					</view>
				</view>
			</view>
			<view class="view_yellowBotton" @click="toaddwork()">
				安排作业
			</view>
		</view>
		<view class="view_zy" v-if="loading==false">


			<view class="view_left" @click="tostu()">
				<view class="veiw_left2">
					<view class="view_class">
						<text>班级成员</text>
						<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
					</view>
					<view class="view_images"  >
						<image :src="item.memberInfo.avatar" mode=""  v-for="(item,index ) in classinfo.members" :key="index" v-if="index<=4"></image>
						<view class="shenlue" v-if="classinfo.members.length>4">
							{{classinfo.members.length}}
						</view>
					</view>
				</view>
			</view>
			<view class="view_left" @click="toteacher()" >
				<view class="veiw_left2">
					<view class="view_class">
						<text>带班老师</text>
						<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
					</view>
					<view class="view_images"  >
						<image src="https://file.langsi.online/user/img/headimg.png" mode=""  v-for="(item,index ) in classinfo.teachers" :key="index" v-if="index<=4"></image>
						<view class="shenlue" v-if="classinfo.teachers.length>4">
							{{classinfo.teachers.length}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="view_operation">
			<view class="view_class"  >
				<text>作业安排</text>
				<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
			</view>
			<view class="view_no" v-if="workinfo.length<1" @click.stop="toaddwork()">
				暂未安排作业哦!<text class="organization">去安排</text>
			</view>
			<view class="view_show" v-if="workinfo.length>0" @click.stop="toworkdetail()">
				<view class="view_crossbar" v-for="(item,index) in operation" :key="index">
					<image :src="item.image" mode=""></image>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="view_footer">
			<view>
				<text>作业提交记录</text>
				<view class="view_icon">
					七天内<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="view_image">
				<view></view>
				<text class="text">暂无学习记录，快去安排作业吧！</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {

			return {
				isShow: true,
				bgc: {
					backgroundColor: "#F6F9FC",
				},
				operation:[
					{
						image:'https://file.langsi.online/yasiimg/web/static/ukPnTLkhCKU5zhbM7SMu',
						title:'课后作业'
					},
					{
						image:'https://file.langsi.online/yasiimg/web/static/udltPEywiuFFxqFMSFJE',
						title:'单科模考'
					},
					{
						image:'https://file.langsi.online/yasiimg/web/static/uT04VQSSNlabXp1bhXSG',
						title:'写作作业'
					},
					{
						image:'https://file.langsi.online/yasiimg/web/static/uBWxObS2WAFtu2BIIx9l',
						title:'五一作业'
					},
					{
						image:'https://file.langsi.online/yasiimg/web/static/uo08OdTA2zsojWQEap69',
						title:'更多'
					}
					
				],
				classid:0,
				classinfo:{},
				workinfo:{},
				loading:true
			}
		},
		onLoad(option) {
		this.classid=option.id
			// this.classid=15
			
		},
		onShow(){
			this.getclassinfo()
			this.getworkinfo()
		},
		methods:{
			toaddwork(){
				let classinofs=[
					{
						name:this.classinfo.name,
						avatar:this.classinfo.avatar,
						id:this.classinfo.id,
						
					}
				]
				uni.navigateTo({
				  url: "/pages_teacher/teacher_teachers/teacher_addOperation?classinfo=" + encodeURIComponent(JSON.stringify(classinofs))
				}).then(res => {
				 
				}).catch(err => { 
				
				});
			},
			toworkdetail(){
				let classinofs=this.classid
				console.log('跳转作业详情');
				uni.navigateTo({
				  url: "/pages/Mystudent/arrange_work?classId=" +classinofs
				}).then(res => {
				 
				}).catch(err => { 
				
				});
			},
			getclassinfo() {
				this.$u.get(`https://api.admin-v2.langsi.online/admin-api/classroom/detail?id=${this.classid}`).then(res => {
				
			
					if (res.code == 0) {
						this.classinfo=res.data
						// this.classlist = res.data.list
						// this.isloding = false
						this.loading=false
						
			
					}
				})
			},
			getworkinfo() {
				this.$u.get(`https://api.admin-v2.langsi.online/admin-api/classroom/work-record/list?classId=${this.classid}`).then(res => {
				
			
					if (res.code == 0) {
						this.workinfo=res.data
						// this.classlist = res.data.list
						// this.isloding = false
			
					}
				})
			},
			toteacher(){
				
				uni.navigateTo({
				  url: "/pages/Mystudent/Formteacher?id=" + this.classinfo.id
				}).then(res => {
				 
				}).catch(err => { 
				
				});
				
			},
			tostu(){
				
				uni.navigateTo({
				  url: "/pages/Mystudent/formstu?id=" + this.classinfo.id
				}).then(res => {
				 
				}).catch(err => { 
				
				});
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.view_body {
		height: 100vh;
		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
		padding: 0 32rpx;

		.view_botton {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 124rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 24rpx;

			.view_spoken {
				display: flex;
				align-items: center;

				.view_span {
					display: flex;
					flex-direction: column;
					margin-left: 16rpx;
				}

				.view_span text:nth-child(1) {
					height: 32rpx;
					font-size: 32rpx;
					font-family: 'PingFang';
					font-weight: bold;
					color: #072F5A;
					line-height: 32rpx;

				}

				.view_span view {
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					ling-height: 40rpx;
					background: #EBF3FF;
					margin-top: 10rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 20rpx;
					color: #2D7CE6;
					font-weight: 500;
				}
			}

			image {
				width: 76rpx;
				height: 76rpx;
			}
		}

		.view_zy {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;
		}

		.view_left {
			width: 333rpx;
			display: flex;
			justify-content: space-evenly;
			height: 160rpx;
			background: linear-gradient(174deg, #FFF2E4 10%, #FFFFFF 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			// padding: 60rpx;

		}
		.veiw_left2{
			width: 333rpx;
			padding: 24rpx;
		}

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

		.view_class text {
			width: 128rpx;
			font-size: 32rpx;
			font-family: 'PingFang';
			font-weight: 800;
			color: #2E4975;
		}

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

			image {
				margin-right: 16rpx;
				width: 36rpx;
				height: 36rpx;
				
			}
			.shenlue{
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFF2E4;
				border-radius: 50%;
				width: 36rpx;
				height: 36rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #F18F21;
				
			}
		}

		.view_operation {
			width: 686rpx;
			height: 196rpx;
			background: linear-gradient(170deg, #FFF2E4 0%, #FFFFFF 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 24rpx;
			text-align: center;

			.view_no {
				font-size: 28rpx;
				font-family: 'PingFang';
				font-weight: 500;
				color: #627698;
				margin: 40rpx 0rpx;
					
			}
			.view_no .organization{
				font-size: 28rpx;
				font-family: 'PingFang';
				font-weight: 500;
				color: #2D7CE6;
				border-bottom: 2px solid #2D7CE6;
				margin-left: 10rpx;
			}
				
			.view_show{
				display: flex;
				justify-content: space-between;
				margin: 25rpx 0rpx;
			}
			.view_crossbar{
				width: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20rpx;
				font-family: 'PingFang';
				font-weight: 500;
				color: #F39852;
				
				
			}
			 .view_crossbar image {
					width: 40rpx;
					height: 35rpx;
					margin-bottom: 12rpx;
			}
				
		}
		.view_footer view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0rpx;
			text {
				font-size: 32rpx;
				font-family: 'PingFang';
				font-weight: 800;
				color: #2E4975;
			}
		}
		.view_image{
			display:flex;
			flex-direction: column;
			width: 100%;
			height: 300rpx;
			view {
				width: 100%;
				height: 500rpx;
				background: url('https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H') no-repeat center;
				background-size: 30%;
			}
		
			
			
			.text {
				font-size: 24rpx;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				color: #0E3B77;
				margin-top: 10rpx;
			}
			
		}
		.view_icon{
			font-size: 24rpx;
			font-family: 'PingFang';
			font-weight: 500;
			color: rgba(7,47,90,0.6);
		}
		.view_yellowBotton{
				padding: 20rpx 50rpx;
				background: #F39852;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 24rpx;
				font-family: 'PingFang';
				font-weight: 800;
				color: #FFFFFF;
		}
	}
</style>
