<template>
	<view class="category-wrap">
		<view class="scroll-wrap">
			<scroll-view class="scroll scroll1" :class="{ short: short }" scroll-x scroll-with-animation :show-scrollbar="false" :scrollLeft="scrollLeft1">
				<!-- <view class="item tab-item0" :class="{ active: all }" @click="page5handleTabClick('-1', '-1')">
					<text class="t">推荐</text>
				</view> -->
				<view class="item tab-item0" :class="{ active: nav_active_index == index && !all }" v-for="(item, index) in category_list" :key="item.id" @click="page5handleTabClick(index, 'nav_active_index')">
					<text class="t" :style="{ color: fontColor }">{{ item.name }}</text>
				</view>
			</scroll-view>
			<navigator class="more" hover-class="none" open-type="switchTab" url="/pages/goods-category/goods-category">
				<uni-icons type="bars" :color="fontColor" size="18"></uni-icons>
				<text class="t" :style="{ color: fontColor }">分类</text>
			</navigator>
		</view>
		<scroll-view class="scroll" scroll-x scroll-with-animation :show-scrollbar="false" :scrollLeft="scrollLeft2" v-if="category_list.length">
			<template v-if="!all">
				<view class="item tab-item1" :class="{ active: nav_active_item_two_index == index }" v-for="(item, index) in category_list[nav_active_index].items" :key="item.id" @click="page5handleTabClick(index, 'nav_active_item_two_index')">
					<view class="flex">
						<image class="img" :src="item.realistic_images" mode="aspectFit"></image>
						<text class="t" :style="{ color: fontColor }">{{ item.name }}</text>
					</view>
				</view>
				<view class="item active" v-if="!category_list[nav_active_index].items.length">
					<view class="flex">
						<image class="img" src="https://store.sxczgkj.com/static/upload/images/common/2025/06/06/1749177557795147.png?noCache=mbk75qlp" mode="aspectFit"></image>
						<text class="t" :style="{ color: fontColor }">全部</text>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="item active">
					<view class="flex">
						<image class="img" src="https://store.sxczgkj.com/static/upload/images/common/2025/06/06/1749177557795147.png?noCache=mbk75qlp" mode="aspectFit"></image>
						<text class="t" :style="{ color: fontColor }">全部</text>
					</view>
				</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			category_list: {
				type: [Array, String],
				default: [],
			},
			fontColor: {
				type: String,
				default: '#333333',
			},
			short: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				all: false,
				scrollLeft1: 0,
				scrollLeft1_widths: [],
				scrollLeft2: 0,
				scrollLeft2_widths: [],
				nav_active_index: 0,
				nav_active_item_two_index: 0,
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.initTabWidths();
			});
		},
		methods: {
			// 初始化获取所有选项卡的宽度
			initTabWidths() {
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.tab-item0')
					.boundingClientRect((rects) => {
						this.scrollLeft1_widths = rects.map((rect) => rect.width);
					})
					.exec();

				query
					.selectAll('.tab-item1')
					.boundingClientRect((rects) => {
						this.scrollLeft2_widths = rects.map((rect) => rect.width);
					})
					.exec();
			},
			// 处理选项卡点击
			page5handleTabClick(index, key) {
				this.$emit('change', { index, key });
				if (index == -1) {
					this.all = true;
				} else {
					this.all = false;
					this[key] = index;

					if (key == 'nav_active_index') {
						// 重置二级分类的索引和滚动条位置

						// 检查是否有二级分类
						let arr = this.category_list[this.nav_active_index].items;

						this.nav_active_item_two_index = arr.length ? 0 : -1;
						this.scrollLeft1 = 0;

						// 计算需要滚动的距离使目标选项卡居中
						let scrollLeft = 0;
						for (let i = 0; i < index; i++) {
							scrollLeft += this.scrollLeft1_widths[i] || 0;
						}

						// 获取容器宽度和当前选项卡宽度
						const containerWidth = uni.getSystemInfoSync().windowWidth - 50;
						const currentTabWidth = this.scrollLeft1_widths[index] || 0;

						// 计算居中偏移量
						scrollLeft = scrollLeft + currentTabWidth / 2 - containerWidth / 2;

						// 确保滚动距离不小于0
						scrollLeft = Math.max(0, scrollLeft);

						// 设置滚动位置
						this.scrollLeft1 = scrollLeft;
					}

					if (key == 'nav_active_item_two_index') {
						// 计算需要滚动的距离使目标选项卡居中
						let scrollLeft = 0;
						for (let i = 0; i < index; i++) {
							scrollLeft += this.scrollLeft2_widths[i] || 0;
						}

						// 获取容器宽度和当前选项卡宽度
						const containerWidth = uni.getSystemInfoSync().windowWidth - 50;
						const currentTabWidth = this.scrollLeft2_widths[index] || 0;

						// 计算居中偏移量
						scrollLeft = scrollLeft + currentTabWidth / 2 - containerWidth / 2;

						// 确保滚动距离不小于0
						scrollLeft = Math.max(0, scrollLeft);

						// 设置滚动位置
						this.scrollLeft2 = scrollLeft;
					}
				}

				this.$nextTick(() => {
					this.initTabWidths();
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.category-wrap {
		$padding: 28upx;
		width: 100%;
		.scroll-wrap {
			display: flex;
			.scroll {
				width: 640upx;
				&.short {
					width: 600upx;
				}
			}
			.more {
				flex-shrink: 0;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.scroll {
			width: 100%;
			white-space: nowrap;
			.item {
				display: inline-block;
				padding: $padding 0 $padding $padding;
				&:last-child {
					padding-right: $padding;
				}
				&.active {
					.t {
						font-weight: bold;
					}
				}
				.t {
					font-size: 28upx;
				}
				.flex {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					.img {
						$size: 82upx;
						width: $size;
						height: $size;
					}
					.t {
						font-size: 24upx;
						margin-top: 12upx;
					}
				}
			}
		}
	}
</style>
