<template>
	<u-subsection :list="list" v-model="current" active-color="#ff9900" @change="change" />
	<view v-if="collectList.length !== 0">
		<view v-if="current === 0" style="margin-top: 6rpx;">
			<goodsItem
				v-for="item in collectList"
				:key="item.id"
				:src="item?.picUrl"
				:name="item.name"
				:brief="item.brief"
				:retailPrice="item.retailPrice"
				@tap="toGoods(item.valueId)"
			/>
		</view>
		<view v-else>
			<view
				v-for="item in collectList"
				:key="item.id"
				style="width: 100%; height: 80rpx; line-height: 80rpx; background-color: #fff; padding: 0 30rpx; margin-bottom: 4rpx;"
			>
				{{ item.name }}
			</view>
		</view>
		<view style="padding: 20rpx;"><u-loadmore :status="status" icon-type="flower" /></view>
	</view>
	<u-empty v-else text="收藏为空" mode="list" style="margin: 200rpx auto;"></u-empty>
</template>

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

let collectQuery = ref({
	type: 0,
	page: 1,
	limit: 10,
});

let total = ref(0);

let status = ref('loadmore');

let collectList = ref([] as any);

let list = ref([
	{
		name: '商品收藏',
	},
	// {
	// 	name: '专题收藏',
	// },
	{
		name: '产品线',
	},
]);

let current = ref(0);

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

let change = (index: number) => {
	collectList.value = [];
	collectQuery.value.page = 1;
	collectQuery.value.type = index;
	if (index === 1) collectQuery.value.type = 2;
	init();
};

let toGoods = (id: number) => {
	uni.navigateTo({ url: '/pages/goods/index?id=' + id });
};

let init = () => {
	status.value = 'loading';
	getCollectList(collectQuery.value).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;
			collectList.value = [...collectList.value, ...res.data.data.list];
		}
	});
};
init();
</script>

<style></style>
