<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="msg.UseTemplate" @change="changeCreateMethod" active-color="#C91727" inactive-color="#282828" size="24px" />
				</view>
			  </van-cell>
			  <van-cell title="选择模板" v-if="msg.UseTemplate" :value="showTemplateStr" is-link @click="showTemplate=true" />
			  
			</van-cell-group>
			<van-cell-group title="评语内容" inset v-if="!msg.UseTemplate">
				<textarea placeholder="请填写评论内容" class="user-pingyu" v-model="msg.Info"></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}],
				msg:{
					Title:'',
					StuId:'',
					CourseId:0,
					UseTemplate:true,
					TemplateId:0,
					Info:''
				},
				chosenStus:[],
				StuList:[],
				showStusStr:'全班',
				showWorkStr:'请选择',
				showStus:false,
				showWorks:false,
				homeWorks:[],
				chosenHomeWork:[],
				showTemplate:false,
				showTemplateStr:'请选择',
				saveLoading:false
				
			});
			let methods = {
				saveHandler(){
					if(data.saveLoading) return
					data.saveLoading=true
					
					//验证数据
					
					uni.showLoading()
					//调用接口
					
					//状态性显示
				},
				closeAction(){
					data.showTemplate=false
				},
				selectAction(e){
					let x=e.detail
					data.msg.TemplateId=x.type
					data.showTemplateStr=x.name
				},
				changeTitle({detail}){
					data.msg.Title=detail
				},
				closepopup(){
					data.showStus=false
				},
				closepopupWork(){
					data.showWorks=false
				},
				changeCreateMethod({detail}){
					data.msg.UseTemplate=detail
				},
				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.StuId=[]
					array.forEach(x=>{
						data.msg.StuId.push(x.StuId)
					})
					methods.closepopup()
				},
				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;
							data.showStusStr=data.StuList.length>0?`全班（${data.StuList.length}人）`:'暂无可选学员'
						}
						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()
				}
			};
			
			
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(option) {
			console.log(option)
			this.msg.CourseId = option.courseId;
			this.getCourseStu()
			this.getCourseHomeWorkList()
		},
		onShow() {
			
		}

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