<template>
	<view class="review-page">


		<!-- 商品信息 -->
		<view v-for="(item,index) in orderDetail" :key="index" class="product-info">
			<image :src="Service.GetMateUrlByImg(item.goodsImg)" class="product-image"></image>
			<view class="product-details">
				<text class="product-name">{{ item.goodsName }}</text>
				<view class="" style=" display: flex; align-items: baseline; gap: 12rpx;">
					规格:
					<text v-for="(ruleItem,ruleIndex) in  item.rule.split('-')" :key="ruleIndex"
						class="product-attributes">{{ruleItem }}</text>
				</view>
			</view>
		</view>

		<!-- 评分区域 -->
		<view class="rating-section">
			<view class="rating-item">
				<text class="rating-label">评价星级</text>
				<view class="" style="display: flex; align-items: end;">
					<up-rate count="5" v-model="source" activeColor='#F97316'></up-rate>
					<text style="color: #F97316; font-weight: 600; margin-left: 15rpx;">{{source.toFixed(1)}}</text>
				</view>
			</view>
		</view>

		<!-- 评价心得 -->
		<view class="review-content-section">
			<text class="section-title">评价心得</text>
			<up-textarea v-model="reviewContent" placeholder="请输入内容" count></up-textarea>
		</view>

		<!-- 上传图片 -->
		<view class="upload-section">
			<text class="section-title">上传图片(选填，最多9张)</text>
			<view class="upload-container">
				<view @click="upLoadImg()" class="upload-item add-item">
					<image :src="Service.GetpayImg('/static/userFunc/comment/add.png')" class="add-icon"></image>
				</view>

				<view class="" v-for="(imgItem,imgIndex) in commentImgs" :key="imgIndex" style="position: relative;">
					<image :src="Service.GetMateUrlByImg(imgItem)" class="upload-img"></image>
					<image @click="closeImg(imgItem)" :src="Service.GetpayImg('/static/userFunc/comment/close.png')"
						style="position: absolute; top: -6rpx;  right: -10rpx; width: 20rpx; height: 20rpx; " alt="" />
				</view>

			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<up-button @click="submitReview"  :customStyle='{borderRadius: "12rpx"}' color='#FF6A00' text="发布评价"></up-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { Service } from '@/Service/Service'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { OrderService } from '@/Service/api/OrderService';

	let commentImgs = ref([])
	// 评价内容
	let reviewContent = ref('');
	let source = ref(5)
	let orderDetail = ref<Array<any>>([])
	let orderId = ref('')
	onLoad((data : any) => {
		orderId.value = data.orderId
		getData()
	})

	onShow(() => {

	})


	const getData = () => {
		OrderService.GetOrderInfo(orderId.value).then(res => {
			if (res.code == 0) {
				orderDetail.value = res.data.orderDetail
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const upLoadImg = () => {
		uni.chooseImage({
			count: 9, // 最多选择1张图片
			sizeType: ['original', 'compressed'], // 支持原图和压缩图
			sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
			success: function (res) {
				let path = res.tempFiles[0].path
				Service.uploadH5(path, 'Avatar', data => {
					commentImgs.value.push(JSON.parse(data).data.path)
				})
			},
			fail: function (err) {
				console.error('选择失败:', err.errMsg);
			}
		})
	}

	const closeImg = (item:never) => {
		let index = commentImgs.value.indexOf(item)
		commentImgs.value.splice(index, 1)
		console.log(commentImgs.value);
	}




	// 提交评价
	const submitReview = () => {
		if( reviewContent.value=='' ){
			Service.Msg('评论不能为空!')
			return
		}
		let data={
			orderId:orderId.value,
			source:source.value,
			sign:reviewContent.value,
			img:JSON.stringify(commentImgs.value)
		}
		OrderService.EvaluateOrder(data).then(res=>{
			if(res.code==0){
				Service.Msg(res.data)
				setTimeout(()=>{
					Service.GoPageBack()
				},1000)
			}else{
				Service.Msg(res.msg)
			}
		})

	};
</script>

<style scoped lang="scss">
	/* 页面基础样式 */
	.review-page {
		background-color: #f5f5f5;
	}

	/* 商品信息 */
	.product-info {
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.product-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
	}

	.product-details {
		margin-left: 24rpx;
		flex: 1;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-attributes {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	/* 评分区域 */
	.rating-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.rating-item {
		display: flex;
		align-items: end;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.rating-item:last-child {
		margin-bottom: 0;
	}

	.rating-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		width: 160rpx;
	}

	.stars-container {
		display: flex;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.star-icon {
		width: 44rpx;
		height: 44rpx;
		margin-right: 10rpx;
	}

	.rating-value {
		font-size: 28rpx;
		color: #ff7d00;
		font-weight: bold;
	}

	/* 评价标签 */
	.tags-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 28rpx;
		color: #4B5563;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.tag-item {
		font-size: 26rpx;
		color: #666;
		background-color: #f5f5f5;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
	}

	.tag-item.active {
		background-color: #FF6A00;
		color: #fff;
	}

	/* 评价心得 */
	.review-content-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.review-input {
		width: 100%;
		height: 240rpx;
		border: 1rpx solid #eee;
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 26rpx;
		color: #333;
		box-sizing: border-box;
		resize: none;
	}

	.character-count {
		font-size: 24rpx;
		color: #999;
		text-align: right;
		margin-top: 10rpx;
	}

	/* 上传图片 */
	.upload-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.upload-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.upload-item {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
	}

	.add-item {
		background-color: #F9FAFB;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx dashed #D1D5DB;
	}

	.add-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.upload-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10rpx;
	}

	/* 匿名评价 */
	.anonymous-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.anonymous-checkbox {
		width: 32rpx;
		height: 32rpx;
	}

	.anonymous-label {
		font-size: 28rpx;
		color: #333;
		margin-left: 16rpx;
	}

	/* 操作按钮 */
	.action-buttons {
		display: flex;
		padding: 20rpx 30rpx;
		gap: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
</style>