<template>
	<view class="review-management-page">
		<!-- 全新方案：纯 CSS 手动构建的骨架屏 -->
		<view v-if="loading" class="skeleton-wrapper">
			<view class="skeleton-card" style="height: 150rpx;"></view>
			<view class="skeleton-tabs">
				<view class="skeleton-item skeleton-text" style="width: 100%; height: 44rpx;"></view>
			</view>
			<view v-for="i in 3" :key="i" class="skeleton-card">
				<view class="skeleton-item skeleton-text" style="width: 100%; height: 300rpx;"></view>
			</view>
		</view>

		<!-- 页面实际内容 -->
		<view v-else class="page-content" >

			<!-- 1. 数据看板 -->
			<view class="summary-card">
				<view class="data-item">
					<view class="value"><text class="score">{{ satisfaction }}%</text><up-icon name="star-fill"
							color="#ff9900" size="20"></up-icon></view>
					<text class="label">满意度</text>
				</view>
				<view class="data-item">
					<text class="value">{{total}}</text>
					<text class="label">总评价数</text>
				</view>
			</view>

			<!-- 2. Tabs 切换 -->
			<view class="sticky-tabs-wrapper">
				<up-tabs :list="reviewTabs" :current="currentTab" @change="onTabChange" lineColor="#fa6400"
					:activeStyle="{ color: '#fa6400', fontWeight: 'bold' }" :inactiveStyle="{ color: '#666' }">
				</up-tabs>
			</view>

			<view class="review-list">
				<view class="review-card" v-for="review in reviewList" :key="review">
					<view class="reviewer-info">
						<text class="name" style="font-weight: bold;" >{{ review.nick }}</text>
						<up-rate v-model="review.source" readonly activeColor="#ff9900" size="16"></up-rate>
						<text class="time">{{ Service.formatDate(review.addTime,1) }}</text>
					</view>
					<text class="review-text">{{ review.sign }}</text>
				</view>

				<up-loadmore status="nomore" nomoreText="没有更多评价了"></up-loadmore>
				<view class="" style="width: 100%; height: 20rpx;" >
					
				</view>
			</view>
		</view>
	</view>


</template>

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


	const loading = ref<boolean>(true);
	const currentTab = ref<number>(0);


	let satisfaction = ref(0)
	let status = ref('nomore')
	let page = ref(1)

	
	let review = ref('')

	let storeInfo = ref<any>()
	let total = ref(0)

	const reviewTabs = ref([
		{ name: '全部' }, { name: '好评' }, { name: '差评' }
	]);

	const reviewList = ref<Array<any>>([]);

	let currentId = ref('')

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

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

	// 获取数据
	const getData = () => {
		status.value = 'loadmore'
		page.value = 1
		reviewList.value = []
		getList()
	}


	const getList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'
		CNRiderDataService.GetRiderEvaluate(currentTab.value, page.value).then(res => {
			loading.value = false
			if (res.data) {
				satisfaction.value = res.data.satisfaction
				total.value=res.data.total
				reviewList.value = [...reviewList.value, ...res.data.evaluateList]
				page.value++
				status.value = res.data.evaluateList == 10 ? 'loadmore' : 'nomore'
			}
		})
	}


	const onTabChange = (e : { index : number }) => {
		currentTab.value = e.index;
		getData()
	};

	const replyTo = () => {

		if (review.value == '') {
			return
		}

	};
</script>

<style lang="scss" scoped>
	
	page{
		background-color: #f6f6f6;
	}
	
	@keyframes skeleton-blink {
		0% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0 50%;
		}
	}

	.skeleton-item {
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: skeleton-blink 1.5s infinite linear;
	}

	.skeleton-rect {
		border-radius: 12rpx;
	}

	.skeleton-text {
		border-radius: 4rpx;
	}

	.skeleton-wrapper {
		padding: 24rpx;
		background-color: #f7f7f7;

		.skeleton-tabs {
			padding: 20rpx 0;
			background-color: #fff;
		}

		.skeleton-card {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
		}
	}

	.review-management-page {
		
	}

	.summary-card {
		display: flex;
		justify-content: space-around;
		text-align: center;
		background-color: #fff8f5;
		border-radius: 16rpx;
		padding: 30rpx;
		margin: 24rpx;

		.data-item {
			.value {
				font-size: 40rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4rpx;
			}

			.label {
				font-size: 24rpx;
				color: #999;
				margin-top: 8rpx;
				display: block;
			}

			.text-red {
				color: #fa5151;
			}
		}
	}

	.sticky-tabs-wrapper {
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: #fff;

		:deep(.up-tabs__wrapper__nav__item) {
			flex: 1;
		}

		:deep(.up-tabs__wrapper__nav) {
			position: relative;

			.unread-badge {
				position: absolute;
				top: 16rpx;
				right: 20rpx;
				background-color: #fa5151;
				color: #fff;
				font-size: 20rpx;
				min-width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				border-radius: 16rpx;
				text-align: center;
				padding: 0 8rpx;
			}
		}
	}

	.review-list {
		padding: 24rpx;

		.review-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 24rpx;

			&.bad-review {
				border: 1rpx solid #fef0f0;
			}

			.reviewer-info {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.name {
					font-size: 30rpx;
					font-weight: 500;
				}

				.time {
					font-size: 24rpx;
					color: #999;
					margin-left: auto;
				}
			}

			.review-text {
				font-size: 28rpx;
				color: #333;
				margin: 20rpx 0;
				display: block;
				line-height: 1.6;
			}

			.review-images {
				display: flex;
				gap: 16rpx;

				.image-placeholder {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					border-radius: 8rpx;
				}
			}

			.merchant-reply {
				display: flex;
				align-items: center;
				gap: 12rpx;
				background-color: #f5f5f5;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-top: 20rpx;
				font-size: 26rpx;

				.reply-label {
					color: #fa6400;
					font-weight: 500;
				}

				.reply-text {
					color: #666;
				}
			}

			.reply-action {
				text-align: right;
				margin-top: 20rpx;

				text {
					display: inline-block;
					border: 1rpx solid #fa6400;
					color: #fa6400;
					font-size: 26rpx;
					padding: 8rpx 24rpx;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>