<template>
	<view class="review-page">
		<!-- 自定义导航栏 -->
		<view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<uni-icons type="left" size="24" color="#333"></uni-icons>
				</view>
				<view class="nav-title">评价课程</view>
				<view class="nav-right"></view>
			</view>
		</view>

		<!-- 页面内容 -->
		<view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 星级评分区域 -->
			<view class="rating-section">
				<view class="stars-container">
					<uni-rate 
						v-model="currentRating"
						:max="5"
						:value="currentRating"
						:size="48"
						:margin="16"
						:allow-half="true"
						:touchable="true"
						@change="onRatingChange"
					/>
				</view>
				<view class="rating-display">
					<text class="rating-score">{{ currentRating * 2 }}分</text>
					<text class="rating-feedback">{{ ratingFeedback }}</text>
				</view>
			</view>

			<!-- 评价输入区域 -->
			<view class="review-input-section">
				<textarea 
					class="review-textarea" 
					v-model="reviewContent"
					placeholder="在这里提交您对精品课的建议,帮助课程继续优化改进(300字以内)"
					maxlength="300"
					:adjust-position="false"
					:show-confirm-bar="false"
				></textarea>
				<view class="word-count">
					<text class="count-text">{{ reviewContent.length }}/300</text>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-section">
				<button class="submit-btn" @click="submitReview">提交</button>
			</view>

			<!-- 奖励信息 -->
			<view class="reward-info">
				<text class="reward-text">参与评价,您将获得积分商城88积分,"精彩评价"将再额外获得88积分哦</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import course_api from "@/api/course_api.js"
import { onLoad } from '@dcloudio/uni-app'


// 响应式数据
const statusBarHeight = ref(0)
const navBarHeight = ref(88)
const currentRating = ref(0)
const reviewContent = ref('')
const ratingFeedback = ref('')

// 方法
const getSystemInfo = () => {
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight
	// #ifdef MP-WEIXIN
	navBarHeight.value = systemInfo.statusBarHeight + 44
	// #endif
	// #ifdef APP-PLUS
	navBarHeight.value = systemInfo.statusBarHeight + 44
	// #endif
}

const onRatingChange = (e) => {
	currentRating.value = e.value
	updateRatingFeedback()
}

const updateRatingFeedback = () => {
	const feedbacks = {
		0.5: '很差,课程几乎没有帮助',
		1: '差评,课程没有任何帮助',
		1.5: '较差,课程帮助很小',
		2: '一般,课程内容一般',
		2.5: '一般偏上,课程有一定帮助',
		3: '还行,课程有一定帮助',
		3.5: '不错,课程内容较好',
		4: '不错,课程内容很好',
		4.5: '很好,课程内容很棒',
		5: '很好,课程非常棒'
	}
	ratingFeedback.value = feedbacks[currentRating.value] || ''
}

const courseId = ref(0)
const is_commented = ref(0)
const submitReview = () => {
	if (currentRating.value === 0) {
		uni.showToast({
			title: '请先选择评分',
			icon: 'none'
		})
		return
	}
	
	if (!reviewContent.value.trim()) {
		uni.showToast({
			title: '请填写评价内容',
			icon: 'none'
		})
		return
	}
	
	// 提交评价
	uni.showLoading({
		title: '提交中...'
	})
	course_api.addExcellencourseComment({
		excellentcourse_id: courseId.value,
		comment: reviewContent.value,
		star: currentRating.value,
		type: is_commented.value
	}).then(res => {
		console.log('评价提交结果:', res)
		if(res.code == 200){
			uni.hideLoading()
			uni.showToast({
				title: '评价提交成功',
				icon: 'none'
			})
		}
		uni.navigateBack()
	})
	
}

const goBack = () => {
	uni.navigateBack()
}

onLoad((options) => {
	is_commented.value = options.is_commented

	courseId.value = options.id
	console.log('课程ID:', options.id)
})
// 生命周期
onMounted(() => {
	getSystemInfo()
	
})
</script>

<style lang="scss">
.review-page {
	min-height: 100vh;
	background-color: #fff;
}

// 导航栏
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	
	.nav-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		
		.nav-left, .nav-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #FF4757;
		}
	}
}

.page-content {
	padding: 32rpx 24rpx;
}

// 星级评分区域
.rating-section {
	text-align: center;
	margin-bottom: 48rpx;
	
	.rating-title {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 32rpx;
	}
	
	.stars-container {
		display: flex;
		justify-content: center;
		margin: 24rpx 0;
	}
	
	.rating-display {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
		
		.rating-score {
			font-size: 32rpx;
			color: #FFB800;
			font-weight: 600;
		}
		
		.rating-feedback {
			font-size: 24rpx;
			color: #333;
			font-weight: 500;
		}
	}
}

// 评价输入区域
.review-input-section {
	margin-bottom: 48rpx;
	
	.review-textarea {
		width: 100%;
		height: 300rpx;
		padding: 24rpx;
		background-color: #f8f9fa;
		border: 1rpx solid #e0e0e0;
		border-radius: 16rpx;
		font-size: 26rpx;
		color: #333;
		line-height: 1.6;
		resize: none;
		
		&::placeholder {
			color: #999;
			line-height: 1.8;
		}
	}
	
	.word-count {
		text-align: right;
		margin-top: 16rpx;
		
		.count-text {
			font-size: 22rpx;
			color: #999;
		}
	}
}

// 提交按钮
.submit-section {
	margin-bottom: 48rpx;
	
	.submit-btn {
		width: 100%;
		height: 88rpx;
		background-color: #20B2AA;
		color: #fff;
		border: none;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

// 奖励信息
.reward-info {
	text-align: center;
	
	.reward-text {
		font-size: 24rpx;
		color: #333;
		line-height: 1.5;
	}
}
</style>
