<template>
	<view class="search-page">
		

		<!-- 搜索结果 -->
		<view class="search-content">
			<view v-if="leftList.length > 0" class="goods-waterfall">
				<view class="waterfall-col">
					<view class="goods-card" v-for="(item, index) in leftList" :key="index"
						@click="Service.GoPage('/pages/webView/goodsDetail?goodsId='+item.goodsId)">
						<view class="goods-img-wrap">
							<image :src="Service.GetMateUrlByImg(item.goodsImg)" mode="widthFix" class="goods-img"></image>
						</view>
						<view class="goods-info">
							<text class="goods-name">{{ item.goodsName }}</text>
							<view class="goods-price-row">
								<text class="goods-price">¥<text class="price-num">{{ item.price }}</text></text>
							</view>
						</view>
					</view>
				</view>
				<view class="waterfall-col">
					<view class="goods-card" v-for="(item, index) in rightList" :key="index"
						@click="Service.GoPage('/pages/webView/goodsDetail?goodsId='+item.goodsId)">
						<view class="goods-img-wrap">
							<image :src="Service.GetMateUrlByImg(item.goodsImg)" mode="widthFix" class="goods-img"></image>
						</view>
						<view class="goods-info">
							<text class="goods-name">{{ item.goodsName }}</text>
							<view class="goods-price-row">
								<text class="goods-price">¥<text class="price-num">{{ item.price }}</text></text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-else class="empty-state">
				<image :src="Service.GetpayImg('/static/userFunc/null.png')" class="empty-image"></image>
				<text class="empty-text">暂无相关商品</text>
			</view>

			<view class="load-more" v-if="leftList.length > 0">
				<up-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>

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

	let page = ref(1)
	let status = ref('nomore')
	let leftList = ref<Array<any>>([])
	let rightList = ref<Array<any>>([])
	let search = ref('')

	onLoad((data: any) => {
		search.value = data.name
		
		uni.setNavigationBarTitle({
			title: search.value
		})
		getData()
	});

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

	const getList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'
		GoodsService.GetSerchGoodsList(search.value, page.value).then(res => {
			if (res.code == 0) {
				res.data.list.map((item: any, index: any) => {
					if (index % 2 == 1) {
						rightList.value.push(item)
					} else {
						leftList.value.push(item)
					}
				})
				status.value = res.data.list.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	
</script>

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

	.search-page {
		min-height: 100vh;
		background: #F8F9FA;
	}

	/* ===== 搜索栏 ===== */
	.search-bar {
		background: #fff;
		padding: 16rpx 20rpx;
		padding-top: calc(16rpx + env(safe-area-inset-top));
		position: relative;
		z-index: 10;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.search-bar-inner {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.search-input-wrap {
		flex: 1;
	}

	/* ===== 搜索结果 ===== */
	.search-content {
		padding: 20rpx 20rpx 0;
	}

	/* ===== 商品瀑布流 ===== */
	.goods-waterfall {
		display: flex;
		gap: 16rpx;
	}

	.waterfall-col {
		width: 50%;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

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

	.goods-card:active {
		transform: scale(0.97);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}

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

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

	.goods-info {
		padding: 16rpx 16rpx 20rpx;
	}

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

	.goods-price-row {
		margin-top: 12rpx;
		display: flex;
		align-items: center;
	}

	.goods-price {
		font-weight: 700;
		font-size: 28rpx;
		color: #FF6A00;
	}

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

	/* ===== 空状态 ===== */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 160rpx 20rpx;
	}

	.empty-image {
		width: 280rpx;
		height: 280rpx;
		margin-bottom: 24rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 28rpx;
		color: #C0C4CC;
		font-weight: 500;
	}

	/* ===== 加载更多 ===== */
	.load-more {
		margin-top: 20rpx;
		padding-bottom: 40rpx;
	}
</style>
