<template>
	<view class="recommend-section" v-if="loading || hasContent">
		<!-- 骨架屏：固定占位高度，避免数据到达后布局拉伸闪烁 -->
		<view class="recommend-skeleton" v-show="loading && !hasContent">
			<view class="recommend-layout">
				<view class="sk-block-left"></view>
				<view class="sk-block-right">
					<view class="sk-block-small" v-for="i in 2" :key="'sk-' + i">
						<view class="sk-head">
							<view class="sk-title"></view>
							<view class="sk-more"></view>
						</view>
						<view class="sk-body">
							<view class="sk-item" v-for="j in 2" :key="'sk-item-' + j">
								<view class="sk-thumb"></view>
								<view class="sk-price"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-show="hasContent">
		<!-- 平均分（占位，无数据时显示 —） -->
		<view class="score-row" v-if="showScore">
			<text class="score-label">平均分</text>
			<text class="score-value">{{ averageScore != null ? averageScore : '—' }}</text>
		</view>

		<view class="recommend-layout">
			<!-- 左侧：直播卡片轮播，自动滚动 + 可手动左右滑动，右上角 当前index/总数量 -->
			<view class="block-left-wrap" v-if="liveList.length > 0" @click="onLive">
				<swiper class="live-swiper" :current="liveCurrent" circular :indicator-dots="false" :autoplay="true"
					:interval="3000" :duration="1000" indicator-color="rgba(255, 255, 255, 0.6)"
					indicator-active-color="#ffffff" @change="onLiveSwiperChange">
					<!-- <swiper-item v-for="(item, idx) in liveList" :key="idx" @click="onLiveClick(item)">
						<view class="block-left">
							<view class="x-c" :class="['block-label', isLiving(item) ? 'live' : 'replay']">
								<image class="w24 h24"
									:src="isLiving(item) ? '/static/images/live.gif' : '/static/images/replay.png'"
									mode="aspectFill"></image>
								{{ isLiving(item) ? '直播中' : '回放' }}
							</view>
							<image class="block-img" :src="item.liveImgUrl" mode="aspectFill"></image>
							<view class="block-tit">
								<image class="item-avatar" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/share.png" mode="aspectFill"></image>
								<view class="item-title one-t">{{ item.liveName }}</view>
							</view>
						</view>
					</swiper-item> -->
					<swiper-item>
						<view class="block-left">
							<image class="block-img" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/image/yuanxiangxing.png" mode="aspectFill"></image>
							<view class="block-title one-t">央广会客厅</view>
						</view>
					</swiper-item>
				</swiper>
				<!-- <view class="swiper-dots" v-if="liveList.length > 1">
					<text v-for="(dot, index) in liveList.length" :key="'live-dot-' + index"
						:class="liveCurrent === index ? 'dot-active' : 'dot'"></text>
				</view> -->
			</view>

			<!-- 右侧：上 绿色有机，下 上新推荐 -->
			<view class="block-right">
				<view class="block-small">
					<view class="block-small-head">
						<image class="w140" src="@/static/images/new.png" mode="widthFix"></image>
						<view class="more" @click.stop="goMore('hot')">
							<text class="green">更多</text>
							<u-icon name="play-right-fill" color="#FF5B25" size="24rpx"></u-icon>
						</view>
					</view>
					<view class="block-small-body">
						<view class="small-item" v-for="row in hotItems" :key="row.key"
							@click.stop="onItemClick(row.item, 'hot')">
							<view class="small-thumb-wrap">
								<image
									v-if="row.src"
									class="small-thumb"
									mode="aspectFill"
									:src="row.src"
								></image>
							</view>
							<view>
								<text class="unit">¥</text>
								<text class="small-price" v-if="row.item.price != null">{{ Number(row.item.price).toFixed(2)
									}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="block-small">
					<view class="block-small-head">
						<image class="w140" src="@/static/images/hot.png" mode="widthFix"></image>
						<view class="more" @click.stop="goMore('green')">
							<text class="hot">更多</text>
							<u-icon name="play-right-fill" color="#FF485D" size="24rpx"></u-icon>
						</view>
					</view>
					<view class="block-small-body">
						<view class="small-item" v-for="row in greenItems" :key="row.key"
							@click.stop="onItemClick(row.item, 'green')">
							<view class="small-thumb-wrap">
								<image
									v-if="row.src"
									class="small-thumb"
									mode="aspectFill"
									:src="row.src"
								></image>
							</view>
							<view>
								<text class="unit">¥</text>
								<text class="small-price" v-if="row.item.price != null">{{ Number(row.item.price).toFixed(2)
									}}</text>
							</view>

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

<script>
export default {
	name: 'RecommendSection',
	props: {
		live: { type: Array, default: () => [] },
		green: { type: Array, default: () => [] },
		hot: { type: Array, default: () => [] },
		loading: { type: Boolean, default: false },
		averageScore: { type: [String, Number], default: null },
		showScore: { type: Boolean, default: false }
	},
	computed: {
		hasContent() {
			return (this.live && this.live.length > 0) || (this.green && this.green.length > 0) || (this.hot && this.hot.length > 0)
		},
		liveList() {
			return this.live && this.live.length > 0 ? this.live : []
		},
		liveCurrentDisplay() {
			return this.liveList.length > 0 ? this.liveCurrent + 1 : 0
		},
		hotItems() {
			return this.buildThumbRows(this.hot, 'hot')
		},
		greenItems() {
			return this.buildThumbRows(this.green, 'green')
		}
	},
	data() {
		return {
			liveCurrent: 0,
			thumbSrcMap: {}
		}
	},
	watch: {
		hot: { handler: 'preloadThumbs', deep: true },
		green: { handler: 'preloadThumbs', deep: true }
	},
	mounted() {
		this.preloadThumbs()
	},
	methods: {
		thumbKey(type, item, index) {
			const id = item && item.productId
			return id ? `${type}-${id}` : `${type}-${index}`
		},
		buildThumbRows(list, type) {
			return (list || []).slice(0, 2).map((item, index) => {
				const key = this.thumbKey(type, item, index)
				return { key, item, src: this.thumbSrcMap[key] || '' }
			})
		},
		preloadThumbs() {
			const pending = []
			;[
				{ type: 'hot', list: this.hot },
				{ type: 'green', list: this.green }
			].forEach(({ type, list }) => {
				;(list || []).slice(0, 2).forEach((item, index) => {
					const key = this.thumbKey(type, item, index)
					const src = this.getFirstImage(item)
					if (!src) {
						if (this.thumbSrcMap[key]) this.$delete(this.thumbSrcMap, key)
						return
					}
					if (this.thumbSrcMap[key] === src) return
					if (this.thumbSrcMap[key]) this.$delete(this.thumbSrcMap, key)
					pending.push({ key, src })
				})
			})
			pending.forEach(({ key, src }) => {
				uni.getImageInfo({
					src,
					success: () => {
						this.$set(this.thumbSrcMap, key, src)
					},
					fail: () => {
						this.$set(this.thumbSrcMap, key, src)
					}
				})
			})
		},
	onLive(){
		uni.showToast({
			title: '暂无信息',
			icon: 'none'
		})
		 //uni.navigateTo({ url: '/pages_course/livingList' })
	},
		onLiveSwiperChange(e) {
			this.liveCurrent = e.detail.current
		},
		isLiving(item) {
			if (!item) return false
			if (item.liveType === 1) return true
			if (item.liveType === 2 && item.liveFlag === 1) return true
			return false
		},
		onLiveClick(item) {
			//console.log(item)
			this.$emit('liveClick', item)
		},
		goMore(type) {
			this.$emit('more', { type })
		},
		onItemClick(item, type) {
			//this.$emit('itemClick', { item, section: { type } })
			this.$emit('itemClick', item,type)
		},
		// 取 sliderImage 逗号拼接的第一张图，没有则用 image
		getFirstImage(item) {
			if (!item) return ''
			const str = item.sliderImage || item.image || ''
			if (typeof str !== 'string') return item.image || ''
			const first = str.split(',')[0]
			return (first && first.trim()) || item.image || ''
		}
	}
}
</script>

<style lang="scss" scoped>
.recommend-section {
	margin: 30rpx 24rpx 40rpx;
}

.score-row {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
	font-size: 26rpx;
}

.score-label {
	color: #666;
	margin-right: 12rpx;
}

.score-value {
	color: #333;
	font-weight: 600;
}

.recommend-layout {
	display: flex;
	align-items: stretch;
	gap: 20rpx;
}

.block-left-wrap {
	flex: 1;
	flex-shrink: 0;
	align-self: stretch;
	min-height: 0;
	border-radius: 24rpx;
	overflow: hidden;
	position: relative;
}

.live-swiper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.block-left {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #f5f5f5;
	position: relative;
}

.live-index-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 22rpx;
	padding: 8rpx 16rpx;
	border-radius: 0 0 0 12rpx;
}

.block-label {
	position: absolute;
	top: 20rpx;
	left: 0;
	z-index: 2;
	color: #fff;
	font-size: 24rpx;
	padding: 8rpx 20rpx;
	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
	border-radius: 0rpx 8rpx 8rpx 0rpx;

	image {
		margin-right: 4rpx;
	}
}

// .block-label.live {
// 	background: #E5212B;
// }
// .block-label.replay {
// 	background: #666;
// }
.block-img {
	width: 100%;
	height: 100%;
	display: block;
}

.block-title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 26rpx;
	padding: 16rpx;
}
.block-tit {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 26rpx;
	padding: 16rpx 16rpx 50rpx;

	.item-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.item-title {
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 44rpx;
	}
}
.swiper-dots {
	display: flex;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 12rpx;
	z-index: 3;
	gap: 6rpx;
}

.dot {
	width: 8rpx;
	height: 8rpx;
	background: #FFFFFF;
	opacity: 0.7;
	border-radius: 4rpx;
}

.dot-active {
	width: 16rpx;
	height: 8rpx;
	background: #FFFFFF;
	border-radius: 4rpx;
}

.block-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	min-width: 0;
}

.block-small {
	flex: 1;
	background: linear-gradient(180deg, #FFC7A7 0%, #FFF8F3 36.36%, #FFFFFF 100%);
	border-radius: 24rpx;
	overflow: hidden;
	padding: 16rpx;

	&:last-child {
		background: linear-gradient(180deg, #FFC5C5 0%, #FFF5F5 36.36%, #FFFFFF 100%);
	}
}

.block-small-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18rpx;
}

.block-small-title {
	font-size: 28rpx;
	font-weight: 600;
}

.green {
	color: #FF5B25;
}

.hot {
	color: #FF485D;
}

.more {
	display: flex;
	align-items: center;
	font-size: 28rpx;

	text {
		margin-right: 5rpx;
	}

	// color: #999;
}

.arrow {
	margin-left: 4rpx;
	font-size: 28rpx;
}

.block-small-body {
	display: flex;
	// gap: 16rpx;
}

.small-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.small-thumb-wrap {
	width: 110rpx;
	height: 110rpx;
	border-radius: 10rpx;
	background: #f0f0f0;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}

.small-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.unit {
	font-weight: 600;
	font-size: 20rpx;
	color: #FF233C;
	margin-top: 8rpx;
	margin-right: 4rpx;
}

.small-price {
	font-size: 32rpx;
	font-weight: 600;
	color: #FF233C;
	margin-top: 8rpx;
}

.sk-block-left {
	flex: 1;
	flex-shrink: 0;
	align-self: stretch;
	min-height: 0;
	border-radius: 24rpx;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
}

.sk-block-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	min-width: 0;
}

.sk-block-small {
	flex: 1;
	min-height: 200rpx;
	border-radius: 24rpx;
	padding: 16rpx;
	background: #fff;
	overflow: hidden;
}

.sk-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18rpx;
}

.sk-title {
	width: 140rpx;
	height: 36rpx;
	border-radius: 8rpx;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
}

.sk-more {
	width: 80rpx;
	height: 28rpx;
	border-radius: 6rpx;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
}

.sk-body {
	display: flex;
}

.sk-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sk-thumb {
	width: 110rpx;
	height: 110rpx;
	border-radius: 10rpx;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
}

.sk-price {
	width: 72rpx;
	height: 28rpx;
	margin-top: 16rpx;
	border-radius: 6rpx;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
</style>
