<template>
	<view class="page">
		<!-- 评价分类标签 -->
		<view class="evaluation-tabs">
			<up-tabs :list="tabList" :current="currentTab" @click="handleTabChange" :scrollable='false'
				lineColor='var(--nav-mian)' lineWidth='50'
				:activeStyle="{color: 'var(--nav-mian)',fontWeight: 'bold',transform: 'scale(1.05)'}"
				:inactiveStyle="{color: '#606266',transform: 'scale(1)'}"
				itemStyle=" padding-left: 30rpx; padding-right: 30rpx;  height: 34px;"></up-tabs>
		</view>

		<!-- 评价列表 -->
		<view class="evaluation-list">
			<view class="evaluation-item" v-for="(item, index) in evaluations" :key="index">
				<!-- 商品信息 -->

				<view class="" style=" display: flex;align-items: start;">
					<view class="goods-info">
						<image :src="Service.GetMateUrlByImg(item.goodsImg)" mode="aspectFill" class="goods-image">
						</image>
					</view>

					<!-- 评价内容 -->
					<view class="evaluation-content">
						<view class="" style="display: flex; align-items: start;">
							<view class="goods-details">
								<text class="goods-name">{{ item.goodsName }}</text>
							</view>
							<u-icon name="trash" size="40rpx" color="#CCCCCC" class="delete-icon"
								@click="deleteEvaluation(item)"></u-icon>
						</view>
						<!-- 星级评分 -->
						<view class="" style="display: flex; align-items: baseline;  gap: 10rpx;">
							<up-rate v-model="item.source" style="margin-top: 15rpx;" gutter='2' size="28rpx"
								:allowHalf='true' active-color="#FF8C00" :readonly="true"></up-rate>
							<view class="" style="color:#FF8C00 ;  font-size: 24rpx; font-weight: bold;">
								{{Number(item.source).toFixed(1) }}
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<!-- 评价文字 -->
					<view class="" style="padding: 20rpx; background-color: #f1f1f1; border-radius: 20rpx;">
						<text class="evaluation-text">{{ item.remark }}</text>

						<!-- 评价图片 -->
						<view class="evaluation-images" v-if="item.imgs">
							<image :src="Service.GetMateUrlByImg(img)" mode="aspectFill" class="evaluation-img"
								v-for="(img, imgIndex) in JSON.parse(item.imgs)" :key="imgIndex"></image>
						</view>
					</view>

					<!-- 评价信息 -->
					<view class="evaluation-meta"  >
						<view class="">
							
						</view>
						<text class="evaluation-date">{{ Service.formatDate(item.addTime, 1) }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="evaluations.length === 0">
			<image :src="Service.GetpayImg('/static/userFunc/null.png')"  />
			<text class="empty-text">暂无评价</text>
		</view>

		<up-loadmore v-if="evaluations.length !== 0" :status="status" />
		<view class="" style="width: 100%; height: 80rpx;">

		</view>
	</view>
</template>

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

	// 评价分类标签
	const tabList = ref([
		{ name: '全部' },
		{ name: '好评' },
		{ name: '中评' },
		{ name: '差评' }
	]);

	// 当前选中的标签
	const currentTab = ref(0);
	let page = ref(1);
	let status = ref('nomore');
	let viewCount = ref(0);

	// 评价列表数据
	const evaluations = ref<Array<any>>([]);

	onLoad(() => {
		getData();
	});

	onReachBottom(() => {
		getList();
	});

	// 处理标签切换
	const handleTabChange = (index : any) => {
		currentTab.value = index.index;
		getData();
	};

	const getData = () => {
		evaluations.value = [];
		page.value = 1;
		status.value = 'loadmore';
		getList();
	};

	const getList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return;
		}
		status.value = 'loading';

		let source = 0;
		if (currentTab.value == 1) source = 1;
		else if (currentTab.value == 2) source = 2;
		else if (currentTab.value == 3) source = 3;

		UserService.GetUserEvaluateList(source, page.value).then(res => {
			if (res.code == 0) {
				evaluations.value = [...evaluations.value, ...res.data.list];
				if (res.data.viewCount) {
					viewCount.value = res.data.viewCount;
				}
				status.value = res.data.list.length == 10 ? 'loadmore' : 'nomore';
				page.value++;
			} else {
				Service.Msg(res.msg);
			}
		});
	};

	// 删除评价
	const deleteEvaluation = (item : any) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这条评价吗？',
			success: (res) => {
				if (res.confirm) {
					UserService.DelUserEvaluate(item.geId).then(res=>{
						if (res.code == 0) {
							Service.Msg(res.data)
							getData()
						} else {
							Service.Msg(res.msg);
						}
					})
				}
			}
		});
	};
</script>

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

	/* 浏览统计样式 */
	.view-stats {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: end;
		background-color: #fff;
	}

	.stats-text {
		font-size: 26rpx;
		color: #4B5563;
		margin-left: 10rpx;
	}

	/* 评价分类标签样式 */
	.evaluation-tabs {
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	/* 评价列表样式 */
	.evaluation-list {
		padding: 0 30rpx 20rpx;
	}

	.evaluation-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;

	}

	/* 商品信息样式 */
	.goods-info {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.goods-image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}

	.goods-details {
		flex: 1;
	}

	.goods-name {
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.goods-price {
		font-size: 28rpx;
		color: #6B7280;
		font-weight: 600;
	}

	.delete-icon {
		margin-left: 20rpx;
	}

	/* 评价内容样式 */
	.evaluation-content {
		width: 100%;
	}

	.evaluation-text {
		font-size: 26rpx;
		color: #333333;
		line-height: 48rpx;
		display: block;
		white-space: pre-wrap;
	}

	/* 评价图片样式 */
	.evaluation-images {
		display: flex;
		flex-wrap: wrap;
	}

	.evaluation-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
	}

	/* 评价信息样式 */
	.evaluation-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;
	}

	.evaluation-date {
		font-size: 26rpx;
		color: #999999;
	}

	.evaluation-actions {
		display: flex;
		align-items: center;
	}

	.hot-tag {
		font-size: 26rpx;
		color: #FF6600;
		margin-right: 24rpx;
		display: flex;
		align-items: center;
	}

	.edit-btn {
		font-size: 26rpx;
		color: #FF6600;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 120rpx;

		img {
			width: 200rpx;
			height: 200rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
			margin-top: 30rpx;
		}
	}
</style>