<template>
	<view class="choiceness-container">
		<!-- 自定义沉浸式头部导航 -->
		<view class="custom-header">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="nav-bar">
				<view class="nav-left back-area" @click="goBack">
					<text class="back-icon">〈</text>
				</view>
				<view class="nav-title">精选品牌</view>
				<view class="nav-right"></view>
			</view>
		</view>

		<!-- 占位符确保内容不被顶部悬浮覆盖 -->
		<view class="header-placeholder" :style="{ height: navBarHeight + 'px' }"></view>

		<!-- 顶部深紫渐变横向品牌滚动专区 (支持右滑到底无限加载) -->
		<view class="top-scroll-brands-section">
			<scroll-view scroll-x class="top-brands-scroll" :show-scrollbar="false" @scroll="onTopBrandsScroll" @scrolltolower="loadMoreTopBrands">
				<view class="t-brand-card" v-for="(item, idx) in topBrandList" :key="idx" @click="goToTopBrand(item)">
					<view class="t-logo-box">
						<image class="t-logo-img" :src="item.brand_logo" mode="aspectFit"></image>
					</view>
					<view class="t-name-box">
						<text class="t-name-text">{{ item.fq_brand_name }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 底部丝滑游标指示器 -->
			<view class="t-indicator-wrap" v-if="topBrandList.length > 3">
				<view class="t-indicator-bg">
					<view class="t-indicator-slider" :style="{ left: topSliderLeft + '%' }"></view>
				</view>
			</view>
			
			<!-- 页面横幅 / 主题标语区 (直接替换为设计定稿的高清专场背书照片) -->
			<view class="page-banner-img-box">
				<image class="banner-photo" src="https://web.cms.hykefu.cn/static/img/tm-desc.png" mode="widthFix"></image>
			</view>
		</view>


		<!-- 横向分类选项卡导航区 (带有圆角光泽背景与高级紫标指示横线) -->
		<view class="category-tabs-container">
			<scroll-view scroll-x class="category-tabs-scroll" :show-scrollbar="false">
				<view class="cat-tab-item" v-for="(cat, cIdx) in categoryList" :key="cIdx" @click="onSelectCategory(cat.cat_id)">
					<text class="cat-tab-text" :class="{ 'active-text': activeCatId === cat.cat_id }">{{ cat.cat_name }}</text>
					<!-- 底部高亮吸睛下划线 -->
					<view class="cat-tab-line" v-if="activeCatId === cat.cat_id"></view>
				</view>
			</scroll-view>
		</view>

		<!-- 品牌流式与单品热销集合滑动容器 -->
		<scroll-view scroll-y class="brand-list-scroll" :show-scrollbar="false">
			<!-- 新增：当分类下辖无专场数据时展示的高保真空态底板 (1:1 匹配截图小紫线与莫兰迪灰字) -->
			<view class="empty-loaded-tip" v-if="brandList.length === 0">
				<view class="elt-top-line"></view>
				<text class="elt-text">已为您加载完毕</text>
			</view>

			<!-- 上部精选品牌店铺海报专场列表 -->
			<view class="brand-card-item" v-for="(shop, sIdx) in brandList" :key="sIdx">
				<!-- 品牌顶部大图背景区，点击直达品牌专区详情页 -->
				<view class="brand-hero" @click="goToBrandDetail(shop)">
					<image class="hero-bg" :src="shop.bg" mode="aspectFill"></image>
					<view class="hero-overlay"></view>
					<view class="brand-meta">
						<view class="logo-box">
							<image class="logo-img" :src="shop.logo" mode="aspectFit"></image>
						</view>
						<view class="meta-info">
							<view class="name-row">
								<text class="brand-name">{{ shop.name }}</text>
								<view class="brand-tag">精选特卖</view>
							</view>
							<view class="brand-desc">{{ shop.desc }}</view>
							<view class="tags-row">
								<text class="p-tag" v-for="(tag, tIdx) in shop.tags" :key="tIdx">{{ tag }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 品牌下辖热门商品矩阵 -->
				<view class="goods-matrix">
					<view class="matrix-item" v-for="(goods, gIdx) in shop.items" :key="gIdx" @click="goToDetail(goods.id)">
						<view class="goods-img-wrapper">
							<!-- 限量/补贴角标 -->
							<view class="badge-tag" v-if="goods.badge">{{ goods.badge }}</view>
							<image class="goods-img" :src="goods.img" mode="aspectFill"></image>
							<view class="sold-overlay">热卖 {{ goods.sold }} 件</view>
						</view>
						<view class="goods-info">
							<view class="goods-title">{{ goods.title }}</view>
							<view class="price-row">
								<view class="price-current">
									<text class="symbol">￥</text>
									<text class="value">{{ goods.price }}</text>
								</view>
								<text class="price-old">￥{{ goods.oldPrice }}</text>
							</view>
							<!-- 券抵扣胶囊 -->
							<view class="coupon-capsule" v-if="goods.coupon > 0">
								<text class="c-left">券</text>
								<text class="c-right">{{ goods.coupon }}元</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 栏目分隔条：实时热卖单品爆单榜 (仅精选/推荐会场展示) -->
			<view class="section-divider" v-if="activeCatId === 0">
				<view class="divider-line"></view>
				<view class="divider-title">
					<text class="fire-icon">🔥</text>
					<text>品牌热销榜 · 实时爆品特卖</text>
				</view>
				<view class="divider-line"></view>
			</view>

			<!-- 下部双列爆品流式网格 (完美整合 brandSale 接口源，仅精选/推荐会场展示) -->
			<view class="brand-sale-grid" v-if="activeCatId === 0">
				<view class="bs-card" v-for="(item, bIdx) in brandSaleList" :key="bIdx" @click="goToDetail(item.id)">
					<!-- 正方形顶图容器 -->
					<view class="bs-img-box">
						<view class="bs-badge" v-if="item.label && item.label.length > 0">{{ item.label[0] }}</view>
						<view class="bs-badge" v-else-if="item.discount">立省{{ item.discount }}元</view>
						<image class="bs-img" :src="item.itempic" mode="aspectFill"></image>
						<view class="bs-sold">疯抢 {{ item.itemsale }} 件</view>
					</view>
					<!-- 中枢文案 -->
					<view class="bs-info">
						<view class="bs-title">{{ item.itemshorttitle || item.itemtitle }}</view>
						<view class="bs-price-wrap">
							<view class="bs-current">
								<text class="bs-symbol">￥</text>
								<text class="bs-val">{{ item.itemendprice }}</text>
							</view>
							<text class="bs-old">￥{{ item.itemprice }}</text>
						</view>
						<!-- 大字号抵扣券胶囊 -->
						<view class="bs-coupon" v-if="item.couponmoney > 0">
							<text class="bsc-tag">券</text>
							<text class="bsc-num">{{ item.couponmoney }}元</text>
						</view>
					</view>
					<!-- 最底端独立大牌身份认证横条 (圆形 Logo + 名字，点击下钻店铺) -->
					<view class="bs-brand-bar" v-if="item.brand_info || item.brand_name" @click.stop="goToBottomBrandDetail(item)">
						<image class="bsb-logo" v-if="item.brand_info && item.brand_info.brand_logo" :src="item.brand_info.brand_logo" mode="aspectFit"></image>
						<image class="bsb-logo" v-else src="https://cdn-icons-png.flaticon.com/512/882/882730.png" mode="aspectFit"></image>
						<text class="bsb-name">{{ (item.brand_info && item.brand_info.fq_brand_name) || item.brand_name || item.shopname }}</text>
					</view>
				</view>
			</view>
			
			<view class="bottom-tip" v-if="activeCatId === 0">-- 更多精选大牌与热卖单品持续上新中 --</view>
		</scroll-view>
	</view>
</template>

<script>
	import http from '@/request/request.js';

	export default {
		data() {
			return {
				statusBarHeight: 44,
				topSliderLeft: 0,
				// 横向翻页控制变量
				topPage: 1,
				topLoading: false,
				topFinished: false,
				// 当前激活选中的类目 ID
				activeCatId: 0,
				// 默认分类导航高保真死数据底座
				categoryList: [
					{ cat_id: 0, cat_name: "精选" },
					{ cat_id: 11, cat_name: "美食" },
					{ cat_id: 4, cat_name: "美妆" },
					{ cat_id: 10, cat_name: "居家" },
					{ cat_id: 9, cat_name: "母婴" },
					{ cat_id: 13, cat_name: "家电" },
					{ cat_id: 2, cat_name: "男装" },
					{ cat_id: 1, cat_name: "女装" },
					{ cat_id: 6, cat_name: "鞋品" }
				],
				// 顶部横向滚动品牌完整高精死数据底座（自动补全 https）
				topBrandList: [
					{ id: 145, fq_brand_name: "DARLIE好来", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FgrowKsguWGj9TRewurqGiaCRpjj" },
					{ id: 537, fq_brand_name: "英氏", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FpUP2AsSv41uaLFzGV9dBhdYPMcm" },
					{ id: 263, fq_brand_name: "宝宝金水", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FvhmQCKbJvJ-M3s1NoYybWX_Pk_n" },
					{ id: 128, fq_brand_name: "得力", brand_logo: "https://img.alicdn.com/tfscom/TB1_tPSDwDqK1RjSZSyXXaxEVXa" },
					{ id: 840, fq_brand_name: "参半", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FlXoNjuOE1KBgEWS1oirr2rn2QnV" },
					{ id: 857, fq_brand_name: "伊利", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FpWriO1jA1dWBxi0_cJdQiqI39mu" },
					{ id: 11, fq_brand_name: "维达", brand_logo: "https://img.alicdn.com/tfscom/TB1P1f.DxjaK1RjSZFAXXbdLFXa" },
					{ id: 368, fq_brand_name: "白象", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fn3j76pBP4fBXNONMWaLQG6ESGQw" },
					{ id: 392, fq_brand_name: "十月结晶", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FrV6PAll_Y5Yy6qac1LpZMuSKirZ" },
					{ id: 586, fq_brand_name: "认养一头牛", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FmBJ-tDJcheqYn7U4iKLPKKDZYZd" },
					{ id: 582, fq_brand_name: "舒蕾", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FipgVuozAEqWnEO9eV0ovgYp9_nF" },
					{ id: 1940, fq_brand_name: "味滋源", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fnnt-YPRuR9FU1DSjnJNzCbBYFXo" },
					{ id: 295, fq_brand_name: "好爸爸", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fk0F3C8Yaq47_WVpync9DgsEigDl" },
					{ id: 45, fq_brand_name: "七度空间", brand_logo: "https://img.alicdn.com/tfscom/TB1tt3lDxjaK1RjSZKzXXXVwXXa" },
					{ id: 474, fq_brand_name: "奥妙", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FuD0pymnDuJjC6QxPK0s01x1IJun" },
					{ id: 475, fq_brand_name: "超能", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fl5ClCtmpIC4pqj-1vhrSTD18HQl" },
					{ id: 12, fq_brand_name: "良品铺子", brand_logo: "https://img.alicdn.com/tfscom/TB1LBjWDCzqK1RjSZFLXXcn2XXa" },
					{ id: 2155, fq_brand_name: "贝德美", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FhYLAg0sHyTTWIjMnifg2E6asfT5" },
					{ id: 2045, fq_brand_name: "PMPM", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FosnaV08sMDXFsQIwVXM9YVRyxng" },
					{ id: 81, fq_brand_name: "贝亲", brand_logo: "https://img.alicdn.com/tfscom/TB199L1DxTpK1RjSZFMXXbG_VXa" }
				],
				// 默认大牌商品展示专区店铺流底座
				brandList: [
					{
						name: '伊利官方旗舰店',
						desc: '大牌优选乳品！全网热销100万+',
						bg: 'https://images.unsplash.com/photo-1590080875515-8a3a8dc5735e?w=800&q=80',
						logo: 'https://img-haodanku-com.cdn.fudaiapp.com/FpWriO1jA1dWBxi0_cJdQiqI39mu',
						tags: ['限时加补+大额券', '淘金币大额补'],
						items: [
							{ id: '55495891', img: 'https://img.alicdn.com/i4/725677994/O1CN016AbBIJ28vJD93ia6k_!!725677994.jpg_310x310', title: '【50支】伊利冰淇淋巧乐兹四个圈雪糕组合', price: '58.50', oldPrice: '68.5', coupon: 0, sold: '1.0万', badge: '官方立减' },
							{ id: '55485105', img: 'https://img.alicdn.com/bao/uploaded/O1CN01UiyFIg1TM8bPOLGes_!!6000000002367-0-yinhe.jpg_310x310', title: '伊利中老年富硒高钙成人奶粉700g送礼正品', price: '73.80', oldPrice: '83.8', coupon: 0, sold: '8.0万', badge: '最低价' },
							{ id: '55479684', img: 'https://img.alicdn.com/bao/uploaded/O1CN01nCg4S01zkTN2r7cup_!!6000000006752-0-yinhe.jpg_310x310', title: '伊利纯牛奶/脱脂250ml*16盒*1箱正品囤货装', price: '27.90', oldPrice: '47.2', coupon: 0, sold: '7.0万', badge: '限时直降' }
						]
					},
					{
						name: '维达官方旗舰店',
						desc: '闪电加补！维达纸品超值囤',
						bg: 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80',
						logo: 'https://img.alicdn.com/tfscom/TB1P1f.DxjaK1RjSZFAXXbdLFXa',
						tags: ['限时3倍补', '淘金币大额抵'],
						items: [
							{ id: '55487641', img: 'http://img-haodanku-com.cdn.fudaiapp.com/0_619945749414_1744945334.jpg_310', title: '维达细韧抽纸3层120抽20包整箱实惠装', price: '19.80', oldPrice: '29.8', coupon: 0, sold: '2.0万', badge: '下拉抢' },
							{ id: '55502878', img: 'https://img.alicdn.com/imgextra/i3/2424338511/O1CN01ZltEUP2Ck5oljbWHk_!!2424338511.jpg_310x310', title: '维达吾皇超韧随身手帕纸4层便携式小包纸巾', price: '7.27', oldPrice: '11.0', coupon: 1, sold: '1.0万', badge: '补贴价' },
							{ id: '55492702', img: 'https://img.alicdn.com/bao/uploaded/i3/2424338511/O1CN01NvsZod2Ck631NLpda_!!4611686018427385935-0-item_pic.jpg_310x310', title: '维达超韧抽纸家用面巾纸卫生纸巾3层120抽', price: '25.91', oldPrice: '35.9', coupon: 0, sold: '2.0万', badge: '金币抵扣' }
						]
					}
				],
				// 底部品牌热卖单品双列网格完整高精死数据底座
				brandSaleList: [
					{
						id: 55492039,
						itemtitle: "十月结晶宝宝儿童准孕妇精油贴防蚊驱蚊液家庭专用电热蚊香液组合",
						itemshorttitle: "十月结晶蚊香液三液一器",
						itemprice: "37.90",
						itemendprice: "14.90",
						itemsale: "3.0万",
						discount: "3.90",
						couponmoney: 9,
						itempic: "https://img.alicdn.com/bao/uploaded/O1CN01Y7SUue1UCnrCQbyR5_!!6000000002482-0-yinhe.jpg_310x310",
						label: ["淘金币抵扣", "9元券"],
						brand_name: "十月结晶",
						shopname: "十月结晶官方旗舰店",
						brand_info: {
							fq_brand_name: "十月结晶",
							brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FrV6PAll_Y5Yy6qac1LpZMuSKirZ"
						}
					},
					{
						id: 55504025,
						itemtitle: "【会员享加赠】舒蕾茶树精油控油去屑洗发露蓬松洗发水470g",
						itemshorttitle: "舒蕾茶树控油去屑蓬松洗发水530g",
						itemprice: "64.00",
						itemendprice: "29.00",
						itemsale: "1.0万",
						discount: "4.50",
						couponmoney: 21,
						itempic: "https://img.alicdn.com/bao/uploaded/O1CN019jCAUk1xi3tSDnljW_!!6000000006476-0-yinhe.jpg_310x310",
						label: ["官方8.5折", "包邮"],
						brand_name: "舒蕾",
						shopname: "舒蕾洗护旗舰店",
						brand_info: {
							fq_brand_name: "舒蕾",
							brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FipgVuozAEqWnEO9eV0ovgYp9_nF"
						}
					},
					{
						id: 55495891,
						itemtitle: "【50支】伊利冰淇淋巧乐兹四个圈雪糕组合",
						itemshorttitle: "1.1/支四个圈组合!花老冰棍的米买高级货",
						itemprice: "58.50",
						itemendprice: "58.50",
						itemsale: "1.0万",
						discount: "10.00",
						couponmoney: 0,
						itempic: "https://img.alicdn.com/i4/725677994/O1CN016AbBIJ28vJD93ia6k_!!725677994.jpg_310x310",
						label: ["官方立减50元", "最低价"],
						brand_name: "伊利",
						shopname: "天猫超市",
						brand_info: {
							fq_brand_name: "伊利",
							brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FpWriO1jA1dWBxi0_cJdQiqI39mu"
						}
					},
					{
						id: 55505092,
						itemtitle: "贝德美儿童健齿益生菌牙膏低氟固齿宝宝婴幼儿童牙刷牙膏牙龈护理",
						itemshorttitle: "【送牙刷】贝德美儿童防蛀牙膏",
						itemprice: "99.90",
						itemendprice: "19.90",
						itemsale: "5.0万",
						discount: "2.00",
						couponmoney: 65,
						itempic: "https://img-haodanku-com.cdn.fudaiapp.com/fd_1760011073478_186872_310",
						label: ["175天最低价", "低氟"],
						brand_name: "贝德美",
						shopname: "贝德美旗舰店",
						brand_info: {
							fq_brand_name: "贝德美",
							brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FhYLAg0sHyTTWIjMnifg2E6asfT5"
						}
					},
					{
						id: 55502518,
						itemtitle: "植护10斤大桶装洗衣液持久留香双头家用实惠装整箱去污渍香氛正品",
						itemshorttitle: "10斤植护大桶装香氛洗衣液",
						itemprice: "49.90",
						itemendprice: "29.90",
						itemsale: "1.0万",
						discount: "6.00",
						couponmoney: 20,
						itempic: "https://img.alicdn.com/imgextra/i4/2213165051053/O1CN01uuEnsS1JeKBuVZf0Q_!!2213165051053.png_310x310",
						label: ["280天最低价", "大容量"],
						brand_name: "植护",
						shopname: "植护旗舰店",
						brand_info: {
							fq_brand_name: "植护",
							brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fls7dtPb7yN7QTxHxjQi15eqADbr"
						}
					},
					{
						id: 55502878,
						itemtitle: "维达吾皇超韧随身手帕纸4层便携式小包纸巾实惠装餐巾纸面巾纸",
						itemshorttitle: "维达吾皇超韧随身手帕纸实惠装",
						itemprice: "11.00",
						itemendprice: "7.27",
						itemsale: "1.0万",
						discount: "6.60",
						couponmoney: 1,
						itempic: "https://img.alicdn.com/imgextra/i3/2424338511/O1CN01ZltEUP2Ck5oljbWHk_!!2424338511.jpg_310x310",
						label: ["补贴3元", "包邮"],
						brand_name: "维达",
						shopname: "维达官方旗舰店",
						brand_info: {
							fq_brand_name: "维达",
							brand_logo: "https://img.alicdn.com/tfscom/TB1P1f.DxjaK1RjSZFAXXbdLFXa"
						}
					}
				]
			}
		},
		computed: {
			navBarHeight() {
				return this.statusBarHeight + 44;
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.statusBarHeight = sysInfo.statusBarHeight || 44;
			
			// 并发拉取首屏三大数据体流
			this.fetchTopBrandsData();
			this.fetchChoicenessData();
			this.fetchBrandSaleData();
		},
		methods: {
			goBack() {
				const pages = getCurrentPages();
				if (pages && pages.length > 1) {
					uni.navigateBack({ delta: 1 });
				} else {
					uni.reLaunch({ url: '/pages/index/index' });
				}
			},
			goToDetail(id) {
				console.log('精选品牌页点击商品，跳转ID:', id);
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				});
			},
			goToTopBrand(item) {
				console.log('点击顶部品牌专区卡片，导向下钻专供页面ID:', item.id);
				uni.navigateTo({
					url: `/pages/special-sale/details?id=${item.id}`
				});
			},
			// 点击专供大图海报头部区，跳转专属自画像详情 (打通精选取 brand_id、分类取 id 的双轨业务链路)
			goToBrandDetail(shop) {
				let bid = this.activeCatId === 0 ? shop.brand_id : shop.id;
				// 双向容错保底机制
				if (!bid) bid = shop.brand_id || shop.id || 1292;
				console.log(`点击专区海报跳转详情页，当前状态激活类目ID: ${this.activeCatId}，取值ID:`, bid);
				uni.navigateTo({
					url: `/pages/special-sale/details?id=${bid}`
				});
			},
			// 点击底层热卖榜单独立背书条，下钻专属品牌页
			goToBottomBrandDetail(item) {
				let bid = 1292;
				if (item.brand_info && item.brand_info.id) {
					bid = item.brand_info.id;
				} else if (item.id) {
					bid = item.id;
				}
				console.log('点击底栏品牌识别条，下钻品牌详情ID:', bid);
				uni.navigateTo({
					url: `/pages/special-sale/details?id=${bid}`
				});
			},
			// 改造多路分发状态机：切换即刻原子级清空数据源，阻断旧列表遗留展示
			onSelectCategory(catId) {
				if (this.activeCatId === catId) return;
				this.activeCatId = catId;
				console.log('精选品牌切换导航类目分流，激活ID:', catId);
				
				// 核心修复：立刻原子级清空专场数据源，避免“上一个有下一个没有时残留展示上一个”
				this.brandList = [];
				
				uni.showLoading({ title: '加载中...', mask: true });
				
				if (catId === 0) {
					// 走精选通用专供数据源
					this.fetchChoicenessData();
				} else {
					// 走类目专属接口引擎
					this.fetchBrandCategoryData(catId);
				}
				
				setTimeout(() => {
					uni.hideLoading();
				}, 400);
			},
			onTopBrandsScroll(e) {
				const { scrollLeft, scrollWidth } = e.detail;
				if (!scrollWidth || scrollWidth <= 375) return;
				const maxScroll = scrollWidth - 375;
				let ratio = scrollLeft / maxScroll;
				if (ratio < 0) ratio = 0;
				if (ratio > 1) ratio = 1;
				this.topSliderLeft = ratio * 62.5;
			},
			// 向右滑动触底触发翻页加载后续数据
			loadMoreTopBrands() {
				if (this.topLoading || this.topFinished) return;
				this.topPage += 1;
				console.log('上方品牌横向滚动触发触底翻页，即将请求页码:', this.topPage);
				this.fetchTopBrandsData(true);
			},
			fetchTopBrandsData(isLoadMore = false) {
				if (this.topLoading) return;
				this.topLoading = true;
				http.get(`https://api.cmspro.haodanku.com/brandItem/getBrands?page=${this.topPage}&page_size=20&cid=YsWZ21tx`)
					.then((res) => {
						if (res.data && Array.isArray(res.data.list)) {
							const list = res.data.list.map(item => ({
								id: item.id,
								fq_brand_name: item.fq_brand_name,
								brand_logo: item.brand_logo ? item.brand_logo.replace('http://', 'https://') : ''
							})).filter(item => item.fq_brand_name && item.brand_logo);

							if (isLoadMore) {
								this.topBrandList = [...this.topBrandList, ...list];
							} else {
								if (list.length > 0) {
									this.topBrandList = list;
								}
							}

							const pagination = res.data.pagination;
							if (pagination && this.topPage >= pagination.page_count) {
								this.topFinished = true;
							} else if (list.length < 20) {
								this.topFinished = true;
							}
						} else {
							if (isLoadMore) {
								this.topFinished = true;
							}
						}
					})
					.catch((err) => {
						console.log('拉取上方滚动品牌接口异常', err);
						if (isLoadMore && this.topPage > 1) {
							this.topPage -= 1;
						}
					})
					.finally(() => {
						this.topLoading = false;
					});
			},
			// 全量通用专场初始化及导航字典挂载
			fetchChoicenessData() {
				http.get('https://api.cmspro.haodanku.com/brandItem/choiceness?is_get_category=1&cid=YsWZ21tx')
					.then((res) => {
						if (res.data) {
							// 1. 挂载/补充导航字典
							if (res.data.category && Array.isArray(res.data.category)) {
								const mappedCats = res.data.category.map(c => ({
									cat_id: Number(c.cat_id),
									cat_name: c.cat_name
								}));
								this.categoryList = [{ cat_id: 0, cat_name: "精选" }, ...mappedCats];
							}

							// 2. 挂载全景精选海报流
							if (res.data.brand_prefecture && Array.isArray(res.data.brand_prefecture)) {
								const list = res.data.brand_prefecture.map(shop => {
									let logoStr = shop.brand_logo ? shop.brand_logo.replace('http://', 'https://') : 'https://cdn-icons-png.flaticon.com/512/882/882730.png';
									let bgStr = shop.backimage ? shop.backimage.replace('http://', 'https://') : 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80';
									
									return {
										brand_id: shop.brand_id || shop.id || 1292,
										id: shop.id || shop.brand_id || 1292,
										name: shop.fq_brand_name || '大牌精选特卖',
										desc: shop.title || '官方直降 爆款限时抢',
										bg: bgStr,
										logo: logoStr,
										tags: shop.label ? shop.label.slice(0, 2) : ['限量立减专区', '官方授权正品'],
										items: (shop.items || []).slice(0, 3).map(goods => ({
											id: goods.id,
											img: goods.itempic ? goods.itempic.replace('http://', 'https://') : '',
											title: goods.itemshorttitle,
											price: goods.itemendprice,
											oldPrice: goods.itemprice || (parseFloat(goods.itemendprice) + parseFloat(goods.couponmoney || 10)).toFixed(1),
											coupon: parseFloat(goods.couponmoney || 0),
											sold: goods.itemsale >= 10000 ? (goods.itemsale / 10000).toFixed(1) + '万' : goods.itemsale,
											badge: goods.couponmoney ? '大额券' : '直降'
										}))
									};
								}).filter(shop => shop.items && shop.items.length > 0);

								if (list.length > 0) {
									this.brandList = list;
								}
							}
						}
					})
					.catch((err) => {
						console.log('拉取线上精选品牌专场分类联动数据失败，采用固定底座显示', err);
					});
			},
			// 接驳 brandCategory 接口分流，内置光影轮盘自动修复缺失背景。取消突兀 Toast 完美适配内嵌底座
			fetchBrandCategoryData(categoryId) {
				http.get(`https://api.cmspro.haodanku.com/brandItem/brandCategory?category_id=${categoryId}&cid=YsWZ21tx`)
					.then((res) => {
						if (res.data && Array.isArray(res.data.brands)) {
							// 预置唯美光影/极简质感图库底座，智能赋能无海报的品牌
							const defaultBanners = [
								'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80',
								'https://images.unsplash.com/photo-1590080875515-8a3a8dc5735e?w=800&q=80',
								'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=800&q=80',
								'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=800&q=80',
								'https://images.unsplash.com/photo-1621939514649-280e2fc8a00w?w=800&q=80'
							];

							const list = res.data.brands.map((b, bIndex) => {
								let logoStr = b.brand_logo ? b.brand_logo.replace('http://', 'https://') : 'https://cdn-icons-png.flaticon.com/512/882/882730.png';
								let bgStr = defaultBanners[bIndex % defaultBanners.length];
								
								// 智能提取旗下主打爆款单品名作为海报副标语
								let shopDesc = '品牌官方授权直供 · 精品热销';
								if (b.items && b.items.length > 0) {
									shopDesc = b.items[0].itemshorttitle || b.items[0].itemtitle || shopDesc;
								}

								return {
									brand_id: b.brand_id || b.id || 1292,
									id: b.id || b.brand_id || 1292,
									name: b.fq_brand_name || b.tb_brand_name || '大牌精选特卖',
									desc: shopDesc,
									bg: bgStr,
									logo: logoStr,
									tags: ['正品保障', '类目好货'],
									items: (b.items || []).slice(0, 3).map(goods => ({
										id: goods.id,
										img: goods.itempic ? goods.itempic.replace('http://', 'https://') : '',
										title: goods.itemshorttitle || goods.itemtitle,
										price: goods.itemendprice,
										oldPrice: goods.itemprice || (parseFloat(goods.itemendprice) + parseFloat(goods.couponmoney || 10)).toFixed(1),
										coupon: parseFloat(goods.couponmoney || 0),
										sold: goods.itemsale >= 10000 ? (goods.itemsale / 10000).toFixed(1) + '万' : goods.itemsale,
										badge: goods.couponmoney ? '大额券' : '直降'
									}))
								};
							}).filter(shop => shop.items && shop.items.length > 0);

							if (list.length > 0) {
								this.brandList = list;
							} else {
								// 此时 this.brandList 已经初始化为 []，天然浮现“已为您加载完毕”面板
								console.log('指定分类回传品牌为空，平滑展示占位提示面板');
							}
						} else {
							console.log('拉取分类数据异常或格式不对');
						}
					})
					.catch((err) => {
						console.log('调用 brandCategory 接口失败', err);
					});
			},
			// 底部品牌热销单品聚合数据流
			fetchBrandSaleData() {
				http.get('https://api.cmspro.haodanku.com/brandItem/brandSale?cid=YsWZ21tx')
					.then((res) => {
						if (res.data && Array.isArray(res.data.items)) {
							const list = res.data.items.map(item => {
								let logoUrl = '';
								if (item.brand_info && item.brand_info.brand_logo) {
									logoUrl = item.brand_info.brand_logo.replace('http://', 'https://');
								}
								let picUrl = item.itempic ? item.itempic.replace('http://', 'https://') : '';
								
								let sales = item.itemsale;
								if (sales >= 10000) {
									sales = (sales / 10000).toFixed(1) + '万';
								}

								return {
									id: item.id,
									itemtitle: item.itemtitle,
									itemshorttitle: item.itemshorttitle,
									itemprice: item.itemprice,
									itemendprice: item.itemendprice,
									itemsale: sales,
									discount: item.discount,
									couponmoney: parseFloat(item.couponmoney || 0),
									itempic: picUrl,
									label: Array.isArray(item.label) ? item.label : [],
									brand_name: item.brand_name,
									shopname: item.shopname,
									brand_info: {
										fq_brand_name: (item.brand_info && item.brand_info.fq_brand_name) || item.brand_name,
										brand_logo: logoUrl
									}
								};
							}).filter(item => item.itemendprice && item.itempic);

							if (list.length > 0) {
								this.brandSaleList = list;
							}
						}
					})
					.catch((err) => {
						console.log('拉取底部品牌热销接口异常，采用极尽精美的静态底座显示', err);
					});
			}
		}
	}
</script>

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

	/* 自定义沉浸式头部 */
	.custom-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(20rpx);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
		z-index: 999;
	}

	.status-bar {
		width: 100%;
	}

	.nav-bar {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.nav-left {
		width: 80rpx;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.back-icon {
		font-size: 38rpx;
		color: #333333;
		font-weight: bold;
	}

	.nav-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
	}

	.nav-right {
		width: 80rpx;
	}

	.header-placeholder {
		width: 100%;
		flex-shrink: 0;
	}

	/* 顶部深紫渐变横向滚动专区 (1:1 原生惊艳质感) */
	.top-scroll-brands-section {
		background: linear-gradient(135deg, #8a2be2 0%, #4b0082 100%);
		padding: 24rpx 0 16rpx;
		width: 100%;
		flex-shrink: 0;
	}

	.top-brands-scroll {
		white-space: nowrap;
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.t-brand-card {
		display: inline-block;
		width: 160rpx;
		height: 120rpx;
		margin-right: 16rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.12);
		vertical-align: top;
	}

	.t-brand-card:last-child {
		margin-right: 48rpx;
	}

	/* 卡片上半部纯白底包裹 Logo */
	.t-logo-box {
		height: 72rpx; /* 60% */
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.t-logo-img {
		width: 100%;
		height: 100%;
	}

	/* 卡片下半部粉桃底包裹文字 */
	.t-name-box {
		height: 48rpx; /* 40% */
		background-color: #ffe4e1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
	}

	.t-name-text {
		font-size: 20rpx;
		color: #8b4513;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		text-align: center;
	}

	/* 底部游标指示底栏 */
	.t-indicator-wrap {
		display: flex;
		justify-content: center;
		margin-top: 14rpx;
	}

	.t-indicator-bg {
		width: 80rpx;
		height: 8rpx;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 4rpx;
		position: relative;
		overflow: hidden;
	}

	.t-indicator-slider {
		position: absolute;
		top: 0;
		width: 30rpx;
		height: 100%;
		background: #ffffff;
		border-radius: 4rpx;
		transition: left 0.05s linear;
	}

	/* 页面横幅标语区 (替换为设计定稿的高清专场背书照片容器) */
	.page-banner-img-box {
		margin: 20rpx 30rpx 0;
		border-radius: 20rpx;
		overflow: hidden;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.banner-photo {
		width: 100%;
		display: block;
	}

	/* 横向分类选项卡导航区 */
	.category-tabs-container {
		background: #ffffff;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		margin: 0 30rpx;
		padding: 0 10rpx;
		box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.02);
		border-bottom: 1rpx solid #f8f8f8;
		flex-shrink: 0;
	}

	.category-tabs-scroll {
		white-space: nowrap;
		width: 100%;
		height: 88rpx;
		box-sizing: border-box;
	}

	.cat-tab-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		padding: 0 24rpx;
		position: relative;
		vertical-align: top;
	}

	.cat-tab-text {
		font-size: 28rpx;
		color: #666666;
		transition: all 0.2s linear;
	}

	.active-text {
		color: #8a2be2;
		font-weight: bold;
		font-size: 30rpx;
	}

	.cat-tab-line {
		position: absolute;
		bottom: 8rpx;
		width: 32rpx;
		height: 4rpx;
		background: #8a2be2;
		border-radius: 2rpx;
	}

	/* 品牌流式与单品区 */
	.brand-list-scroll {
		flex: 1;
		width: 100%;
		overflow-y: auto;
	}

	/* 新增：高保真空载/无数据底板展示区 */
	.empty-loaded-tip {
		background-color: #f8f8fb;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 40rpx;
		padding: 60rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.elt-top-line {
		width: 32rpx;
		height: 4rpx;
		background-color: #8a2be2;
		border-radius: 2rpx;
		margin-bottom: 24rpx;
	}

	.elt-text {
		font-size: 26rpx;
		color: #999999;
		letter-spacing: 2rpx;
	}

	/* 调整首图圆角拼合：上面已被导航栏圆角包裹，下方列表无缝紧随 */
	.brand-card-item {
		background: #ffffff;
		margin: 20rpx 30rpx 30rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	/* 顶部英雄大背图区域 */
	.brand-hero {
		position: relative;
		height: 240rpx;
		width: 100%;
	}

	.hero-bg {
		width: 100%;
		height: 100%;
	}

	.hero-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.65));
	}

	.brand-meta {
		position: absolute;
		bottom: 20rpx;
		left: 24rpx;
		right: 24rpx;
		display: flex;
		align-items: flex-end;
	}

	.logo-box {
		width: 100rpx;
		height: 100rpx;
		background: #ffffff;
		border-radius: 50%;
		padding: 10rpx;
		box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
		flex-shrink: 0;
		z-index: 2;
	}

	.logo-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.meta-info {
		flex: 1;
		margin-left: 20rpx;
		color: #ffffff;
		z-index: 2;
		padding-bottom: 4rpx;
	}

	.name-row {
		display: flex;
		align-items: center;
	}

	.brand-name {
		font-size: 32rpx;
		font-weight: bold;
		text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
	}

	.brand-tag {
		background: linear-gradient(to right, #ffd700, #ff8c00);
		color: #ffffff;
		font-size: 18rpx;
		padding: 2rpx 10rpx;
		border-radius: 10rpx;
		margin-left: 12rpx;
		font-weight: bold;
	}

	.brand-desc {
		font-size: 22rpx;
		color: rgba(255,255,255,0.9);
		margin-top: 4rpx;
	}

	.tags-row {
		display: flex;
		flex-wrap: wrap;
		margin-top: 8rpx;
	}

	.p-tag {
		font-size: 18rpx;
		background: rgba(255,255,255,0.2);
		backdrop-filter: blur(8rpx);
		padding: 2rpx 12rpx;
		border-radius: 6rpx;
		margin-right: 10rpx;
	}

	/* 热门商品矩阵 */
	.goods-matrix {
		display: flex;
		padding: 24rpx;
		justify-content: space-between;
	}

	.matrix-item {
		width: 31%;
		display: flex;
		flex-direction: column;
	}

	.goods-img-wrapper {
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		background: #f8f8f8;
	}

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

	.badge-tag {
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(to right, #ff416c, #ff4b2b);
		color: #ffffff;
		font-size: 18rpx;
		padding: 2rpx 8rpx;
		border-bottom-right-radius: 12rpx;
		z-index: 2;
	}

	.sold-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,0.5);
		color: #ffffff;
		font-size: 18rpx;
		text-align: center;
		padding: 2rpx 0;
	}

	.goods-info {
		padding-top: 12rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.goods-title {
		font-size: 24rpx;
		color: #333333;
		line-height: 1.3;
		height: 62rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.price-row {
		display: flex;
		align-items: baseline;
		margin-top: 8rpx;
	}

	.price-current {
		color: #ff416c;
		font-weight: bold;
	}

	.symbol {
		font-size: 20rpx;
	}

	.value {
		font-size: 30rpx;
	}

	.price-old {
		font-size: 20rpx;
		color: #bbbbbb;
		text-decoration: line-through;
		margin-left: 6rpx;
	}

	.coupon-capsule {
		display: flex;
		align-items: center;
		border: 1rpx solid #ff416c;
		border-radius: 6rpx;
		overflow: hidden;
		margin-top: auto;
		width: fit-content;
	}

	.c-left {
		background: #ff416c;
		color: #ffffff;
		font-size: 18rpx;
		padding: 0 6rpx;
	}

	.c-right {
		color: #ff416c;
		font-size: 18rpx;
		padding: 0 8rpx;
	}

	/* 栏目分隔头 */
	.section-divider {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 30rpx 30rpx;
	}

	.divider-line {
		width: 80rpx;
		height: 2rpx;
		background: linear-gradient(to right, transparent, #dddddd);
	}

	.divider-line:last-child {
		background: linear-gradient(to left, transparent, #dddddd);
	}

	.divider-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.fire-icon {
		margin-right: 8rpx;
		font-size: 32rpx;
	}

	/* 底部双列爆品网格 */
	.brand-sale-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;
		justify-content: space-between;
	}

	.bs-card {
		width: 48.5%;
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
		display: flex;
		flex-direction: column;
	}

	.bs-img-box {
		width: 100%;
		aspect-ratio: 1 / 1;
		position: relative;
		background: #f8f8f8;
	}

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

	.bs-badge {
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
		color: #ffffff;
		font-size: 18rpx;
		padding: 4rpx 12rpx;
		border-bottom-right-radius: 16rpx;
		font-weight: bold;
		z-index: 2;
	}

	.bs-sold {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,0.45);
		color: #ffffff;
		font-size: 20rpx;
		text-align: center;
		padding: 4rpx 0;
		backdrop-filter: blur(4rpx);
	}

	.bs-info {
		padding: 16rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.bs-title {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		line-height: 1.35;
		height: 70rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 12rpx;
	}

	.bs-price-wrap {
		display: flex;
		align-items: baseline;
		margin-top: auto;
	}

	.bs-current {
		color: #ff416c;
		font-weight: bold;
	}

	.bs-symbol {
		font-size: 20rpx;
	}

	.bs-val {
		font-size: 34rpx;
	}

	.bs-old {
		font-size: 20rpx;
		color: #bbbbbb;
		text-decoration: line-through;
		margin-left: 8rpx;
	}

	.bs-coupon {
		display: flex;
		align-items: center;
		border: 1rpx solid #ff416c;
		border-radius: 8rpx;
		overflow: hidden;
		width: fit-content;
		margin-top: 10rpx;
	}

	.bsc-tag {
		background: #ff416c;
		color: #ffffff;
		font-size: 18rpx;
		padding: 0 8rpx;
		font-weight: bold;
	}

	.bsc-num {
		color: #ff416c;
		font-size: 18rpx;
		padding: 0 10rpx;
		font-weight: bold;
	}

	/* 最底端独立品牌身份识别底条 */
	.bs-brand-bar {
		display: flex;
		align-items: center;
		background: #fafafa;
		padding: 10rpx 16rpx;
		border-top: 1rpx solid #f0f0f0;
		margin-top: 12rpx;
	}

	.bsb-logo {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		margin-right: 10rpx;
		flex-shrink: 0;
		background: #ffffff;
		border: 1rpx solid #eeeeee;
	}

	.bsb-name {
		font-size: 20rpx;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		font-weight: 500;
	}

	.bottom-tip {
		text-align: center;
		font-size: 22rpx;
		color: #bbbbbb;
		padding: 30rpx 0 50rpx;
	}
</style>
