<template>
	<view class="classify-container">
		<view class="classify-header">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="header-content">
				<view class="search-bar" @click="goToSearch">
					<text class="search-icon">🔍</text>
					<text class="search-placeholder">输入关键词或粘贴商品标题</text>
				</view>
			</view>
		</view>

		<view class="main-body" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 左侧一级菜单 -->
			<scroll-view scroll-y class="side-bar" :show-scrollbar="false">
				<view class="side-item" :class="{ 'active': activeIndex === index }"
					v-for="(item, index) in categoryData" :key="index" @click="switchMainCategory(index)">
					<text class="side-txt">{{ item.name }}</text>
				</view>
			</scroll-view>

			<!-- 右侧内容区 -->
			<scroll-view scroll-y class="content-panel" :show-scrollbar="false">
				<view class="category-group" v-for="(second, sIdx) in currentSubCategories" :key="sIdx">
					<view class="group-title">
						<text class="title-line"></text>
						<text class="title-txt">{{ second.cate_name }}</text>
						<text class="title-line"></text>
					</view>
					<view class="sub-grid">
						<view class="sub-item" v-for="(three, tIdx) in second.three" :key="tIdx" @click="goToDetail(three)">
							<view class="sub-img-wrap">
								<image class="sub-img" :src="three.img_url" mode="aspectFit"></image>
							</view>
							<text class="sub-name">{{ three.cate_name }}</text>
						</view>
					</view>
				</view>
				<view class="footer-placeholder"></view>
			</scroll-view>
		</view>

		<!-- 底部导航 -->
		<bottom-nav :activeTab="navActiveIndex"></bottom-nav>
	</view>
</template>

<script>
	import BottomNav from '@/components/bottom-nav/bottom-nav.vue';
	import http from '@/request/request.js';

	export default {
		components: {
			BottomNav
		},
		data() {
			return {
				statusBarHeight: 44,
				activeIndex: 0,
				categoryData: [],
				navActiveIndex: -1 // 初始为-1，直到匹配到分类Tab
			}
		},
		computed: {
			navBarHeight() {
				return this.statusBarHeight + 44;
			},
			currentSubCategories() {
				if (this.categoryData.length > 0 && this.categoryData[this.activeIndex]) {
					return this.categoryData[this.activeIndex].second || [];
				}
				return [];
			}
		},
		onLoad() {
			this.initializePage();
		},
		mounted() {
			if (this.__taokeInitialized) return;
			this.__taokeInitialized = true;
			this.initializePage();
		},
		methods: {
			initializePage() {
				if (this.__pageInitialized) return;
				this.__pageInitialized = true;
				const sysInfo = uni.getSystemInfoSync();
				this.statusBarHeight = sysInfo.statusBarHeight || 44;
				this.getSuperCategory();
			},
			getSuperCategory() {
				http.get('https://api.cmspro.haodanku.com/index/superCategory?cid=YsWZ21tx', undefined, {
					header: {
						'accept': 'application/json, text/plain, */*',
						'accept-language': 'zh-CN,zh;q=0.9'
					}
				}).then(res => {
					this.categoryData = res.data;
					// 获取数据后尝试匹配底部导航高亮状态
					this.matchNavActive();
				});
			},
			matchNavActive() {
				// 获取底部导航数据，查找“分类”对应的索引
				http.get('https://api.cmspro.haodanku.com/bottomBar/lists?cid=YsWZ21tx').then(res => {
					if (res.data && res.data.bottom_bar) {
						const allowedTitles = ['首页', '榜单', '分类'];
						const list = res.data.bottom_bar
							.filter(item => allowedTitles.includes(item.title))
							.sort((a, b) => b.sort - a.sort);
						const idx = list.findIndex(item => item.title === '分类');
						if (idx !== -1) {
							this.navActiveIndex = idx;
						}
					}
				});
			},
			switchMainCategory(index) {
				this.activeIndex = index;
			},
			goToSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			goToDetail(three) {
				const name = encodeURIComponent(three.cate_name.trim());
				const catId = this.categoryData[this.activeIndex].cat_id;
				const secondCat = three.second_category;
				
				uni.navigateTo({
					url: `/pages/category/category_detail?cate_name=${name}&id=${catId}&second_category=${secondCat}`
				});
			}
		}
	}
</script>

<style scoped>
	.classify-container {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
	}

	/* 头部 */
	.classify-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		z-index: 100;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.status-bar {
		width: 100%;
	}

	.header-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.search-bar {
		flex: 1;
		height: 72rpx;
		background-color: #f5f5f5;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.search-icon {
		font-size: 28rpx;
		color: #999;
		margin-right: 12rpx;
	}

	.search-placeholder {
		font-size: 26rpx;
		color: #999;
	}

	/* 主体布局 */
	.main-body {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	/* 左侧菜单 */
	.side-bar {
		width: 180rpx;
		height: 100%;
		background-color: #f7f8fa;
		flex-shrink: 0;
	}

	.side-item {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.side-txt {
		font-size: 28rpx;
		color: #666;
	}

	.side-item.active {
		background-color: #ffffff;
	}

	.side-item.active .side-txt {
		color: #333;
		font-weight: bold;
	}

	.side-item.active::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #ff715a, #ff416c);
		border-radius: 0 4rpx 4rpx 0;
	}

	/* 右侧内容 */
	.content-panel {
		flex: 1;
		height: 100%;
		padding: 0 20rpx;
		background-color: #ffffff;
	}

	.category-group {
		padding-top: 30rpx;
	}

	.group-title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.title-line {
		width: 30rpx;
		height: 2rpx;
		background-color: #eee;
	}

	.title-txt {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
		margin: 0 20rpx;
	}

	.sub-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.sub-item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.sub-img-wrap {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
	}

	.sub-img {
		width: 100%;
		height: 100%;
	}

	.sub-name {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.footer-placeholder {
		height: 120rpx; /* 为底部导航预留空间 */
	}
</style>
