<template>
	<view class="rulesPopup-box">
		<van-popup :show="show" :round="true" @close="closepopup">
			<view class="rulesPopup-box">
				<van-icon class="rulesPopup-closure" name="cross" @click="closepopup" />
				<view class="rulesPopup-title">自定义评论规则</view>
				<view class="rulesPopup-content">
					<input v-model="ruleObj.Title" class="rulesPopup-name" placeholder="请输入本组自定义规则名称" />
					<view class="rulesPopup-RuleSettings">
						<text class="RuleSettings-title">规则设置</text>
						<view class="RuleSettings-slider">
							<van-slider v-model="valueNum" range @change="onChange" />
						</view>
					</view>
				</view>
				<view class="RuleSettings-content">
					<textarea placeholder="请填写评论内容" v-model="ruleObj.Info"></textarea>
				</view>
				<view class="rulesPopup-save flex">
					<view @click="save">保存</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>
<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject,
		watch
	} from "vue";
	import {
		uploadFile
	} from "@/utils/index";
	export default {
		props: {

		},
		emits: ['change'],
		components: {},
		setup(props, ctx) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				valueNum: [10, 50],
				show: false,
				loading: false,
				isRange: true,
				ruleObj: {
					DetailId: 0, //详情编号
					Title: "", //标题
					StartNum: 0, //开始值
					EndNum: 0, //结束值
					Info: "", //评价
				}
			});
			let methods = {
				showFun(item) {
					if (item) {
						data.ruleObj.DetailId = item.DetailId;
						data.ruleObj.StartNum = item.StartNum;
						data.ruleObj.EndNum = item.EndNum;
						data.ruleObj.Info = item.Info;
					} else {
						data.ruleObj.DetailId = 0;
						data.ruleObj.StartNum = 0;
						data.ruleObj.EndNum = 0;
						data.ruleObj.Info = "";
					}
					data.show = true
				},
				closepopup() {
					data.show = false
				},
				onChange(value) {
					console.log(value)
				},
				save() {
					data.ruleObj.StartNum = data.valueNum[0];
					data.ruleObj.EndNum = data.valueNum[1];
					ctx.emit("change", data.ruleObj);
					data.show = false
				}
			};
			let that = methods;
			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;
	}

	.RuleSettings-slider {
		padding: 52rpx 0 66rpx 0;
	}

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

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

	.RuleSettings-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #282828;
	}

	.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 41rpx;
		margin-top: 51rpx;
		margin-bottom: 40rpx;
	}

	.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: 73rpx;
		letter-spacing: 1rpx;
	}

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

	.rulesPopup-box {
		position: relative;
		width: 548rpx;
		padding: 48rpx 55rpx 60rpx 55rpx;
	}

	.rulesPopup-box {}
</style>
