<template>
	<view class="addComment-index-box flex" style="background-color: #F6F6F6;flex-direction: column;padding-bottom: 168rpx;">
		<navbar class="navbarSticky" bg="#F6F6F6">
			<view class="addComment-header-box flex">
				<van-icon class="addComment-header-left" name="arrow-left" @click="back" />
				<text class="addComment-header-title">新增评论</text>
			</view>
		</navbar>
		<view class="addComment-content" style="background-color: #F6F6F6;">
			<view class="addComment-title flex">
				<van-icon name="friends-o" />
				<text>
					选择学员 ({{postMsg.ChooseStuList?postMsg.ChooseStuList.length:0}})
				</text>
			</view>
			<view class="addComment-img-box flex" :style="{'height':(expendStatus?'unset':'178rpx'),'overflow':(expendStatus?'unset':'hidden')}">
				<view class="addComment-img-list activeOne flex" @click="selectStudents">
					<view class="addComment-imgbox flex">
						<view class="addComment-img">
							<view>
								<van-icon name="plus" />
							</view>
						</view>
					</view>
					<text class="addComment-text">添加学员</text>
				</view>
				<template v-for="(item,index) in postMsg.ChooseStuList">
					<view class="addComment-img-list flex">
						<view class="addComment-imgbox flex">
							<view class="addComment-img">
								<view>
									<van-image width="119rpx" height="119rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653894197000_691.png" />
								</view>
							</view>
						</view>
						<text class="addComment-text">{{item.StuName}}</text>
					</view>
				</template>

			</view>
			<view class="addComment-textarea-box">
				<view class="hotsopt" @click="expendStatus=!expendStatus"></view>
				<view class="content-textarea-box">
					<textarea placeholder="请填写评论内容" v-model="postMsg.Info"></textarea>
				</view>
			</view>
			<van-popup :z-index="1000" :show="show" :round="true" position="bottom" custom-style="height: 70vh" @close="closepopup">
				<studentsPopu ref="getstudentsPopup" :courseStuList="StuList" @getdata="getChooseStu" v-if="show"></studentsPopu>
			</van-popup>
		</view>
		<view class="footer" v-if="!show">
			<view class="studentsPopu-save flex">
				<view v-if="clickShow" @click="clickSure">确定</view>
				<view v-else class="active">确定</view>
			</view>
		</view>
		<!-- <view class="addComment-bj"></view> -->
	</view>
</template>
<script>
	import studentsPopu from '@/components/setComments/studentsPopu'
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject,
		nextTick
	} from "vue";
	import navbar from '../../components/navbar.vue'
	export default {
		props: {

		},
		components: {
			navbar,
			studentsPopu
		},
		setup() {
			let {
				refs
			} = getCurrentInstance();
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				value: 1,
				checked: '1',
				Msg: {
					CourseId: '',
					CommentTimes: 0, //评论次数
				},
				postMsg: {
					CourseId: '',
					ChooseStuList: [],
					Times: 0,
					Info: "", //评论内容
				},
				StuList: [], //课程学员列表
				clickShow: true,
				show: false,
				expendStatus:false
			});
			let methods = {
				back() {
					uni.navigateBack({
						delta: 1
					})
				},
				// 点击弹出学员列表
				selectStudents() {
					data.show = true
				},
				closepopup(){
					data.show=false
				},
				// 点击确定
				clickSure() {
					uni.showLoading()
					data.clickShow = false;
					data.postMsg.Times = data.Msg.CommentTimes;
					data.postMsg.CourseId = data.Msg.CourseId;
					proxy.$request("/Teacher/BatchSetStuComment", data.postMsg).then(res => {
						if (res.Code == 1) {
							uni.showToast({
								title: '评语保存成功!',
								icon: 'none',
								duration: 500
							})
							uni.navigateBack({
								delta:1
							})
						}else{
							uni.showToast({
								title: '评语保存失败，请重试',
								icon: 'none',
								duration: 500
							})
						}
						uni.hideLoading()
					})
				},

				//课程学员列表
				getChooseStu(array) {
					if (array) {
						data.postMsg.ChooseStuList = array
					}
					data.show=false
				},
				//根据课程编号获取课程学员
				getCourseStu() {
					uni.showLoading()
					let stuMsg = {
						courseId: data.Msg.CourseId
					};
					proxy.$request("/Teacher/GetCourseStu", stuMsg).then(res => {
						console.log("res", res);
						if (res) {
							data.StuList = res.Data;
						}
						uni.hideLoading()
					})
				},
			};
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(option) {
			this.Msg.CourseId = option.CourseId;
			this.Msg.CommentTimes = option.CommentTimes;
			
		},
		onShow() {
			this.getCourseStu();
		}

	};
</script>
<style scoped>
	.Sure-button view.active {
		background-color: #F6F6F6;
		color: #C91727;
	}

	.Sure-button view {
		width: 359rpx;
		line-height: 88rpx;
		background-color: #C91727;
		border-radius: 44rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 1rpx;
	}

	.Sure-button {
		justify-content: center;
		margin-top: 67rpx;
	}

	.content-textarea-box textarea {
		width: 100%;
	}

	.content-textarea-box {
		background: #F6F6F6;
		border-radius: 30rpx;
		padding: 33rpx 37rpx;
		min-height: 720rpx;
	}

	.addComment-textarea-box {
		border-radius: 50rpx 50rpx 0 0;
		/* background: #FFFFFF; */
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1654049334000_485.png') no-repeat top 0 center #FFFFFF;
		background-size: 141rpx 41rpx;
		padding: 84rpx 50rpx 37rpx 50rpx;
		position: relative;
	}
	
	.addComment-textarea-box .hotsopt{
		width: 141rpx;
		height: 41rpx;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -70rpx;
		z-index: 2;
	}

	.addComment-text {
		text-align: center;
		font-weight: 500;
		font-size: 26rpx;
		color: #282828;
		letter-spacing: 1rpx;
		margin-top: 15rpx;
	}

	.addComment-img-list.activeOne .addComment-img view {
		text-align: center;
		line-height: 123rpx;
		color: #DCDCDC;
		font-weight: bold;
		font-size: 50rpx;
	}

	.addComment-img view {
		width: 119rpx;
		height: 119rpx;
		border: 1rpx solid #DBDBDB;
		border-radius: 50%;
		margin: 5rpx;
		overflow: hidden;
	}

	.addComment-img {
		width: 130rpx;
		height: 130rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}

	.addComment-imgbox {
		justify-content: center;
	}

	.addComment-img-list {
		flex: 0 0 25%;
		flex-direction: column;
	}

	.addComment-img-box {
		padding: 0 20rpx;
		flex-wrap: wrap;
		margin-bottom: 50rpx;
	}

	.addComment-title van-icon {
		font-size: 38rpx;
		margin-right: 20rpx;
	}

	.addComment-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #282828;
		letter-spacing: 1rpx;
		padding: 54rpx 50rpx 42rpx 50rpx;
	}

	.addComment-header-box {
		padding: 20rpx 42rpx;
		flex-direction: row;
		align-items: center;
	}

	.addComment-header-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #282828;
		flex: 1;
		text-align: center;
		padding-right: 40rpx;
	}

	.addComment-header-left {
		font-size: 40rpx;
		position: relative;
		z-index: 3;
	}

	.addComment-content {
		position: relative;
		z-index: 1;
	}

	.addComment-bj {
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 0;
		background: #F6F6F6;
	}

	.navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}
	.studentsPopu-save view {
		background: #C91727;
		font-size: 30rpx;
		font-weight: bold;
		letter-spacing: 1rpx;
		width: 260rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		text-align: center;
		color: #FFFFFF;
	}
	
	.studentsPopu-save {
		justify-content: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		background-color: #FFF;
	}
</style>
