<!-- 商品卡片组 加载更多 -->
<template>
	<view class="content">
		<view class="block" v-if="listProperty.list">
			<JyShopCard v-for="(item, index) in listProperty.list" :key="index" @click="skipCommodity(item)" :item="item" />
		</view>
		<uni-load-more :status="listProperty.status" />
	</view>
</template>

<script setup>
	// 商品卡片
	import JyShopCard from '@/components/public/jy-shop-card'
	import {
		reactive,
		defineExpose,
		inject
	} from 'vue'
	import {
		shop
	} from '@/api/shop'
	const {
		routeWithParams,
		checkLink
	} = inject('util');
	// 工具库
	import util from '@/common/js/util.js'
	const props = defineProps({
		//请求条件
		conditions: {
			type: Object,
			default: () => {
				{}
			}
		},
		// 是否需要上啦加载更多 默认需要
		isLoadMore: {
			type: Boolean,
			default: true
		}
	})
	// 滑动导航栏数据
	const listProperty = reactive({
		params: {
			// 条数
			pageSize: 10,
			// 页码
			pageNum: 1,
			navigation: 1
		},
		list: [],
		// 总数
		total: undefined,
		status: 'more'
	});
	//当前位置
	const getData = async (is, type) => {
		let newList = is ? true : false
		//显示加载框
		uni.showLoading({
			title: '加载中'
		});
		console.log(listProperty.total == listProperty.list.length);
		if (!is && listProperty.total == listProperty.list.length) {
			uni.hideLoading();
			uni.stopPullDownRefresh()
			return uni.showToast({
				title: '没有更多数据',
				icon: 'none'
			});
		}
		switch (type) {
			case 'onPullDownRefresh':
				listProperty.params.pageNum = 1;
				newList = true
				break;

			case 'onReachBottom':
				listProperty.params.pageNum += 1;
				newList = false
				break;
			default:
				break;
		}
		try {
			const {
				rows,
				total
			} = await shop.list(listProperty.params)
			console.log(rows);

			listProperty.list = newList ? [].concat(rows) : listProperty.list.concat(rows);
			listProperty.total = total;
			listProperty.status = listProperty.total == listProperty.list.length ? 'noMore' : 'more'
		} catch (error) {
			console.log(error);
		} finally {
			uni.hideLoading()
			uni.stopPullDownRefresh()
		}
	}
	const init = () => {
		getData()
	}
	init();
	// 暴露方法
	defineExpose({
		getData
	})
	const skipCommodity = (item) => {
		// 
		uni.navigateTo({
			url: util.setUrl('/pages/shop/commodity/index', {
				productId: item.id
			})
		})
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		overflow: hidden;
	}

	.item {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx 0;
	}

	.content {
		text-align: center;
		height: 100%;
	}

	.content .block {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 两列布局 */
		justify-items: center;
		// 上下间隙 20px 左右间隙10
		gap: 30rpx 0;
	}

	.content .loadingText {
		line-height: 30px;
		text-align: center;
		font-size: 12px;
		color: $uni-text-color-grey;
	}

	@keyframes preloader_1 {
		0% {
			height: 5px;
			background: #9b59b6;
		}

		25% {
			height: 30px;
			background: #3498db;
		}

		50% {
			height: 5px;
			background: #9b59b6;
		}

		100% {
			height: 5px;
			background: #9b59b6;
		}
	}
</style>