<template>
	<view class="evaluation-detail">
		<custom-navbar title="评价详情" :showBack="true" borderBottom="none" backgroundColor="#FFF"></custom-navbar>
		<!-- 用户信息区域 -->
		<view class="user-section">
			<image class="avatar" :src="evaluatorPhoto" />
			<view class="user-info">

				<text class="username">{{ evaluatorName }}</text>
				<text class="time">{{formattedCreateTime}}</text>
			</view>

		</view>
		<view class="user-contant">
			<!-- 评分标题 -->
			<view class="rating-header">
				<image :src="getComposite" class="tag" mode="heightFix"></image>
				<view class="stars">
					<image v-for="n in 5" :key="n" :src="getStar(n)" class="star-icon" />
				</view>
				<text class="score">{{evaluateObj.composite}}分</text>
			</view>

			<!-- 分类评分 -->
			<view class="categories">
				<text class="category-item" v-if="evaluateObj.process!=`0.0`">
					过程:{{ evaluateObj.process }}
				</text>
				<text class="category-item" v-if="evaluateObj.attitude!=`0.0`">
					态度:{{ evaluateObj.attitude }}
				</text>
				<text class="category-item" v-if="evaluateObj.technology!=`0.0`">
					技术:{{ evaluateObj.technology }}
				</text>
				<text class="category-item" v-if="evaluateObj.effect!=`0.0`">
					效果:{{ evaluateObj.effect}}
				</text>
				<text class="category-item" v-if="evaluateObj.environment!=`0.0`">
					环境:{{ evaluateObj.environment}}
				</text>
			</view>


			<!-- 评论内容 -->
			<view class="comment">
				<text>
														{{ evaluateObj.describe }}
													</text>
			<!-- 	<uv-read-more show-height="300rpx" :toggle="true" textIndent="0rem">
				
				</uv-read-more> -->
				<!-- <text>
										{{ evaluateObj.describe }}
									</text> -->
			</view>

			<!-- 图片展示 -->
			<view class="photos">
				<image v-for="(photo, index) in photos" :key="index" :src="photo" class="photo" mode="aspectFill"
					@tap.stop="imgPreview(index)" />
			</view>

		</view>

	</view>
</template>

<script>
	import request from "@/utils/request";
	export default {
		data() {
			return {
				evaluateObj: {},
				formData: {
				},
			};
		},
		computed: {
			evaluatorPhoto() {
				if (!this.evaluateObj.evaluator_head_photo) {
					return ""
				}
				return this.evaluateObj.anonymity == 1 ? "/static/images/evaluate/photo.jpg" : this.evaluateObj
					.evaluator_head_photo
			},
			evaluatorName() {
				if (!this.evaluateObj.evaluator_name) {
					return ""
				}
				return this.evaluateObj.anonymity == 1 ? "匿名用户" : this.evaluateObj.evaluator_name
			},
			photos() {
				if (!this.evaluateObj.images) {
					return []
				}

				return this.evaluateObj.images.split(",")
			},
			// 计算属性：仅返回日期部分
			formattedCreateTime() {
				// 处理逻辑：通过空格分割取日期部分
				let dateString = this.evaluateObj.create_time;
				if (!dateString) {
					return ""
				}
				// 处理旧版iOS兼容性：将 "-" 替换为 "/"
				const compatibleDateStr = dateString.replace(/-/g, '/');

				// 创建日期对象
				const date = new Date(compatibleDateStr);

				// 兼容日期解析失败的情况
				if (isNaN(date.getTime())) {
					console.error('日期解析失败:', dateString);
					return '';
				}

				// 获取各部分时间
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从0开始，需要加1
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();

				// 补零处理
				const pad = (num) => num.toString().padStart(2, '0');
				const formattedMonth = pad(month);
				const formattedDay = pad(day);
				const formattedHours = pad(hours);
				const formattedMinutes = pad(minutes);

				// 拼接成目标格式
				return `发布于${year}年${formattedMonth}月${formattedDay}日 ${formattedHours}:${formattedMinutes}`;
			},
			getComposite() {
				if (!this.evaluateObj.composite) {
					return ""
				}
				return `/static/images/evaluate/score${Math.floor(this.evaluateObj.composite)}.png`
			}
		},
		onLoad(options) {
			// 接收参数并解析
			if (options.data) {
				// 先解码再解析JSON
				const receiveData = JSON.parse(decodeURIComponent(options.data));
				console.log("接收的对象参数：", receiveData);
				// 可以将数据赋值给data中的变量使用
				this.evaluateObj = receiveData;
			}
			if (options.order_id) {
				this.formData.order_id = options.order_id
				this.formData.order_type = options.order_type
				this.getList()
			}
		},
		methods: {
			getList() {
				request.post("/user/orderEvaluate/details", this.formData).then((res) => {
					console.log(res, "======");
					this.evaluateObj = res.data;
				});
			},
			imgPreview(index) {
				uni.previewImage({
					current: index,
					urls: this.photos,
				});
			},
			getStar(value) {
				if (!this.evaluateObj.composite) {
					return ""
				}
				let composite = this.evaluateObj.composite
				if (composite >= value) {
					return "/static/images/evaluate/star_red.png"
				} else if (composite < value && composite > value - 1) {
					return "/static/images/evaluate/star2.png"
				} else {
					return "/static/images/evaluate/star_ash2.png"
				}
			},
			// 处理函数：保留整数部分，小数部分>0.5则取0.5，否则取0
			handleDecimal(num) {
				// 提取整数部分（正数用Math.floor，负数特殊处理）
				const integerPart = Math.sign(num) === -1 ? Math.ceil(num) : Math.floor(num);
				// 提取小数部分
				const decimalPart = num - integerPart;

				// 判断小数部分并返回结果
				if (decimalPart > 0.5) {
					return integerPart + 0.5;
				} else {
					return integerPart + 0; // 可简化为 integerPart
				}
			},
		}
	};
</script>

<style lang="less">
	page {
		background: #fff;
	}

	.evaluation-detail {
		padding: 30rpx 20rpx;

	}

	/* 用户信息区域 */
	.user-section {
		display: flex;
		align-items: center;

		.avatar {
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			margin-right: 14rpx;
		}

		.user-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;

			.username {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}

			.time {
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				line-height: 30rpx;
				text-align: left;
				font-style: normal;
			}

		}


	}


	.user-contant {

		/* 评分头部 */
		.rating-header {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.tag {
				height: 50rpx;
				margin-right: 10rpx;
			}

			.stars {
				display: flex;
				align-items: center;
				margin-left: 10rpx;
				margin-right: 10rpx;

				.star-icon {
					width: 34rpx;
					height: 34rpx;
					margin-right: 2rpx;
				}
			}

			.score {
				font-weight: 400;
				font-size: 26rpx;
				color: #FF4767;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
			}
		}

		/* 各项评分 */
		.categories {
			margin-top: 10rpx;
			display: flex;
			gap: 20rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #7C7C7C;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
		}

		/* 评论内容 */
		.comment {
			margin-top: 30rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			line-height: 46rpx;
			text-align: left;
			font-style: normal;
		}

		/* 图片区域 */
		.photos {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			margin-top: 20rpx;
			gap: 5rpx;
			position: relative;

			.photo {
				width: 226rpx;
				height: 226rpx;
				border-radius: 6rpx;
				object-fit: cover;
				/* background-color: #f5f5f5; */
			}

			.more {
				width: 59rpx;
				height: 28rpx;
				background: rgba(51, 51, 51, 0.4);
				border-radius: 14rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;

				.more-img {
					width: 23rpx;
					height: 17rpx;
					margin-right: 5rpx;
				}
			}
		}

	}
</style>