<template>
	<view class="app-container">
		<!-- tabs标签 -->
		<u-tabs
			name="name"
			:list="categoryData.brotherCategory"
			v-model="categoryData.current"
			@change="tabsChange"
		></u-tabs>

		<!-- content -->
		<view class="content">
			<view class="title">
				<view
					style="width: 100%; text-align: center; font-size: 40rpx; margin-bottom: 20rpx;"
				>
					{{ categoryData.currentCategory.name }}
				</view>
				<view style="width: 100%; text-align: center; font-size: 32rpx; color: #999999;">
					{{ categoryData.currentCategory.desc }}
				</view>
			</view>
			<view
				v-for="(item, index) in categoryData.list"
				:key="item.id"
				class="item-list"
				@tap="tapList(item.id)"
			>
				<view class="left">
					<u-image
						width="176rpx"
						height="176rpx"
						:src="
							item.picUrl.split('http').length > 1
								? item.picUrl
								: baseUrl + item.picUrl
						"
					/>
				</view>
				<view class="details">
					<view class="details-top">
						<view>{{ item.name }}</view>
						<view style="color: #969799;">{{ item.brief }}</view>
					</view>
					<view class="details-bottom">
						<!-- <text style="font-size: 32rpx; margin-right: 8rpx;">
							￥{{ item.counterPrice }}
						</text> -->
					<!-- 	<text
							style="font-size: 24rpx; text-decoration: line-through; color: #969799;"
						>
							￥{{ item.counterPrice }}
						</text> -->
					</view>
				</view>
			</view>
			<view style="margin: 20rpx;">
				<u-loadmore :status="categoryData.status" icon-type="flower" />
			</view>
		</view>
	</view>
</template>

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

let baseUrl = config.baseUrl;
const categoryId = ref();
const categoryData = reactive({
	brotherCategory: [] as any,
	currentCategory: {} as any,
	list: [] as any,
	current: 0,
	page: 1,
	limit: 10,
	total: 0,
	status: 'loadmore', //nomore loadmore
});

onLoad((options: any) => {
	categoryId.value = options.id;
	initGoodsCategory(categoryId.value);
	initGoodsList(categoryId.value, categoryData.page, categoryData.limit);
});

// 上拉加载数据
onReachBottom(() => {
	// 判断是否还有下一页数据
	if (categoryData.page * categoryData.limit >= categoryData.total)
		return (categoryData.status = 'nomore');

	// 判断是否正在请求其它数据，如果是，则不发起额外的请求
	if (categoryData.status === 'loading') return;
	categoryData.page += 1;
	initGoodsList(categoryId.value, categoryData.page, categoryData.limit);
});

const tapList = (id: any) => {
	console.log(id);
	uni.navigateTo({ url: `/pages/goods/index?id=${id}` });
};

const tabsChange = (e: any) => {
	categoryData.current = e;
	const id = categoryData.brotherCategory[e].id;
	categoryData.list = [];
	categoryData.page = 1;
	initGoodsCategory(id);
	initGoodsList(id, categoryData.page, categoryData.limit);
};

const initGoodsCategory = (id: number) => {
	getGoodsCategory({ id }).then((res: any) => {
		categoryData.brotherCategory = res.data.data.brotherCategory;
		categoryData.currentCategory = res.data.data.currentCategory;
		if (res.data.data.parentCategory.id == categoryId.value) {
			categoryId.value = res.data.data.currentCategory.id;
			initGoodsCategory(categoryId.value);
			initGoodsList(categoryId.value, categoryData.page, categoryData.limit);
		}
	});
};

const initGoodsList = (categoryId: number, page?: number, limit?: number) => {
	categoryData.status = 'loading';
	getGoodsList({ categoryId, page, limit }).then((res: any) => {
		if (categoryData.total > 10) categoryData.status = 'loadmore';
		else categoryData.status = 'nomore';
		categoryData.total = res.data.data.total;
		categoryData.list = [...categoryData.list, ...res.data.data.list];
	});
};
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.app-container {
	border-top: 2rpx solid #f4f4f4;
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-box-align: center;
		.title {
			width: 100%;
			margin: 20rpx 0 80rpx;
		}
		.item-list {
			// border: 1px solid #000;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			padding: 16rpx 32rpx;
			.details {
				display: flex;
				flex-direction: column;
				.details-top {
					margin-bottom: 13%;
				}
			}
		}
	}
}
</style>
