<template>
  <view class="main">
	 <view class="list" v-for="(item,index) in shop_list" :key="index" @click="shopDetail(item)">
		 <view class="list_l">
			 <image class="list_img" :src="item.image" mode="widthFix"></image>
		 </view>
		 <view class="list_r">
			 <view class="list_title">{{item.storeName}}</view>
			 <!-- <view class="list_tag">
				 <view class="list_li">半小时送达</view>
				 <view class="list_li">劲辣胃浓</view>
			 </view> -->
			 <view class="list_bottom">
			 	<view class="list_price price">{{item.price}}</view>
			 	<view class="list_shop_cart" @click.stop="addCart(item,1)">
			 		<image class="list_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
			 	</view>
			 </view>
		 </view>
	 </view>
	<view class="empty" v-if="img_err && decs">
		<view class="empty_cont">
			<image class="empty_cont_img" :src="img_err" mode="widthFix"></image>
			<view class="empty_cont_title">{{decs}}</view>
		</view>
	</view>
	<view v-else class="load_desc">{{decs}}</view>
	<multi
	ref="shopData"
	@add-success="handleAddSuccess"
	@add-error="handleAddError"
	></multi>
  </view>
</template>

<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { collectuser } from "@/server/api.js"
import multi from '@/components/multi/multi.vue'
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
const shop_list = ref([])
const img_err = ref("");
const decs = ref('');
const pages = ref(0);
const limits = ref(10);
const shopData = ref({});
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
const api_collectuser=()=>{
	pages.value = pages.value + 1;
	img_err.value = "";
	decs.value = "—— 加载中... ——";
	const params = {
		page:pages.value,
		limit:limits.value
	}
	return collectuser(params).then(({data}) => {
		decs.value = '—— 上拉加载更多 ——';
		shop_list.value = shop_list.value.concat(data.list);
		if(!shop_list.value.length){
			img_err.value = "../../static/Empty/collect.png"
			decs.value = "—— 暂无收藏记录 ——"
		}else if(data.list.length < 10){
			decs.value = '—— 嗷呜，已经到底啦 ——';
		}
	}).catch(({message}) => {
		img_err.value = "../../static/Empty/err.png"
		decs.value = `—— ${message||'网络异常'} ——`;
	})
}
//加购物车
const addCart=(i,type)=>{
	shopData.value.addCart(i,type);
}
const shopDetail = (item) =>{
	uni.navigateTo({
		url:`/shopProDetail/detail/detail?id=${item.productId}`//商品详情
	})
}
// 加入购物车成功回调
const handleAddSuccess = (data) => {}
// 加入购物车失败回调
const handleAddError = (error) => {}
onLoad((options) => {
	api_collectuser();
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{
	shop_list.value = [];
	decs.value = '';
	pages.value = 0;
	api_collectuser();
	uni.stopPullDownRefresh();
})
onReachBottom(()=>{
	api_collectuser();
})
</script>

<style lang="scss">
	@import './style.scss';
</style>