<template>
	<u-popup
		v-model="show"
		mode="bottom"
		length="90%"
		:mask-close-able="false"
		closeable
		@close="handleClose"
	>
		<!-- 搜索 -->
		<view
			style="width: 90%; height: 50px; position: fixed; top: 0; z-index: 1; background-color: #fff;"
		>
			<uni-search-bar
				placeholder="输入搜索商品"
				bgColor="#EEEEEE"
				clearButton="auto"
				cancelButton="none"
				@confirm="search"
			/>
		</view>
		<view class="content">
			<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"
						:load-text="loadText"
						@loadmore="loadmore"
					/>
				</view>
			</view>
		</view>
	</u-popup>
	
</template>

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

// 选择tabs的下标
let current = ref(0);
// tabs下的商品数据
let currentSubCategoryData = ref([] as any);
// tabs数据
let categoryList = ref([] as any);
// 查询参数
const listQuery = ref({
	categoryId: 0,
	page: 1,
	limit: 10,
});

// 自定义加载状态
let loadText = ref({
	loadmore: '点击加载更多',
	loading: '努力加载中',
	nomore: '实在没有了',
});

let status = ref('loadmore');
let total = ref(0);

let props = defineProps({
	show: {
		type: Boolean,
		default: false,
	},
});

let emits = defineEmits(['close', 'categoryData']);

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

// 开始添加产品线产品
let cateGoryGoods = (data: any) => {
	emits('categoryData', data);
	handleClose();
};

// 监听tabs
let tabsChange = (e: any) => {
	currentSubCategoryData.value = [];
	current.value = e;
	listQuery.value.categoryId = categoryList.value[e].id;
	initGoodsList(listQuery.value);
};

// 点击加载数据
let loadmore = () => {
	// 判断是否还有下一页数据
	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);
	console.log('点击加载');
};

// 获取商品数据
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];
		}
	});
};

let 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);
		}
	});
};

let handleClose = () => {
	emits('close', false);
};

defineExpose({
	initIndex,
});
</script>

<style lang="scss" scoped>
.content {
	margin-top: 13%;

	.right-cates {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
}
</style>
