<template>
	<view class="setComments-index-box">
		<navbar class="navbarSticky" bg="#F6F6F6">
			<view class="setComments-header-box flex">
				<van-icon class="setComments-header-left" name="arrow-left" @click="back" />
				<text class="setComments-header-title">设置评语</text>
			</view>
		</navbar>
		<view class="setComments-index-content">
			<view class="setComments-index-setType flex">
				<view class="setComments-setType-left flex">
					<view>
						<van-image class="img" width="29rpx" height="29rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653977710000_475.png" />
					</view>
					<view class="setComments-setType-text flex">
						<text>
							<template v-if="courseRule&&courseRule.Id>0">自定义评价</template>
							<template v-else>使用默认配置</template>
						</text>
						<view>
							<template v-if="courseRule&&courseRule.Id>0">从自定义评价规则进入修改</template>
							<template v-else>不喜欢默认配置可自行设置</template>
						</view>
					</view>
				</view>
				<view class="setComments-setType-right flex" @click="goRules">
					<view>
						<text>自定义评价</text>
						<van-image class="img" width="14rpx" height="13rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653977684000_601.png" />
					</view>
				</view>
			</view>
			<setComments :CourseCommentTimesList="courseTimeList" @refreshData="getCourseCommentTimes"></setComments>
		</view>

	</view>
</template>
<script>
	import setComments from '@/components/setComments/setComments'
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";
	import navbar from '../../components/navbar.vue'
	export default {
		props: {

		},
		components: {
			navbar,
			setComments
		},
		setup() {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				value: 1,
				optionsList: [{
						text: '部分可见',
						value: 0
					},
					{
						text: '可见不可见',
						value: 1
					},
					{
						text: '活动商品',
						value: 2
					},
				],
				radioList: [{
						name: '使用默认配置',
						id: 1,
						checked: true
					},
					{
						name: '自定义评价',
						id: 2
					}
				],
				checked: '1',
				Msg: {
					CourseId: '',
				},
				courseTimeList: [], //课程自动生成评论次数
				courseRule: {}, //课程评价规则
			});
			let methods = {
				back() {
					uni.navigateBack({
						delta: 1
					})

				},
				radioChange(e) {
					console.log("打印国家名称", e.target.value)
				},
				//获取课程评论次数列表
				getCourseCommentTimes() {
					proxy.$request("/Teacher/GetCourseCommentTimes", data.Msg).then(res => {
						if (res) {
							data.courseTimeList = res.Data;
						}
					})
				},
				//获取课程评价规则信息
				getCourseRule() {
					proxy.$request("/Teacher/GetCourseComment", data.Msg).then(res => {
						if (res) {
							data.courseRule = res.Data;
						}
					})
				},
				goRules() {
					uni.navigateTo({
						url: '/pages/setComments/commentRulesList?CourseId=' + data.Msg.CourseId
					})
				}
			};

			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(option) {
			this.Msg.CourseId = option.CourseId;
			this.getCourseRule();
			this.getCourseCommentTimes();
		},

	};
</script>
<style scoped>
	.setComments-header-box{
	    padding: 20rpx 42rpx;
		flex-direction: row;
		align-items: center;
	}
	.setComments-header-title{
	    font-size: 32rpx;
	    font-weight: 500;
	    color: #282828;
		flex:1;
		    text-align: center;
		    padding-right: 40rpx;
	}
	.setComments-header-left{
	    font-size: 40rpx;
	    position: relative;
	    z-index: 3;
	}
	.setComments-setType-right view text {
		margin-right: 11rpx;
	}

	.setComments-setType-right view {
		color: #D9868D;
		background: #F5DEE0;
		border-radius: 25rpx;
		width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		letter-spacing: 1rpx;
	}

	.setComments-setType-right {
		flex-shrink: 0;
		font-size: 24rpx;
		font-weight: 500;

	}

	.setComments-setType-text view {
		font-size: 24rpx;
		color: #AFAFAF;
		font-weight: 400;
		margin-top: 15rpx;
	}

	.setComments-setType-text text {
		font-size: 30rpx;
		font-weight: bold;
		color: #282828;
	}

	.setComments-setType-text {
		flex-direction: column;
		margin-left: 26rpx;
		letter-spacing: 1rpx;
	}

	.setComments-setType-left view:first-child {
		flex-shrink: 0;
	}

	.setComments-setType-left {
		flex-grow: 1;
		margin-right: 32rpx;
	}

	.setComments-index-setType {
		background: #FCEEEF;
		box-shadow: 0rpx 6rpx 52rpx 0rpx rgba(230, 65, 80, 0.19);
		border-radius: 50rpx;
		margin: 55rpx 50rpx 50rpx 50rpx;
		padding: 33rpx 50rpx;
	}

	.setComments-index-box {
		background: #F6F6F6;
	}

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

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