<template>
	<el-layout>
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :showLeft="false" :border="false" title="分类"></el-navbar>
		
		<view class="wrapper">
			
			<view class="search-box">
				<view class="search" @click="navigateTo('pages/search/index')">
					<uni-icons type="search" size="18"></uni-icons>
					<text>请输入关键字</text>
				</view>
			</view>
			
			<view class="category-wrap">
				
				<scroll-view
					class="menu" 
					style="overflow: hidden;"
					:style="{'height': getHeight + 'px'}" 
					scroll-with-animation="true" 
					scroll-y="true"
					:scroll-top="menuTop"
					:scroll-into-view="menuIndex"
				>
					<view
						v-for="(data,index) in category"
						:key="index"
						class="menu-item"
						:class="{active:currentIndex==index}"
						@click="onMenu(index)"
						:id="'menu-'+index">{{ data.title }}</view>
				</scroll-view>
				
				<scroll-view
					class="right"
					:scroll-into-view="tabindex"
					scroll-with-animation="true" 
					scroll-y="true"
					style="overflow: hidden;"
					:style="{'height': getHeight+'px'}" 
					@scroll="onScroll"
				>
					<view 
					v-for="(data,index) in category" :key="index"
					class="s-list goods-item" 
					:id="'item-' + index">
						<text class="s-item">{{data.title}}</text>
						<view class="t-list">
							<view @click="navigateTo(`pages/goods/index?id=${children.id}`)" class="t-item" v-for="(children, j) in data.children" :key="j">
								<image :src="children.photo"></image>
								<view class="children-text"><text>{{children.title}}</text></view>
							</view>
						</view>
					</view>
				</scroll-view>
				
			</view>
			
		</view>
		
		<el-loading v-model="isLoading" zIndex="1000"></el-loading>
		<tabbar></tabbar>
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { computed, nextTick, ref } from "vue";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const isLoading = ref(true);
	const navTop    = ref(0);
	const category  = ref([]);
	const menuTop   = ref(0);
	const menuIndex = ref("menu-0");
	const tabindex  = ref("item-0");
	const currentIndex = ref(0);
	onLoad(()=>{
		uni.$http.get("category/index").then(res=>{
			isLoading.value = false;
			if(res.code){
				category.value = res.data;
				nextTick(()=>{
					setScrollHeight();
				});
			}
		});
	});
	
	const scrollTop = ref(0);
	const onScroll = (event)=>{
		if(goodsHeight.value.length <= 0) {
			return;
		}
		
		let top = event.detail.scrollTop;
		let current = currentIndex.value;
		
		if(top >= scrollTop.value) {
			if(current + 1 < goodsHeight.value.length && top >= goodsHeight.value[current]) {
				currentIndex.value = current + 1;
			}
		}else{
			if(current - 1 >= 0 && top < goodsHeight.value[current - 1]) {
				currentIndex.value = current - 1;
			}
		}
		
		menuIndex.value = 'menu-' + currentIndex.value;
		scrollTop.value = top;
	}
	
	const goodsHeight = ref([]);
	const menuHeight  = ref([]);
	const setScrollHeight = ()=>{
		let h = 0;
		const query = uni.createSelectorQuery();
		query.selectAll('.goods-item').boundingClientRect().exec((res)=>{
		  res[0].forEach((item) => {
			h += item.height;
			goodsHeight.value.push(h);
		  });
		});
		
		menuHeight.value = [];
		let m = 0;
		query.select(".menu-item").boundingClientRect().exec((res) => {
		  res[0].forEach((item) => {
			m += item.height;
			menuHeight.value.push(m);
		  })
		});
	}
	
	const onMenu = (index)=>{
		currentIndex.value = index;
		tabindex.value = 'item-' + index;
	}
	
	const getHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value - 96);
	});
	
</script>

<style lang="scss" scoped>
	.wrapper {
		.category-wrap {
			background-color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.menu {
				width: 178rpx;
				background: #f3f4f6;
				view {
					width: 100%;
					text-align: center;
					height: 100rpx;
					line-height: 100rpx;
					background: #f3f4f6;
					font-size: 27rpx;
					color: #333;
					border-bottom: 1px solid #dadbdd;
					&.active {
						background: #fff; 
					}
				}
			}
			.right {
				width: 100%;
				.s-list {
					padding: 0 20rpx;
					display: flex;
					flex-direction: column;
					margin-bottom: 10rpx;
					.s-item {
						display: flex;
						align-items: center;
						height: 70rpx;
						padding-top: 8rpx;
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}
					.t-list {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;
						.t-item {
							width: 33.333%;
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-bottom: 10rpx;
							image {
								width: 140rpx;
								height: 140rpx;
								border-radius: 10rpx;
							}
							view {
								font-size: 26rpx;
								text-align: center;
								padding-top: 10rpx;
								display: -webkit-box;
								overflow: hidden; 
								word-break:break-all;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}
						}
					}
				}
			}
		}
		.search-box {
			width: 100%;
			height: 90rpx;
			border-top: 1px solid #ddd;
			background: #fafafa;
			display: flex;
			align-items: center;
			justify-content: center;
			.search {
				width: 92%;
				height: 70rpx;
				line-height: 70rpx;
				border:1px solid #bfbfbf;
				border-radius: 15rpx;
				background-color: #fff;
				text-align: center;
			}
		}
	}
</style>