<template>
	
		
	<view class="rulesPopup-box">
		<van-icon class="rulesPopup-closure" name="cross" @click="cancelHandler" />
		<view class="rulesPopup-title">自定义评论规则</view>
		<view class="rulesPopup-content">
			<!-- <input v-model="ruleObj.Title" class="rulesPopup-name" placeholder="请输入本组自定义规则名称" /> -->
			<view class="rulesPopup-RuleSettings">
				<view class="RuleSettings-title">规则设置</view>
				<sRegionSlider v-if="readyShow" :minValue="minValue" :maxValue="maxValue" :fillMinValue='rangeValue[0]' :fullValue='rangeValue[1]' :step="5"
				@up="up"  @down="down"  @move="move" />
			</view>
		</view>
		<view class="RuleSettings-content">
			<textarea placeholder="请填写评论内容" v-model="ruleObj.Info"></textarea>
		</view>
		<view class="rulesPopup-save flex">
			<van-loading color="#f5f5f5" v-if="loading" />
			<view @click="save" v-else>保存</view>
		</view>
		
	</view>
</template>
<script>
	import sRegionSlider from '@/components/sregionslider/sregionslider'
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject,
		watch
	} from "vue";
	import {
		uploadFile
	} from "@/utils/index";
	import {setCourseComment} from '../../api/index'
	export default {
		components: {
			sRegionSlider
		},
		props: {
			rule:{
				type:Number,
				default:null
			},
			rules:{
				type:Object,
				default:null
			}
		},
		emits: ['change','cancel'],
		setup(props, ctx) {
			let {
				proxy
			} = getCurrentInstance();
			watch(
			  () => props.rules,
			  (newValue, oldValue) => {
				data.rules=newValue
			  }
			)
			let data = reactive({
				loading: false,
				isRange: true,
				ruleObj: {
					DetailId: 0, //详情编号
					Title: "", //标题
					StartNum: 0, //开始值
					EndNum: 0, //结束值
					Info: "", //评价
				},
				minValue:0,
				maxValue:0,
				rangeValue:[0,100],
				rules:props.rules,
				readyShow:false
			});
			if(props.rule!=-1){
				let tempRule=data.rules.CommentDetails[props.rule]
				data.ruleObj.DetailId = tempRule.DetailId;
				data.ruleObj.StartNum = tempRule.StartNum;
				data.ruleObj.EndNum = tempRule.EndNum;
				data.ruleObj.Info = tempRule.Info;
				data.minValue = tempRule.StartNum;
				data.maxValue = tempRule.EndNum;
				
			}
			
			let methods = {
				chage(minValue,maxValue){
					data.minValue = minValue;
					data.maxValue = maxValue;
				},
				up(e){
					data.minValue = e.custom.minValue;
					data.maxValue = e.custom.maxValue;
				},
				down(e){ },
				move(e){ },
				cancelHandler(){
					ctx.emit('cancel')
				},
				save() {
					if(data.ruleObj.Info==''){
						uni.showToast({
							title: '请填写评语内容',
							icon: 'none',
							duration: 1000
						})
						return;
					}
					uni.showLoading()
					data.loading=true
					data.ruleObj.StartNum = data.minValue >data.maxValue?data.maxValue:data.minValue;
					data.ruleObj.EndNum = data.minValue>data.maxValue?data.minValue:data.maxValue;
					if(props.rule!=-1){
						data.rules.CommentDetails[props.rule]=data.ruleObj
					}else{
						data.rules.CommentDetails.push(data.ruleObj)
					}
					setCourseComment(data.rules).then(r=>{
						//console.log(r)
						data.loading=false
						uni.hideLoading()
						uni.showToast({
							title: '操作成功!',
							icon: 'none',
							duration: 500
						})
						ctx.emit("change");
					})
				}
			};
			let that = methods;
			data.readyShow=true
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad() {

		},
		onShow() {

		}
	};
</script>
<style scoped>
	.custom-button {
		width: 26rpx;
		color: #fff;
		font-size: 20rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: #ee0a24;
		border-radius: 100rpx;
	}

	

	.rulesPopup-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;
	}

	.rulesPopup-save {
		justify-content: flex-end;
		margin-top: 40rpx;
	}

	.RuleSettings-content textarea {
		width: 100%;
		font-size: 30rpx;
		font-weight: 400;
		color: #282828;
		line-height: 48rpx;
	}

	.RuleSettings-content {
		background: #F7F7F7;
		border-radius: 30rpx;
		min-height: 152rpx;
		padding: 37rpx 43rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}

	.RuleSettings-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #282828;
		line-height: 42rpx;
		/* margin-bottom: 70rpx; */
	}

	.rulesPopup-box .noData {
		text-align: center;
		flex: 1;
		width: 100%;
	}

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

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

	.rulesPopup-RuleSettings {
		background: #FCEEEF;
		border-radius: 30rpx;
		padding: 35rpx 40rpx;
		padding-bottom: 60rpx;
	}

	.rulesPopup-name {
		background-color: #F7F7F7;
		text-align: center;
		border: 1px solid #F7F7F7;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 10rpx;
		border-radius: 44rpx;
		font-size: 30rpx;
		letter-spacing: 1rpx;
	}

	.rulesPopup-title {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		margin-bottom: 60rpx;
	}

	.rulesPopup-closure {
		position: absolute;
		right: 31rpx;
		top: 31rpx;
		color: #282828;
		font-size: 38rpx;
	}

	.rulesPopup-box {
		position: relative;
		width: 650rpx;
		padding: 40rpx;
		padding-bottom: 60rpx;
		box-sizing: border-box;
	}

	.rulesPopup-box {}
</style>
