<template>
	<view>
		<!-- 切换栏 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
				<text>普通商品</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
				<text>自营商品</text>
			</view>
		</view>

		<!-- 骨架屏区域 - 数据加载时显示 -->
		<view v-if="isLoading" class="skeleton-container" style="padding-top: 80rpx; height: 100vh;">
			<!-- 左侧分类栏骨架屏 -->
			<view class="skeleton-left-sidebar">
				<view v-for="i in 8" :key="i" class="skeleton-sidebar-item">
					<view class="skeleton-item skeleton-shimmer"></view>
				</view>
			</view>

			<!-- 右侧内容区域骨架屏 -->
			<view class="skeleton-right-content">
				<!-- 商品列表骨架 -->
				<view class="skeleton-goods-list">
					<view v-for="i in 4" :key="i" class="skeleton-goods-item">
						<view class="skeleton-goods-img skeleton-item skeleton-shimmer"></view>
						<view class="skeleton-goods-info">
							<view class="skeleton-goods-name skeleton-item skeleton-shimmer"></view>
							<view class="skeleton-goods-name skeleton-item skeleton-shimmer short"></view>
							<view class="skeleton-goods-sales skeleton-item skeleton-shimmer"></view>
							<view class="skeleton-goods-bottom">
								<view class="skeleton-goods-price skeleton-item skeleton-shimmer"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 实际内容区域 - 数据加载完成后显示 -->
		<view v-else class="category-container" style="padding-top: 80rpx; height: 100vh;">
			<!-- 左侧分类栏 -->
			<scroll-view scroll-y class="left-sidebar" :style="{ height: `calc(100vh - 80rpx)` }">
				<view @click="changeClass(classIndex)" v-for="(classItem, classIndex) in classList" :key="classIndex"
					:class="{ active: classIndex === nowClass, noactive: classIndex !== nowClass }"
					class="sidebar-item">
					{{ classItem?.gtName }}
				</view>
			</scroll-view>

			<!-- 右侧内容区域 -->
			<scroll-view scroll-y class="right-content" :style="{ height: `calc(100vh - 80rpx)` }"
				@scrolltolower="loadMoreGoods" lower-threshold="100">
				<view class="goods-list">
					<view class="goods-item" @click="Service.GoPage('/pages/webView/goodsDetail?goodsId='+item.goodsId)"
						v-for="(item, index) in goodsList" :key="index">
						<img :src="Service.GetMateUrlByImg(item.goodsImg)" class="goods-img" alt="" />
						<view class="goods-info">
							<view class="goods-name">{{ item.goodsName }}</view>
							<view class="goods-sales">已售{{ item.sale }}+</view>
							<view class="goods-bottom">
								<view class="goods-price">
									<text class="new-price">￥{{ item.price }}</text>
									<text class="old-price">￥{{ item.maxPrice }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<up-loadmore :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
	import { Service } from '@/Service/Service'
	import { ref } from "vue";
	import { GoodsService } from '@/Service/api/GoodsService'

	// ==================== 搜索和分类相关变量 ====================
	let searchWord = ref() // 搜索关键词
	let nowClass = ref<number>(0) // 当前选中的分类索引
	
	let loading = ref(false) // 加载状态
	let noMore = ref(false) // 是否没有更多数据
	
	let activeTab = ref<number>(0) 

	// ==================== 分页相关变量 ====================
	let status = ref('nomore') // 加载状态：loadmore/loading/nomore
	let page = ref(1) // 当前页码

	// ==================== 数据列表变量 ====================
	let classList = ref<Array<any>>([]) // 分类列表
	let goodsList = ref<Array<any>>([]) // 商品列表

	// ==================== 骨架屏相关变量 ====================
	let isLoading = ref(true) // 控制骨架屏显示/隐藏的状态

	// ==================== 生命周期钩子 ====================
	onLoad(() => {
		// 页面加载时获取分类数据
		GetSystemGoodsType()
	});

	onShow(() => {
		// 页面显示时的逻辑
	});

	onReachBottom(() => {
		// 滚动到底部时加载更多商品
		getList()
	})

	// ==================== 数据加载方法 ====================

	/**
	 * 初始化商品数据
	 * 清空现有商品列表，重置页码，开始加载第一页
	 */
	const getData = () => {
		goodsList.value = []
		status.value = 'loadmore'
		page.value = 1
		getList()
	}

	/**
	 * 加载商品列表数据
	 * 根据当前选中的分类获取商品
	 */
	const getList = () => {
		// 防止重复加载
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'

		// 调用API获取分类商品
		GoodsService.GetTypeGoodsList(classList.value[nowClass.value].gtId, page.value).then(res => {
			if (res.code == 0) {
				goodsList.value = [...goodsList.value, ...res.data.goodsList]
				status.value = res.data.goodsList.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	/**
	 * 获取系统商品分类
	 * 同时加载第一页的商品数据
	 */
	const GetSystemGoodsType = () => {
		GoodsService.GetSystemGoodsType( activeTab.value==0?'普通商品':'自营商品', page.value).then(res => {
			if (res.code == 0) {
				classList.value = res.data.goodsType
				goodsList.value = [...goodsList.value, ...res.data.goodsList]
				status.value = res.data.goodsList.length == 10 ? 'loadmore' : 'nomore'
				page.value++
				// 数据加载完成，隐藏骨架屏
				isLoading.value = false
			} else {
				Service.Msg(res.msg)
				// 出错时也隐藏骨架屏
				isLoading.value = false
			}
		})
	}

	/**
	 * 切换分类
	 * @param val 分类索引
	 */
	const changeClass = (val : number) => {
		nowClass.value = val
		console.log(nowClass.value);
		getData()
	}

	/**
	 * 切换 Tab（保单商品/自营商品）
	 */
	const switchTab = (val: number) => {
		if (activeTab.value === val) return
		activeTab.value = val
		nowClass.value = 0
		goodsList.value=[]
		page.value=1
		GetSystemGoodsType()	
	}

	/**
	 * 滚动到底部加载更多商品
	 */
	const loadMoreGoods = () => {
		getList()
	}
</script>

<style scoped lang="scss">
	// ==================== 基础样式 ====================
	page {
		background-color: #fff;
	}

	/* ===== 切换栏 ===== */
	.tab-bar {
		position: fixed;
		top: 0rpx;
		left: 0;
		z-index: 99;
		display: flex;
		width: 100%;
		background: #fff;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.tab-item {
		flex: 1;
		padding: 24rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		position: relative;
		transition: color 0.2s;
	}

	.tab-item.active {
		color: var(--nav-mian);
		font-weight: 600;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: var(--nav-mian);
		border-radius: 2rpx;
	}

	.category-container {
		display: flex;
		width: 100%;
		overflow: hidden;
	}

	.left-sidebar {
		width: 200rpx;
		background-color: #F5F5F5;
		flex-shrink: 0;
	}

	.sidebar-item {
		padding: 30rpx 20rpx;
		text-align: center;
		font-size: 28rpx;
		transition: all 0.3s;
	}

	.right-content {
		flex: 1;
		background-color: #fff;
		padding: 20rpx;
	}

	.banner {
		width: 100%;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.goods-list {
		display: flex;
		flex-direction: column;
	}

	.goods-item {
		width: 100%;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		padding: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.goods-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.goods-info {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5;
	}

	.goods-bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.goods-price {
		display: flex;
		align-items: baseline;
	}

	.new-price {
		font-weight: 700;
		color: var(--nav-mian);
		font-size: 36rpx;
	}

	.old-price {
		margin-left: 10rpx;
		font-size: 22rpx;
		text-decoration: line-through;
		color: #999;
	}

	.goods-sales {
		font-size: 22rpx;
		color: #999;
	}

	.loading-text {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 26rpx;
	}

	.active {
		background-color: #fff;
		color: var(--nav-mian);
		font-weight: 600;
		position: relative;
	}

	

	.noactive {
		background-color: transparent;
		color: #333;
	}

	.border-20 {
		border-radius: 20rpx;
	}

	.padding-20 {
		padding: 20rpx;
	}

	// ==================== 骨架屏样式 ====================

	// 骨架屏容器 - 左右布局
	.skeleton-container {
		display: flex;
		width: 100%;
		overflow: hidden;
	}

	// 骨架屏基础元素样式 - 渐变灰色占位块
	.skeleton-item {
		// 使用柔和的渐变背景，从浅灰到稍深的灰色
		background: linear-gradient(135deg,
				#f8f8f8 0%,
				#f0f0f0 50%,
				#e8e8e8 100%);
		border-radius: 8rpx;
	}

	// ==================== 闪光动画效果 ====================
	// 使用CSS动画实现骨架屏的闪光效果
	.skeleton-shimmer {
		position: relative;
		overflow: hidden;

		// 创建闪光层
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: -100%; // 从左侧开始
			width: 100%;
			height: 100%;
			// 使用多层渐变创造更丰富的闪光效果
			background: linear-gradient(90deg,
					transparent 0%,
					rgba(255, 255, 255, 0.3) 20%, // 淡入
					rgba(255, 255, 255, 0.6) 40%, // 最亮
					rgba(255, 255, 255, 0.4) 60%, // 稍暗
					rgba(255, 255, 255, 0.2) 80%, // 淡出
					transparent 100%);
			animation: skeleton-shimmer 2s infinite; // 循环播放动画，稍慢一点更自然
		}

		// 添加一个额外的渐变层，创造更深的视觉层次
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg,
					rgba(255, 255, 255, 0.1) 0%,
					transparent 50%,
					rgba(0, 0, 0, 0.03) 100%);
			pointer-events: none; // 不影响点击
		}
	}

	// 闪光动画关键帧
	@keyframes skeleton-shimmer {
		0% {
			transform: translateX(-100%); // 起始位置
		}

		100% {
			transform: translateX(100%); // 结束位置
		}
	}

	// ==================== 左侧分类栏骨架屏 ====================
	.skeleton-left-sidebar {
		width: 200rpx;
		background-color: #F5F5F5;
		flex-shrink: 0;
		padding: 20rpx 0;
	}

	.skeleton-sidebar-item {
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: center;
	}

	.skeleton-sidebar-item .skeleton-item {
		width: 120rpx;
		height: 28rpx;
	}

	// ==================== 右侧内容区域骨架屏 ====================
	.skeleton-right-content {
		flex: 1;
		background-color: #fff;
		padding: 20rpx;
	}



	// 商品列表骨架
	.skeleton-goods-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.skeleton-goods-item {
		width: 100%;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		padding: 20rpx;
	}

	.skeleton-goods-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.skeleton-goods-info {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.skeleton-goods-name {
		width: 100%;
		height: 28rpx;
		margin-bottom: 12rpx;

		&.short {
			width: 60%;
			margin-bottom: 8rpx;
		}
	}

	.skeleton-goods-sales {
		width: 100rpx;
		height: 24rpx;
		margin-bottom: 16rpx;
	}

	.skeleton-goods-bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.skeleton-goods-price {
		width: 140rpx;
		height: 36rpx;
	}
</style>