<template>
	<view class="components">
		<!-- 推荐区域 -->
		<view class="user_title" v-if="apiType == 5">
			<text class="user_name">为您推荐</text>
		</view>
		
		<!-- 商品区域 -->
		<view class="shop_view" v-if="shopList.length">
			<view class="shop_view_ul">
				<block v-for="(item,index) in shopList" :key="item.id">
					<block v-if="item.isEven">
						<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
							<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
								<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
									<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" @load="imageLoad" lazy-load  @click="JumpType(swiperitem)"></image>
								</swiper-item>
							</swiper>
						</view>
						<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
							<view class="shop_view_img">
								<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
								<view class="shop_view_img_u">
									<image class="shop_view_img_url" :src="item.image"  mode="widthFix" lazy-load="true"></image>
								</view>
							</view>
							<view class="shop_view_cont">
								<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
								<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
								<view class="shop_view_cont_tag">
									<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
									<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
								</view>
								<view class="shop_view_cont_bottom">
									<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
									<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
										<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</block>
				</block>
			</view>
			<view class="shop_view_ul">
				<block v-for="(item,index) in shopList" :key="item.id">
					<block v-if="!item.isEven">
						<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
							<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
								<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
									<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" lazy-load @load="imageLoad"  @click="JumpType(swiperitem)"></image>
								</swiper-item>
							</swiper>
						</view>
						<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
							<view class="shop_view_img">
								<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
								<view class="shop_view_img_u">
									<image class="shop_view_img_url" :src="item.image" mode="widthFix" lazy-load="true"></image>
								</view>
							</view>
							<view class="shop_view_cont">
								<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
								<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
								<view class="shop_view_cont_tag">
									<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
									<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
								</view>
								<view class="shop_view_cont_bottom">
									<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
									<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
										<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>	
					</block>
				</block>			
			</view>
		</view>
		<view class="load_desc">{{decs}}</view>
	</view>
</template>

<script setup>
	import { frontproduct } from '@/server/api';
	import { computed,ref,onMounted } from 'vue';
	import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
	import { storeToRefs } from 'pinia';//实现解构付值
	import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
	const counterStore = useCounterStore(); // 使用 Store
	//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
	const { token } = storeToRefs(counterStore);
	const shopList = ref([]);
	const total = ref(0);
	const decs = ref('');
	const pages = ref(0);
	const limits = ref(10);
	const props = defineProps({
		apiType:{
			type:Number,
			default:1 //1为首页5为热门推荐
		}
	})
	const api_product=()=>{
		pages.value = pages.value + 1;
		decs.value = "—— 加载中... ——";
		const params = {
			page:pages.value,
			limit:limits.value
		}
		return frontproduct(props.apiType,params).then(({data}) => {
			total.value = data.total;
			decs.value = '—— 上拉加载更多 ——'
			data.list.forEach((item,index)=>{
				item.isEven = index % 2 === 0
			})
			if(data.list.length < 10){
				decs.value = '—— 嗷呜，已经到底啦 ——';
			}
			shopList.value = shopList.value.concat(data.list);
		}).catch(({message}) => {
			uni.showModal({
				content:message,
				showCancel: false
			})
		})
	}
	
	//跳转统一处理
	const JumpType=(item,type)=>{
		if(type == 1){
			uni.navigateTo({
				url:`/shopProDetail/detail/detail?id=${item}`//商品详情
			})
		}else{
			const { jumpUrl,jumpIds,jumpType } = item;
			if(jumpType == 0 || jumpType == 2 || jumpType == 4) return false;
			let url = "";
			if(jumpType == 1){
				uni.navigateTo({
					url:`/shopProDetail/detail/detail?id=${jumpIds}`//商品详情
				})
			}else if(jumpType == 3){
				uni.switchTab({
					url:`/pages/classify/classify`//商品列表
				})
			}
		}	
	}
	//加购物车
	const addCart=(i,type)=>{
		const { jumpIds,productInfo,specType } = i;
		let specTypes = false;
		if(type){
			specTypes = specType;
		}else{
			specTypes = productInfo.specType;
		}
		if(specTypes){
			console.log('多规格弹窗选类加购');
		}else{
			console.log('单规格直接加购')
		}
	}
	
	//生命周期钩子
	onMounted(() => {
		api_product();
	});
	onPullDownRefresh(()=>{
		shopList.value = [];
		total.value = 0;
		decs.value = '';
		pages.value = 0;
		api_product();
		uni.stopPullDownRefresh();
	})
	onReachBottom(()=>{
		api_product();
	})	
</script>

<style lang="scss">
	.user_title{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
		.user_name{
			color: #FF0000;
			font-size: 36rpx;
			font-weight: 500;
			margin: 0 10rpx 0 10rpx;
			vertical-align: middle;
			display: inline-block;
		}
	}
	.user_title::before{
		content: "";
		vertical-align: middle;
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		background-image: url('../../static/user/leftimg.png');
		background-size: cover;
		margin-right: 10rpx;
	}
	.user_title::after{
		vertical-align: middle;
		content: "";
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		background-image: url('../../static/user/rightimg.png');
		background-size: cover;
		margin-left: 10rpx;
	}
	// 商品区域样式
	.shop_view{
		margin-top: 10rpx;
		padding: 13rpx 20rpx 0rpx 20rpx;
		display: flex;
		justify-content: space-between;
		.shop_view_ul{
			width: 346rpx;
			.shop_view_li{
				background-color: #FFFFFF;
				border-radius: 20rpx;
				width: 100%;
				box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
				margin-bottom: 20rpx;
				.shop_view_li_swiper{
					width: 100%;
					height: 504rpx;
					.shop_view_li_swiper_item{
						width: 100%;
						.shop_view_li_swiper_img_url{
							width: 100%;
							height: 504rpx;
							display: block;
							border-radius: 20rpx;
						}
					}
				}
				.shop_view_img{
					// width: 100%;
					position: relative;
					padding: 10rpx 10rpx 0rpx 10rpx;
					.shop_view_tag{
						width: 66rpx;
						height: 42rpx;
						position: absolute;
						z-index: 2;
						right: -15rpx;
						top: 20rpx;
						background: url(../../static/tag_img.png);
						background-repeat: no-repeat;
						background-size: 100% 100%;
						.shop_view_tag_text{
							font-size: 20rpx;
							color: #FFFFFF;
							height: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					.shop_view_img_u{
						width: 100%;
						.shop_view_img_url{
							width: 100%;
							height: 300rpx;
							display: block;
							border-radius: 20rpx;
						}
					}
				}
				.shop_view_cont{
					padding: 20rpx;
					.shop_view_cont_title{
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
						min-height: 80rpx;
					}
					.shop_view_cont_title text{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						word-break: break-all;
					}
					.shop_view_cont_desc{
						color: #666666;
						font-size: 24rpx;
					}
					.shop_view_cont_desc text{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						word-break: break-all;
					}
					.shop_view_cont_tag{
						display: flex;
						flex-wrap: wrap;
						.shop_view_cont_tag_text{
							border-radius: 6rpx;
							border: 1px solid #FF6868;
							padding: 0rpx 10rpx;
							border-radius: 10rpx;
							color: #ff6868;
							font-size: 18rpx;
							margin-top: 10rpx;
							margin-right: 10rpx;
						}
					}
				}
				.shop_view_cont_bottom{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.shop_view_cont_price{
						font-size: 32rpx;
						color: red;
						font-weight: 500;
					}
					.shop_view_cont_cart{
						width: 65rpx;
						height: 65rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.shop_view_cont_cart_img{
							width: 40rpx;
							height: 40rpx;
							display: block;
						}
					}
				}
			}
			.shop_view_bcg{
				background-color: inherit;
			}
		}
	}
	.load_desc{
		font-size: 28rpx;
		color: #aaa;
		text-align: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}
</style>