<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: 6rpx 6rpx 0 6rpx;">
			<goodsItem v-for="item in collectList" :key="item.id" :src="item?.picUrl" :name="item.name"
				:brief="item.brief" :retailPrice="item.retailPrice" :isCollection="true"
				@tapDelCollection="delCollection(item)" @tap="toGoods(item)" />
		</view>
		<view v-else>
			<view v-for="item in collectList" :key="item.id" class="product-collection"
				@tap="toProductLine(item.valueId)">
				{{ item.name }}
				<u-button size="mini" style="margin: 0;" @tap="delCollection(item)">删除</u-button>
			</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>

	<u-modal v-model="show" show-cancel-button :content="content" @confirm="onConfirm"></u-modal>
</template>

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

const specStore = useSpecStore() // 记录默认规格

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

let total = ref(0);

let status = ref('loadmore');

let show = ref(false);

let content = ref('是否取消收藏该商品');

let collectList = ref([] as any);

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

let current = ref(0);

// 删除商品传入参数
let delGoods = ref({
	type: 0,
	valueId: 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 = (data: any) => {
	uni.navigateTo({
		url: '/pages/goods/index?id=' + data.valueId,
		success() {
			// specStore.$patch({
			// 	defaultSelect: {
			// 		sku: data.specifications,
			// 		num: data.number
			// 	},
			// 	partIds: data.partIds || [],
			// 	partList: data.partList || [],
			// 	isDefaultSku: true
			// })
			// // 是否含有自定义规格
			// if (data.productId === 0) specStore.$patch({ specificationCustom: data.specificationCustom || [] })
		}
	});
};

let toProductLine = (id: any) => {
	uni.reLaunch({
		url: '../productLine/productLine?id=' + id + '&collectionId=0',
	});
};

let delCollection = (item: any) => {
	if (item.type === 0) content.value = '是否取消收藏该商品';
	content.value = '是否取消收藏该产品线';
	delGoods.value.type = item.type;
	delGoods.value.valueId = item.valueId;
	show.value = true;
};

// 确认删除
let onConfirm = () => {
	deleteCollect(delGoods.value).then((res: any) => {
		if (res.data.code === 200) {
			collectList.value = [];
			init();
		}
	});
};

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 lang="scss" scoped>
.product-collection {
	height: 80rpx;
	line-height: 80rpx;
	background-color: #fff;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 6rpx 4rpx 6rpx;
}
</style>
