<template>
	<view class="commentRulesList-box">
		<navbar class="navbarSticky" bg="#FFFFFF">
			<view class="commentRulesList-header-box flex">
				<van-icon class="commentRulesList-header-left" name="arrow-left" @click="back" />
				<text class="commentRulesList-header-title">评论规则</text>
			</view>
		</navbar>
		<view class="commentRulesList-content">
			<view class="commentRulesList-title flex">
				<van-image class="img" width="35rpx" height="40rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653980136000_413.png" />
				<text>{{courseRule.Title}}</text>
			</view>
			<view class="commentRulesList-list" v-if="courseRule" v-for="(item,index) in courseRule.CommentDetails">
				<view class="commentRulesList-cross" v-if="courseRule.Id>0" @click="deleteRules(item,index)">
					<van-icon name="cross" />
				</view>
				<view class="commentRulesList-img flex">
					<view>百分比: {{item.StartNum}}%-{{item.EndNum}}%</view>
					<van-image v-if="courseRule.Id>0" @click="editRules(item)" class="img" width="31rpx" height="30rpx" fit="cover"
					 src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653980151000_180.png" />
				</view>
				<view class="commentRulesList-comment">
					{{item.Info}}
				</view>
			</view>
			<view class="noData" v-else>
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653902791000_806.png" mode="widthFix"></image>
				<view>暂无评论规则数据</view>
			</view>
		</view>
		<view class="commentRulesList-footer-box">
			<view class="commentRulesList-footer flex">
				<view class="add flex">
					<text @click="addRules">添加自定义规则</text>
					<view class="Wire"></view>
				</view>
				<view class="save flex"><text v-if="!isDefaultRule" @click="saveRules">保存</text></view>
			</view>
		</view>
		<template v-show="show">
			<rulesPopup ref="getrulesPopup" @change="changeData"></rulesPopup>
		</template>
	</view>
</template>
<script>
	import rulesPopup from '@/components/setComments/rulesPopup'

	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";
	import navbar from '../../components/navbar.vue'
	export default {
		props: {

		},
		components: {
			navbar,
			rulesPopup
		},
		setup() {
			let {
				refs
			} = getCurrentInstance();
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				Msg: {
					CourseId: '',
				},
				//课程规则
				courseRule: {
					Id: 0,
					Title: "",
					CourseId: 0,
					CommentDetails: [], //规则详情
				}, //课程规则
				isDefaultRule: true, //是否是默认规则（
				detailItem: {}, //当前编辑项
				show:false
			});
			let methods = {
				
				back() {
					uni.navigateBack({
						delta: 1
					})
				},
				// 关闭规则弹窗
				closure(){
					refs.getrulesPopup.$vm.closepopup()
				},
				saveRules() { //保存规则
					proxy.$request("/Teacher/SetCourseComment", data.courseRule).then(res => {
						if (res) {
							uni.showToast({
								title: '操作成功!',
								icon: 'none',
								duration: 500
							})
							this.getCourseRule()
						}
					})
				},
				//添加规则
				addRules() {
					data.show = true
					refs.getrulesPopup.$vm.showFun()
				},
				//编辑规则
				editRules(item) {
					data.show = true
					refs.getrulesPopup.$vm.showFun(item)
				},

				//删除规则
				deleteRules(item, index) {
					let self=this;
					uni.showModal({
						title: '提示',
						content: '将删除该规则,是否继续',
						success: function(res) {
							if (res.confirm) {
								if (item.DetailId > 0) {
									let delMsg = {
										DetailIds: item.DetailId
									};
									proxy.$request("/Teacher/RemoveCourseCommentDetail", delMsg).then(res => {
										if (res.Code == 1) {
											uni.showToast({
												title: '删除成功!',
												icon: 'none',
												duration: 500
											});
											self.getCourseRule();
										}
									})
								} else {
									data.courseRule.CommentDetails.splice(index, 1);
								}
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消',
									icon: 'none',
									duration: 500
								})
							}
						}
					});
				},
				//获取课程规则信息
				getCourseRule() {
					proxy.$request("/Teacher/GetCourseComment", data.Msg).then(res => {
						if (res) {
							var tempData = res.Data;
							if (tempData) {
								data.courseRule.Id = tempData.Id;
								data.courseRule.Title = tempData.Title;
								data.courseRule.CourseId = tempData.CourseId;
								data.courseRule.CommentDetails = tempData.CommentDetails;
							}
							if (res.Data.Id == 0) {
								data.isDefaultRule = true;
							} else {
								data.isDefaultRule = false;
							}
						}
					})
				},
				//获取子组件数据
				changeData(item) {
					console.log("item", item);
					if (item) {
						if (item.Title && item.Title != '') {
							data.courseRule.Title = item.Title
						}
						if (data.isDefaultRule) {
							data.courseRule.CommentDetails = [];
						}
						let obj = {
							DetailId: item.DetailId,
							StartNum: item.StartNum,
							EndNum: item.EndNum,
							Info: item.Info
						}
						if (item.DetailId > 0 && data.courseRule.CommentDetails.length > 0) {
							let chooseIndex = data.courseRule.CommentDetails.findIndex(qitem => qitem.DetailId == item.DetailId);
							data.courseRule.CommentDetails[chooseIndex].StartNum = obj.StartNum;
							data.courseRule.CommentDetails[chooseIndex].EndNum = obj.EndNum;
							data.courseRule.CommentDetails[chooseIndex].Info = obj.Info;
						} else {
							data.courseRule.CommentDetails.push(obj)
						}
					}
					if (data.isDefaultRule) {
						data.isDefaultRule = false;
					}
				}
			}
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(option) {
			this.Msg.CourseId = option.CourseId;
			if(option.show){
				this.show = option.show
				this.addRules()
			}
			if(option.CourseId){
				this.show = true
				this.addRules()
				setTimeout(()=>{
					this.show = false
					this.closure()
				},200)
			}
			this.getCourseRule();
		},
	};
</script>
<style scoped>
	.noData {
		text-align: center;
		flex: 1;
		width: 100%;
	}

	.noData image {
		width: 200rpx;
		margin-bottom: 40rpx;
	}

	.noData view {
		font-size: 24rpx;
		color: #cecece;
		text-align: center;
	}

	.save {
		margin-left: 24rpx;
	}

	.Wire {
		width: 2rpx;
		height: 32rpx;
		background: #DCDCDC;
		margin-left: 24rpx;
		flex-shrink: 0;
		margin-top: 25rpx;
	}

	.save text {
		background: #D13A48;
		color: #FFFFFF;
	}

	.add text {
		background: #FFFFFF;
		color: #D13A48;
	}

	.add text,
	.save text {
		line-height: 88rpx;
		flex-grow: 2;
		border: 1rpx solid #D13A48;
		border-radius: 44rpx;
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		letter-spacing: 1rpx;
	}

	.add,
	.save {
		flex: 0 0 50%;
		flex-shrink: 0;
	}

	.commentRulesList-footer {
		padding: 29rpx 70rpx;
		align-items: center;
	}

	.commentRulesList-footer-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34);
	}

	.commentRulesList-comment {
		font-size: 30rpx;
		font-weight: 400;
		color: #282828;
		line-height: 58rpx;
		letter-spacing: 1rpx;
	}

	.commentRulesList-img .img {
		margin-top: 5rpx;
		flex-shrink: 0;
	}

	.commentRulesList-img view {
		flex-grow: 1;
		margin-right: 15rpx;
	}

	.commentRulesList-img {
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #D9868D;
		margin-bottom: 34rpx;
	}

	.commentRulesList-cross {
		position: absolute;
		right: -12rpx;
		top: -12rpx;
		width: 44rpx;
		height: 44rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34);
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #D9868D;
		text-align: center;
		line-height: 44rpx;
	}

	.commentRulesList-list {
		background: #FCEEEF;
		border-radius: 30px;
		position: relative;
		padding: 37rpx 38rpx 36rpx 45rpx;
		margin-bottom: 40rpx;
		min-height: 290rpx;
	}

	.commentRulesList-title .img {
		flex-shrink: 0;
		display: inline-block;
		margin-top: 5rpx;
	}

	.commentRulesList-title text {
		font-size: 40rpx;
		font-weight: bold;
		color: #282828;
		margin-left: 29rpx;
		letter-spacing: 1rpx;
	}

	.commentRulesList-title {
		align-items: center;
		margin-bottom: 35rpx;
	}

	.commentRulesList-content {
		padding: 0 50rpx;
		margin-bottom: 240rpx;
	}

	.commentRulesList-box {
		background: #FFFFFF;
	}

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

	.save {
		margin-left: 24rpx;
	}

	.Wire {
		width: 2rpx;
		height: 32rpx;
		background: #DCDCDC;
		margin-left: 24rpx;
		flex-shrink: 0;
		margin-top: 25rpx;
	}

	.save text {
		background: #D13A48;
		color: #FFFFFF;
	}

	.add text {
		background: #FFFFFF;
		color: #D13A48;
	}

	.add text,
	.save text {
		line-height: 88rpx;
		flex-grow: 2;
		border: 1rpx solid #D13A48;
		border-radius: 44rpx;
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		letter-spacing: 1rpx;
	}

	.add,
	.save {
		flex: 0 0 50%;
		flex-shrink: 0;
	}

	.commentRulesList-footer {
		padding: 29rpx 70rpx;
		align-items: center;
	}

	.commentRulesList-footer-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34);
	}

	.commentRulesList-comment {
		font-size: 30rpx;
		font-weight: 400;
		color: #282828;
		line-height: 58rpx;
		letter-spacing: 1rpx;
	}

	.commentRulesList-img .img {
		margin-top: 5rpx;
		flex-shrink: 0;
	}

	.commentRulesList-img view {
		flex-grow: 1;
		margin-right: 15rpx;
	}

	.commentRulesList-img {
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #D9868D;
		margin-bottom: 34rpx;
	}

	.commentRulesList-cross {
		position: absolute;
		right: -12rpx;
		top: -12rpx;
		width: 44rpx;
		height: 44rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34);
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #D9868D;
		text-align: center;
		line-height: 44rpx;
	}

	.commentRulesList-list {
		background: #FCEEEF;
		border-radius: 30px;
		position: relative;
		padding: 37rpx 38rpx 36rpx 45rpx;
		margin-bottom: 40rpx;
		min-height: 290rpx;
	}

	.commentRulesList-title .img {
		flex-shrink: 0;
		display: inline-block;
		margin-top: 5rpx;
	}

	.commentRulesList-title text {
		font-size: 40rpx;
		font-weight: bold;
		color: #282828;
		margin-left: 29rpx;
		letter-spacing: 1rpx;
	}

	.commentRulesList-title {
		align-items: center;
		margin-bottom: 35rpx;
	}

	.commentRulesList-content {
		padding: 0 50rpx;
		margin-bottom: 240rpx;
	}

	.commentRulesList-box {
		background: #FFFFFF;
	}
	.commentRulesList-header-box{
	    padding: 20rpx 42rpx;
		flex-direction: row;
		align-items: center;
	}
	.commentRulesList-header-title{
	    font-size: 32rpx;
	    font-weight: 500;
	    color: #282828;
		flex:1;
		    text-align: center;
		    padding-right: 40rpx;
	}
	.commentRulesList-header-left{
	    font-size: 40rpx;
	    position: relative;
	    z-index: 3;
	}

	.navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}
</style>
