<template>
	<view class="app-container">
		<goodsItem
			v-for="item in itemList"
			:src="item.picUrl"
			:name="item.name"
			:brief="item.brief"
			:counterPrice="item.counterPrice"
			:retailPrice="item.retailPrice"
			@tap="newGoods(item)"
		/>
		<view style="padding: 20rpx;"><u-loadmore :status="status" icon-type="flower" /></view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getGoodsList } from '@/api/category';
import { onReachBottom } from '@dcloudio/uni-app';
import goodsItem from '@/components/goodsItem.vue';

let newQuery = reactive({
	isNew: true,
	page: 1,
	limit: 10,
});

let status = ref('loadmore');
let total = ref(0);
let itemList = ref([] as any);

// 上拉加载数据
onReachBottom(() => {
	// 判断是否还有下一页数据
	if (newQuery.page * newQuery.limit >= total.value) return (status.value = 'nomore');
	// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
	if (status.value === 'loading') return;
	newQuery.page += 1;
	initList(newQuery);
});

const newGoods = (row: any) => {
	uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};

let initList = (data: any) => {
	status.value = 'loading';
	getGoodsList(data).then((res: any) => {
		if (res.data.code == 200) {
			if (res.data.data.total > 10) status.value = 'loadmore';
			else status.value = 'nomore';
			total.value = res.data.data.total;
			itemList.value = [...itemList.value, ...res.data.data.list];
		}
	});
};
initList(newQuery);
</script>

<style lang="scss" scoped></style>
