<template>
	<view class="evaluationList" v-if="evaluateList.count">
		<!-- 头部容器：显式设置flex方向为水平 -->
		<view class="evaluationList-header">
			<view class="evaluationList-header-left">
				<!-- 文字样式必须写在text标签的class上 -->
				<text class="header-left-text">评价({{evaluateList.count}})</text>
			</view>
			<view class="evaluationList-header-right" @click="goList">
				<!-- 文字单独用text标签包裹并添加样式class -->
				<text class="header-right-text">查看全部</text>
				<image src="/static/images/evaluate/right.png" class="header-right-img" />
			</view>
		</view>
		<evaluationDetail 
			v-for="(item, index) in evaluateList.list" 
			:key="index" 
			:evaluateObj="item"
		></evaluationDetail>
	</view>
</template>

<script>
	import request from "@/utils/request";
	import evaluationDetail from "./evaluationDetail.nvue"
	export default {
		components: {
			evaluationDetail
		},
		data() {
			return {
				formData: {
					page: 1,
					limit: 2,
				},
				evaluateList: {
					count: 0,
					list: []
				}
			};
		},
		props: {
			evaluated_id: { type: Number },
			evaluated_type: { type: Number },
			order_shop_id: { type: Number },
			order_shop_type: { type: Number },
			order_id: { type: Number },
			search_type: { type: Number },
			listUrl:{
				type:String,
				default:"/user/orderEvaluate/list"
			}
		},
		mounted() {
			if (this.order_shop_id) this.formData.order_shop_id = this.order_shop_id;
			if (this.order_shop_type) this.formData.order_shop_type = this.order_shop_type;
			if (this.evaluated_type) this.formData.evaluated_type = this.evaluated_type;
			if (this.evaluated_id) this.formData.evaluated_id = this.evaluated_id;
			if (this.order_id) this.formData.order_id = this.order_id;
			if (this.search_type) this.formData.search_type = this.search_type;
			this.getList();
		},
		methods: {
			getList() {
				request.post(this.listUrl, this.formData).then(res => {
					this.evaluateList = res.data || { count: 0, list: [] };
				});
			},
			goList() {
				this.$emit("goList");
			}
		}
	};
</script>

<style>
	/* 容器样式：仅保留布局相关（margin、padding、flex等） */
	.evaluationList {
		background-color: #fff;
		overflow: hidden;
		margin: 0rpx 24rpx 20rpx 24rpx;
		border-radius: 16rpx;
	}
	
	/* 头部容器：显式设置flex方向为水平（解决nvue默认垂直的问题） */
	.evaluationList-header {
		padding: 0 20rpx;
		margin-top: 21rpx;
		margin-bottom: 6rpx;
		display: flex;
		flex-direction: row; /* 强制水平排列 */
		align-items: center;
		justify-content: space-between;
	}
	
	/* 左侧容器：仅布局，无文字样式 */
	.evaluationList-header-left {
		/* 文字样式已移到text标签 */
	}
	
	/* 左侧文字：所有文字样式直接写在这里 */
	.header-left-text {
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
	}
	
	/* 右侧容器：显式flex确保内部元素水平排列 */
	.evaluationList-header-right {
		display: flex;
		flex-direction: row; /* 强制水平排列 */
		align-items: center; /* 垂直居中对齐文字和图片 */
	}
	
	/* 右侧文字：所有文字样式直接写在这里 */
	.header-right-text {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 33rpx;
	}
	
	/* 右侧图片 */
	.header-right-img {
		width: 10rpx;
		height: 19rpx;
		margin-left: 10rpx;
		mode: widthFix; /* nvue图片必须指定mode */
	}
</style>