<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>
			<van-tabs v-model="activeName"
			color="#D13A48" title-active-color="#D13A48"
			@change="clickTabs">
				<van-tab v-for="(item,indx) in LabelList" :key="index"
				:title="item.name" :name="item.id"></van-tab>
				</van-tabs>
		</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 style="border-radius: 30rpx;background: #FCEEEF;overflow: hidden;margin-bottom: 40rpx;" v-for="(item,index) in courseRule.CommentDetails">
				
			
			<van-swipe-cell
			  id="swipe-cell"
			  :right-width="116"
			  async-close
			  :key="index"
			  @close="onClose"
			  
			>
				<view class="commentRulesList-list">
					<view class="commentRulesList-img flex">
						<view>百分比: {{item.StartNum}}%-{{item.EndNum}}%</view>
					</view>
					<view class="commentRulesList-comment">
						{{item.Info}}
					</view>
				</view>
				<view slot="right" class="van-swipe-cell__right">
					
					<van-button square type="danger" @click="deleteRules(item,index)" custom-style="height:100%;">删除</van-button>
					<van-button square type="primary" @click="editRules(item,index)" custom-style="height:100%;">编辑</van-button>
				</view>
			</van-swipe-cell>
			</view>
			<view class="noData" v-if="!courseRule || !courseRule.CommentDetails || !courseRule.CommentDetails.length>0">
				<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 class="add flex">
					<text @click="addRules">添加自定义规则</text>
				</view>
			</view>
		</view>
		<van-popup :show="show" :round="true" @close="closepopup">
			<rulesPopup @cancel="closepopup" :rule="editor" :rules="courseRule" 
			:Times="activeName"
			v-if="show" ref="getrulesPopup" @change="changeData"></rulesPopup>
		</van-popup>
	</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: '',
					CourseName: '',
					Times:''
				},
				//课程规则
				courseRule: {
					Id: 0,
					Title: "",
					CourseId: 0,
					CommentDetails: [], //规则详情
					Times:''
				}, //课程规则
				isDefaultRule: true, //是否是默认规则（
				detailItem: {}, //当前编辑项
				show:false,
				editor:-1,
				activeName:'1',
				LabelList:[
					{name:'第一次评论',id:'1'},
					{name:'第二次评论',id:'2'},
					{name:'第三次评论',id:'3'}]
			});
			let methods = {
				onClose(event) {
				    const { position, instance } = event.detail;
				    switch (position) {
				      case 'left':
				      case 'cell':
					  case 'right':
				        instance.close();
				        break;
				    }
				  },
				back() {
					uni.navigateBack({
						delta: 1
					})
				},
				// 关闭规则弹窗
				closure(){
					this.show=false
				},
				//添加规则
				addRules() {
					data.show = true
					//refs.getrulesPopup.$vm.showFun()
				},
				closepopup(){
					data.show=false
					data.editor=-1
				},
				//编辑规则
				editRules(item,index) {
					
					data.editor=index
					data.show = true
				},

				//删除规则
				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
								})
							}
						}
					});
				},
				clickTabs(name){
					data.Msg.Times = name.target.name
					data.courseRule.Times = name.target.name
					that.getCourseRule()
				},
				//获取课程规则信息
				getCourseRule() {
					uni.showLoading()
					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;
							}
						}
						uni.hideLoading()
					})
				},
				//获取子组件数据
				changeData() {
					methods.getCourseRule()
					data.show=false
				}
			}
			let that = methods
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(option) {
			this.Msg.CourseId = option.CourseId;
			this.Msg.CourseName = option.CourseName;
			this.Msg.Times = '1'
			this.courseRule.Times = '1'
			this.getCourseRule();
		},
	};
</script>
<style scoped>
	.noData {
		text-align: center;
		flex: 1;
		width: 100%;
		margin-top: 171rpx;
	}
	.van-swipe-cell__left,
	.van-swipe-cell__right {
		position: absolute;
		top: 0;
		height: 100%;
		right: 0;
		width:232px;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	
	.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;
		
	}

	.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;
		min-height: 100rpx;
	}

	.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;
		margin-top: 110rpx;
	}

	.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;
	}
	.right-opeartion{
		width: 100px;
		margin-left: 38px;
		background: #D13A48;
		color: #FFF;
		left: 159px;
		z-index: -1;
		padding-left: 91rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.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;
		min-height: 100rpx;
	}

	.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>
