<template>
	<view class="u-wrap">
		<!-- 搜索 -->
		<view>
			<uni-search-bar
				placeholder="输入搜索商品"
				bgColor="#EEEEEE"
				clearButton="auto"
				cancelButton="none"
				@confirm="search"
			/>
		</view>
		<view class="u-menu-wrap">
			<view class="right-cates">
				<u-tabs
					name="name"
					:list="categoryList"
					v-model="current"
					@change="tabsChange"
				></u-tabs>
				<goodsItem
					v-for="item in currentSubCategoryData"
					:src="item.picUrl"
					:name="item.name"
					:brief="item.brief"
					:counterPrice="item.counterPrice"
					:retailPrice="item.retailPrice"
					@tap="cateGoryGoods(item)"
				/>
				<view style="padding: 20rpx;">
					<u-loadmore :status="status" icon-type="flower" />
				</view>
				<view class="footer"></view>
			</view>
		</view>
	</view>
</template>

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

const current = ref(0); // 预设当前项的值
const categoryList = ref([] as any); //右侧tabber数据
const currentSubCategoryData = ref([] as any); //初始tabber数据
const listQuery = ref({
	categoryId: 0,
	page: 1,
	limit: 10
});
let status = ref('loadmore');
let total = ref(0);

onLoad((options: any) => {
	if (JSON.stringify(options) === '{}') {
		initIndex();
	} else {
		let data = JSON.parse(options.data);
		listQuery.value.categoryId = data.id;
		initIndex();
		setTimeout(() => {
			current.value = data.index;
		}, 300);
	}
});

const search = (val: any) => {
	uni.navigateTo({ url: '../index/search?keyword=' + val.value });
};

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

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

const tabsChange = (e: any) => {
	currentSubCategoryData.value = [];
	current.value = e;
	listQuery.value.categoryId = categoryList.value[e].id;
	initGoodsList(listQuery.value);
};

const initIndex = () => {
	getCatalogIndex().then((res: any) => {
		if (res.data.code === 200) {
			categoryList.value = res.data.data.categoryList;
			if (listQuery.value.categoryId === 0)
				listQuery.value.categoryId = categoryList.value[0].id;
			initGoodsList(listQuery.value);
			console.log(categoryList.value, '分类数据');
		}
	});
};

const initGoodsList = (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;
			currentSubCategoryData.value = [...currentSubCategoryData.value, ...res.data.data.list];
		}
	});
};
</script>

<style lang="scss" scoped>
.right-cates {
	width: 100%;
	height: 100%;
	background-color: #fff;
}

.u-wrap {
	height: calc(100vh);
	/* #ifdef H5 */
	height: calc(100vh - var(--window-top));
	/* #endif */
	display: flex;
	flex-direction: column;
}

.u-search-box {
	padding: 18rpx 30rpx;
}

.footer {
	width: 100%;
	height: 108rpx;
	background-color: #fff;
}
</style>
