<template>
	<view class="home-page">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-box" @click="Service.GoPage('/pages/userFunc/goodsSearch')">
				<u-icon name="search" color="#999" size="18"></u-icon>
				<view class="search-center">
					<text class="search-placeholder">搜索宝贝</text>
				</view>
			</view>
		</view>

		<!-- 主内容 -->
		<view class="main-content">
			<!-- 轮播图 -->
			<view class="swiper-wrap">
				<up-swiper :list="swiperList" height="200" indicator indicatorMode="dot" circular radius="16"
					bgColor="#ffffff"></up-swiper>
			</view>

			<!-- 公告栏 -->
			<view class="notice-bar">
				<up-notice-bar :text="gonggao.fubiaoti "  bgColor='#fff' ></up-notice-bar>
				<text class="notice-more" @click="Service.GoPage('/pages/userFunc/noticeList')">更多</text>
			</view>

			<!-- 爆单商品横向滚动 -->
			<view v-if="scrollList.length>0" class="section-card preferred-section">
				<view class="section-header">
					<view class="header-left">
						<view class="section-icon">
							<u-icon name="heart-fill" color="#fff" size="16"></u-icon>
						</view>
						<text class="section-title">报单商品</text>
					</view>
				</view>
				<scroll-view scroll-x class="preferred-scroll" show-scrollbar="false">
					<view class="preferred-item" v-for="(item, index) in scrollList" :key="index"
						@click="goGoodsDetail(item.goodsId)">
						<view class="preferred-img-wrap">
							<image class="preferred-img" :src="item.goodsImg" mode="aspectFill"></image>
						</view>
						<view class="preferred-name">{{ item.goodsName }}</view>
						<view class="preferred-price-row">
							<text class="preferred-price">¥{{ item.price }}</text>
							<text class="preferred-old">¥{{ item.maxPrice }}</text>
						</view>

					</view>
				</scroll-view>
			</view>
			<!-- 商品瀑布流 -->
			<view class="goods-waterfall">
				<view class="waterfall-col">
					<view class="goods-card" v-for="(item, index) in leftList" :key="index"
						@click="goGoodsDetail(item.goodsId)">
						<view class="goods-img-wrap">
							<image class="goods-img" :src="item.goodsImg" mode="widthFix"></image>
							<view class="goods-label">{{ item.goodsType }}</view>
						</view>
						<view class="goods-info">
							<view class="goods-name">{{ item.goodsName }}</view>
							<view class="goods-price-row">
								<view class="price-wrap">
									<text class="goods-price">¥<text class="price-num">{{ item.price }}</text></text>
									<text class="goods-old">¥{{ item.maxPrice }}</text>
								</view>
								<text class="goods-sold">{{ item.sale }}人付款</text>
							</view>

						</view>
					</view>
				</view>
				<view class="waterfall-col">
					<view class="goods-card" v-for="(item, index) in rightList" :key="index"
						@click="goGoodsDetail(item.goodsId)">
						<view class="goods-img-wrap">
							<image class="goods-img" :src="item.goodsImg" mode="widthFix"></image>
							<view class="goods-label">{{ item.goodsType }}</view>
						</view>
						<view class="goods-info">
							<view class="goods-name">{{ item.goodsName }}</view>
							<view class="goods-tags" v-if="item.tags && item.tags.length">
								<text class="tag-text" v-for="(tag, tIndex) in item.tags" :key="tIndex">{{ tag }}</text>
							</view>
							<view class="goods-price-row">
								<view class="price-wrap">
									<text class="goods-price">¥<text class="price-num">{{ item.price }}</text></text>
									<text class="goods-old">¥{{ item.maxPrice }}</text>
								</view>
								<text class="goods-sold">{{ item.sale }}人付款</text>
							</view>

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

			<!-- 加载更多 -->
			<view v-if="leftList.length>0" class="load-more">
				<up-loadmore :status="status" />
			</view>
			<view v-else class="empty-state">
				<image :src="Service.GetpayImg('/static/userFunc/null.png')" class="empty-image" mode="aspectFit"></image>
				<text class="empty-title">暂无商品</text>
			</view>
		</view>

		<!-- 底部占位 -->
		<view class="bottom-placeholder"></view>
	</view>
</template>

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

	// 搜索值
	let searchValue = ref('');
	let status = ref('nomore');

	// 轮播图数据
	let swiperList = ref<Array<any>>([]);
	// 优选商品数据
	let scrollList =ref<Array<any>>([]);
	// 商品数据
	let leftList = ref<Array<any>>([]);
	let rightList = ref<Array<any>>([]);
	//公告数据
	let gonggao=ref<any>({});

	let page = ref(1) // 当前页码
	
	onLoad(() => {
		getData()
	});
	
	
	const getData = () => {
		rightList.value = []
		leftList.value = []
		page.value = 1
		status.value = 'loadmore'
		getList()
	}
	
	/**
	 * 加载商品列表数据
	 * 包含轮播图、优选商品和商品列表
	 */
	const getList = () => {
		// 防止重复加载
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'
	
		// 调用API获取商品数据
		GoodsService.GetGoodsList( page.value).then(res => {
			if (res.code == 0) {
				// 第一页时加载轮播图
				if (page.value == 1) {
					swiperList.value=[]
					res.data.bannerList.map((item : any) => {
						swiperList.value.push(Service.GetIconImg(item.url))
					})
				}
				// 第一页时加载优选商品
				if (page.value == 1) {
					scrollList.value = res.data.customsGoods
				}
				
				// 第一页时加载优选商品
				if (page.value == 1) {
					gonggao.value = res.data.gonggao
				}
				
				
				
				
				
	
				// 将商品列表分为左右两列
				res.data.goodsList.map((item : any, index : any) => {
					if (index % 2 == 1) {
						rightList.value.push(item)
					} else {
						leftList.value.push(item)
					}
				})
	
				// 更新加载状态
				status.value = res.data.goodsList.length == 10 ? 'loadmore' : 'nomore'
				page.value++
	
				
			} else {
				Service.Msg(res.msg)
				
			}
		})
	}
	
	
	
	

	const goGoodsDetail = (goodsId : number) => {
		Service.GoPage('/pages/webView/goodsDetail?goodsId=' + goodsId);
		// Service.GoPage('/pages/webView/goodsDetail?goodsId=' + goodsId);
	};

	const onCategoryClick = (item : any) => {
		Service.Msg('点击了 ' + item.name);
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.home-page {
		position: relative;
	}

	/* 搜索栏 */
	.search-bar {
		position: relative;
		z-index: 10;
		padding: 20rpx 30rpx;
		padding-top: 60rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 40rpx;
		padding: 14rpx 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.search-center {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 12rpx;
		gap: 12rpx;
	}

	.search-placeholder {
		color: #999;
		font-size: 28rpx;
	}

	.search-hot {
		font-size: 20rpx;
		color: #FF6A00;
		background: rgba(255, 106, 0, 0.1);
		padding: 2rpx 10rpx;
		border-radius: 8rpx;
	}

	.search-msg {
		position: relative;
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		backdrop-filter: blur(10rpx);
	}

	.msg-badge {
		position: absolute;
		top: 0;
		right: 0;
		background: #FF3D3D;
		color: #fff;
		font-size: 18rpx;
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	/* 主内容 */
	.main-content {
		position: relative;
		z-index: 5;
		padding: 0 20rpx;
	}

	/* 轮播图 */
	.swiper-wrap {
		margin-top: 10rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(255, 106, 0, 0.15);
	}

	/* 公告栏 */
	.notice-bar {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 16rpx;
		padding: 0 20rpx;
		margin-top: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.notice-scroll {
		flex: 1;
		margin-left: 12rpx;
		overflow: hidden;
	}

	.notice-text {
		font-size: 24rpx;
		color: #333;
		white-space: nowrap;
	}

	.notice-more {
		font-size: 22rpx;
		color: #FF6A00;
		margin-left: 12rpx;
		font-weight: 500;
	}

	/* 分类宫格 */
	.category-grid {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 10rpx 20rpx;
		margin-top: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.category-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
		transition: transform 0.2s;
	}

	.category-item:active {
		transform: scale(0.95);
	}

	.category-icon-wrapper {
		width: 84rpx;
		height: 84rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
	}

	.category-name {
		font-size: 24rpx;
		color: #444;
		font-weight: 500;
	}

	/* 活动入口 */
	.activity-bar {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		gap: 12rpx;
	}

	.activity-item {
		flex: 1;
		border-radius: 20rpx;
		padding: 20rpx;
		position: relative;
		overflow: hidden;
		min-height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
	}

	.activity-content {
		position: relative;
		z-index: 2;
	}

	.activity-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		position: relative;
		z-index: 2;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.activity-desc {
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.95);
		margin-top: 6rpx;
		position: relative;
		z-index: 2;
		background: rgba(255, 255, 255, 0.2);
		display: inline-block;
		padding: 2rpx 10rpx;
		border-radius: 8rpx;
	}

	.activity-img {
		position: absolute;
		bottom: -10rpx;
		right: -10rpx;
		width: 110rpx;
		height: 110rpx;
		opacity: 0.25;
		z-index: 1;
	}

	.activity-tag {
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.9);
		color: #FF3D3D;
		font-size: 18rpx;
		font-weight: bold;
		padding: 4rpx 12rpx;
		border-radius: 0 20rpx 0 12rpx;
		z-index: 3;
	}

	/* 优选商品 */
	.section-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx 20rpx;
		margin-top: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.section-icon {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background: linear-gradient(to right, #FF3D3D, #FF6A00);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-left: 6rpx;
	}

	.header-right {
		display: flex;
		align-items: center;
	}

	.section-more {
		font-size: 24rpx;
		color: #999;
		margin-right: 4rpx;
	}

	.preferred-scroll {
		white-space: nowrap;
	}

	.preferred-item {
		display: inline-block;
		width: 240rpx;
		margin-right: 20rpx;
		vertical-align: top;
	}

	.preferred-img-wrap {
		position: relative;
		width: 240rpx;
		height: 240rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #f5f5f5;
	}

	.preferred-img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 16rpx;
		background-color: #f5f5f5;
	}

	.preferred-discount {
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(to right, #FF3D3D, #FF6A00);
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		padding: 4rpx 12rpx;
		border-radius: 16rpx 0 16rpx 0;
		z-index: 2;
	}

	.preferred-name {
		font-size: 24rpx;
		color: #333;
		margin-top: 12rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 500;
	}

	.preferred-price-row {
		margin-top: 8rpx;
		display: flex;
		align-items: baseline;
		gap: 8rpx;
	}

	.preferred-price {
		font-size: 30rpx;
		font-weight: bold;
		color: #FF3D3D;
	}

	.preferred-old {
		font-size: 22rpx;
		color: #bbb;
		text-decoration: line-through;
	}

	.preferred-progress {
		margin-top: 10rpx;
	}

	.progress-bar {
		width: 100%;
		height: 12rpx;
		background: #f0f0f0;
		border-radius: 6rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(to right, #FF3D3D, #FF6A00);
		border-radius: 6rpx;
		transition: width 0.5s ease;
	}

	.progress-text {
		font-size: 18rpx;
		color: #999;
		margin-top: 4rpx;
	}

	/* 猜你喜欢 */
	.guess-header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 36rpx;
		margin-bottom: 24rpx;
		gap: 12rpx;
	}

	.guess-icon {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background: linear-gradient(to right, #FF6A00, #FF9A56);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(255, 106, 0, 0.3);
	}

	.guess-line {
		width: 60rpx;
		height: 2rpx;
		background: linear-gradient(to right, transparent, #ddd);
	}

	.guess-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	/* 商品瀑布流 */
	.goods-waterfall {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.waterfall-col {
		width: 48.5%;
		display: flex;
		flex-direction: column;
	}

	.goods-card {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.goods-card:active {
		transform: scale(0.98);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	}

	.goods-img-wrap {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.goods-img {
		width: 100%;
		display: block;
		background-color: #f5f5f5;
	}

	.goods-label {
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(135deg, #FF6A00, #FF4500);
		color: #fff;
		font-size: 20rpx;
		font-weight: 600;
		padding: 6rpx 14rpx;
		border-radius: 0 0 16rpx 0;
		z-index: 1;
	}

	.goods-rank {
		position: absolute;
		top: 12rpx;
		left: 12rpx;
		background: rgba(0, 0, 0, 0.6);
		color: #FFD700;
		font-size: 20rpx;
		font-weight: bold;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		gap: 4rpx;
		backdrop-filter: blur(4rpx);
	}

	.goods-info {
		padding: 18rpx;
	}

	.goods-name {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 500;
	}

	.goods-tags {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
		gap: 8rpx;
	}

	.tag-text {
		font-size: 20rpx;
		color: #FF6A00;
		border: 1rpx solid rgba(255, 106, 0, 0.3);
		padding: 2rpx 10rpx;
		border-radius: 8rpx;
		background: rgba(255, 106, 0, 0.05);
	}

	.goods-price-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 14rpx;
	}

	.price-wrap {
		display: flex;
		align-items: baseline;
		gap: 8rpx;
	}

	.goods-price {
		font-size: 24rpx;
		color: #FF3D3D;
		font-weight: bold;
	}

	.price-num {
		font-size: 34rpx;
	}

	.goods-old {
		font-size: 22rpx;
		color: #bbb;
		text-decoration: line-through;
	}

	.goods-sold {
		font-size: 20rpx;
		color: #999;
	}

	.goods-shop {
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		gap: 6rpx;
	}

	.shop-tag {
		font-size: 18rpx;
		color: #fff;
		background: linear-gradient(to right, #FF3D3D, #FF6A00);
		padding: 2rpx 8rpx;
		border-radius: 6rpx;
		font-weight: 500;
	}

	.shop-name {
		font-size: 22rpx;
		color: #999;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 加载更多 */
	.load-more {
		padding: 30rpx 0;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 40rpx;
		margin: 20rpx 30rpx 0;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	.empty-image {
		width: 260rpx;
		height: 260rpx;
		margin-bottom: 16rpx;
		opacity: 0.85;
	}

	.empty-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 12rpx;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #999;
	}

	.bottom-placeholder {
		width: 100%;
		height: 120rpx;
	}
</style>