<template>
	<page-meta>
		<view style="height: 100vh;background-color: #f5f5f5;">
			<van-cell-group title="基本信息" inset>
				<van-field v-model="msg.Title" placeholder="输入本次评价名称" label="评语标题" :border="false" @change="changeTitle"
				 input-align="right" />
				<van-cell title="参与学员" :value="showStusStr" is-link @click="showStus=StuList.length>0" />
			</van-cell-group>

			<van-cell-group title="生成参数" inset>
				<van-cell title="参考作业" :value="showWorkStr" is-link @click="showWorks=homeWorks.length>0" />
				<van-cell title="使用模板">
					<view slot="">
						<van-switch :checked="UseTemplate" @change="changeCreateMethod" active-color="#C91727" inactive-color="#282828"
						 size="24px" />
					</view>
				</van-cell>
				<van-cell title="选择模板" v-if="UseTemplate" :value="showTemplateStr" is-link @click="showTemplate=true" />

			</van-cell-group>
			<van-cell-group title="评语内容" inset v-if="!UseTemplate">
				<textarea placeholder="请填写评论内容" class="user-pingyu" v-model="msg.Info" maxlength="-1"></textarea>
			</van-cell-group>

			<view style="margin:32rpx;">
				<van-button type="danger" :loading="saveLoading" round block @click="saveHandler">立即生成</van-button>
			</view>

		</view>
		<van-popup :z-index="1000" :show="showStus" :round="true" position="bottom" custom-style="height: 70vh" @close="closepopup">
			<studentsPopu :courseStuList="StuList" @getdata="getChosenStus"></studentsPopu>
		</van-popup>
		<van-popup :z-index="1000" :show="showWorks" :close-on-click-overlay="false" :round="true" position="bottom"
		 custom-style="height: 70vh" @close="closepopupWork">
			<operation :dataList="homeWorks" @selected="selectedWorkHandler"></operation>
		</van-popup>
		<van-action-sheet :show="showTemplate" :actions="actions" @close="closeAction" @select="selectAction" description="选择使用的评语模板" />
	</page-meta>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";
	import studentsPopu from '@/components/setComments/studentsPopu'
	import operation from '@/components/setComments/operation'
	export default {
		props: {},
		components: {
			studentsPopu,
			operation
		},
		setup() {
			let {
				proxy
			} = getCurrentInstance();
			uni.setNavigationBarTitle({
				title: '手动创建评语'
			})
			let data = reactive({
				actions: [
					// {name:'第一次评论',type:1},
					// {name:'第二次评论',type:2},
					// {name:'第三次评论',type:3}
				],
				UseTemplate: true,
				msg: {
					Title: '',
					CourseId: 0, // 课程编号
					ChooseStuList: [], // 学员信息
					Info: '', //	评论类型=1时使用
					CommentType: 2, // 评论类型(1-自定义评价，2-模板评价)
					IsDefault: '', // 是否默认规则(评论类型=2时使用)
					CommentId: '', // 规则编号(评论类型=2时使用)
					StartHomeWorkId: '', // 开始作业编号
					HomeWorkId: '', // 结束作业编号	
					HomeWorkIds: [], // 所有的作业编号		
				},
				chosenStus: [],
				StuList: [],
				showStusStr: '全班',
				showWorkStr: '请选择',
				showStus: false,
				showWorks: false,
				homeWorks: [],
				chosenHomeWork: [],
				showTemplate: false,
				showTemplateStr: '请选择',
				saveLoading: false,
				CourseName: ''
			});
			let methods = {
				saveHandler() {
					if (data.saveLoading) return
					//验证数据
					if (!data.msg.CourseId) {
						uni.showToast({
							title: '课程编号不能为空',
							icon: 'none',
							duration: 1000
						})
						return;
					}
					if (!data.msg.Title) {
						uni.showToast({
							title: '请输入评价名称',
							icon: 'none',
							duration: 1000
						})
						return;
					}
					if (data.msg.ChooseStuList.length == 0) {
						uni.showToast({
							title: '请选择参与学员',
							icon: 'none',
							duration: 1000
						})
						return;
					}
					if (!data.msg.StartHomeWorkId || !data.msg.HomeWorkId || data.msg.HomeWorkIds.length == 0) {
						uni.showToast({
							title: '请选择参考作业',
							icon: 'none',
							duration: 1000
						})
						return;
					}
					if (data.msg.CommentType == 1) {
						data.msg.CommentId = 0
						data.msg.IsDefault = 0
						if (!data.msg.Info) {
							uni.showToast({
								title: '请输入评论内容',
								icon: 'none',
								duration: 1000
							})
							return;
						}
					} else {
						data.msg.Info = ''
						if (!data.msg.CommentId) {
							uni.showToast({
								title: '请选择评语模板',
								icon: 'none',
								duration: 1000
							})
							return;
						}
					}
					data.saveLoading = true
					uni.showLoading()
					//调用接口
					proxy.$request("/Teacher/BatchSetStuComment", data.msg).then(res => {
						if (res) {
							//状态性显示
							data.saveLoading = false
							uni.hideLoading()
							uni.showToast({
								title: '操作成功!',
								icon: 'none',
								duration: 500
							})
							// let url = '/pages/setComments/setComments?CourseId=' + data.CourseId;
							// uni.navigateTo({
							// 	url: url
							// })
							data.msg = {
								Title: '',
								CourseId: data.msg.CourseId, // 课程编号
								ChooseStuList: [], // 学员信息
								Info: '', //	评论类型=1时使用
								CommentType: 2, // 评论类型(1-自定义评价，2-模板评价)
								IsDefault: '', // 是否默认规则(评论类型=2时使用)
								CommentId: '', // 规则编号(评论类型=2时使用)
								StartHomeWorkId: '', // 开始作业编号
								HomeWorkId: '', // 结束作业编号	
								HomeWorkIds: [], // 所有的作业编号		
							}
						}
						uni.navigateBack({
							delta: 1
						});
					}).catch(error => {
						//状态性显示
						data.saveLoading = false
					})

				},
				// 获取模板数据
				GetCourseCommentList() {
					data.showTemplateList = true
					uni.showLoading()
					let msg = {
						CourseId: data.msg.CourseId,
						CourseName: data.CourseName,
					}
					proxy.$request("/Teacher/GetCourseCommentList", msg).then(res => {
						if (res) {
							let arr = []
							res.Data.forEach(item => {
								let dataContent = {
									name: `第${item.Times}次评论`,
									IsDefault: item.IsDefault,
									Id: item.Id
								}
								arr.push(dataContent)
							})
							data.actions = arr
						}
						uni.hideLoading()
					})
				},
				closeAction() {
					data.showTemplate = false
				},
				selectAction(e) {
					let x = e.detail
					data.msg.CommentId = x.Id
					data.msg.IsDefault = x.IsDefault
					data.showTemplateStr = x.name
				},
				changeTitle({
					detail
				}) {
					data.msg.Title = detail
				},
				closepopup() {
					data.showStus = false
				},
				closepopupWork() {
					data.showWorks = false
				},
				changeCreateMethod({
					detail
				}) {
					data.UseTemplate = detail
					if (data.UseTemplate) {
						data.msg.CommentType = 2
						that.GetCourseCommentList()
					} else {
						data.msg.CommentType = 1
						data.actions = []
					}
				},
				getChosenStus(array) {
					data.chosenStus = array
					if (data.chosenStus && data.chosenStus.length > 0) {
						if (data.chosenStus.length == data.StuList.length) {
							data.showStusStr = `全班（${data.StuList.length}人）`
						} else {
							let tempStr = ""
							data.chosenStus.forEach((x, i) => {
								if (i < 3) {
									tempStr = `${tempStr}、${x.StuName}`
								}
							})
							data.showStusStr = tempStr.substring(1, tempStr.length - 1)
							data.showStusStr += data.chosenStus.length > 3 ? `等${data.chosenStus.length}人` : ""
						}
					} else {
						data.showStusStr = '请选择'
					}
					data.msg.ChooseStuList = []
					array.forEach(x => {
						let dataContent = {
							StuId: x.StuId,
							StuName: x.StuName
						}
						data.msg.ChooseStuList.push(dataContent)
					})
					methods.closepopup()
				},
				getCourseStu() {
					uni.showLoading()
					let stuMsg = {
						courseId: data.msg.CourseId
					};
					proxy.$request("/Teacher/GetCourseStu", stuMsg).then(res => {
						if (res) {
							data.StuList = res.Data;
							data.showStusStr = data.StuList.length > 0 ? `全班（${data.StuList.length}人）` : '暂无可选学员'
							data.msg.ChooseStuList = []
							data.StuList.forEach(x => {
								let dataContent = {
									StuId: x.StuId,
									StuName: x.StuName
								}
								data.msg.ChooseStuList.push(dataContent)
							})
						}
						uni.hideLoading()
					})
				},
				getCourseHomeWorkList() {
					data.pageState = "loading";
					proxy.$request("/Teacher/GetCourseHomeWork", {
						'courseId': data.msg.CourseId
					}).then(res => {
						if (res) {
							res.Data.forEach(x => {
								x.checked = false
							})
							data.homeWorks = res.Data;
							data.showWorkStr = data.homeWorks.length > 0 ? `请选择` : '暂无可选作业'
						}
					})
				},
				selectedWorkHandler(arr) {
					data.chosenHomeWork = arr
					data.showWorkStr = data.chosenHomeWork.length > 0 ? `已选择${data.chosenHomeWork.length}个作业` : '请选择'
					data.homeWorks.forEach(x => {
						x.checked = arr.find(y => y.HomeWorkId == x.HomeWorkId) ? true : false
					})
					methods.closepopupWork()
					data.msg.HomeWorkIds = []
					if (data.chosenHomeWork.length > 0) {
						let i = data.chosenHomeWork.length - 1;
						data.msg.StartHomeWorkId = data.chosenHomeWork[i].HomeWorkId
						data.chosenHomeWork && data.chosenHomeWork.forEach((item, index) => {
							if (index === 0) {
								data.msg.HomeWorkId = item.HomeWorkId
							}
							data.msg.HomeWorkIds.push(item.HomeWorkId)
						})
					}
				}
			};

			let that = methods
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(option) {
			this.msg.CourseId = option.courseId;
			this.CourseName = option.courseName;
			this.getCourseStu()
			this.getCourseHomeWorkList()
			if (this.UseTemplate) {
				this.GetCourseCommentList()
			}
		},
		onShow() {

		}

	};
</script>
<style scoped>
	.user-pingyu {
		width: 100%;
		font-size: 30rpx;
		font-weight: 400;
		color: #282828;
		background: #FFF;
		padding: 20rpx;
		line-height: 48rpx;
	}
</style>
