<template>
	<view class="brand-container">
		<view class="content">
			<swiper id="firstScreen" class="swiper banner" :current="swiperIndex" @animationfinish="intervalChange"
				circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				:indicator-color="indicatorColor" :indicator-active-color="indicatoractiveColor">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<view class="swiper-item banneritem">
						<image :data-log="{
							xcxClick: '品牌故事-首屏页面点击',
							pageName: '品牌故事-首屏页面',
							buttonName: `背景图-${swiperNameList[index]}`
						}" :data-link="item.link" @tap="jumpLink(item.link, item.videoUrl, $event)" class="b-img"
							:src="$baseUrl + item.url">
						</image>
					</view>
				</swiper-item>

			</swiper>
			<view class="swiperbox">
				<view class="iconbox">
					<!-- <image :data-log="{
						xcxClick: '品牌故事-首屏页面点击',
						pageName: '品牌故事-首屏页面',
						buttonName: `按钮-${swiperNameList[index]}`
					}" @tap="jumpSwiper(index, $event)" class="icon"
						:src="swiperIndex === index ? $baseUrl + icon.activeUrl : $baseUrl + icon.baseUrl"
						v-for="(icon, index) in swiperIconList" :key="index"></image> -->
					<image :src="$baseUrl + 'brandpage/indicatorDotsBg.png'" class="indicatorDotsBg"></image>
					<view class="indicatorDots">
						<template class="dotbox" v-for="(item, index) in swiperIconList" :key="index">
							<view class="dot" :class="swiperIndex === index ? 'dot-active' : 'dot-normal'">
							</view>
						</template>
						<text class="dotText">{{ swiperIconList[swiperIndex]?.text }}</text>
					</view>
				</view>
			</view>
			<view class="videoposterbox">
				<image :data-log="{
					xcxClick: '品牌故事-次屏页面点击',
					pageName: '品牌故事-首屏页面',
					buttonName: '腰部品牌Video'
				}" @tap="openChannel" class="videoposter" :src="$baseUrl + 'brandpage/videoposter.png'">
				</image>
			</view>
			<view id="secondScreen" class="productcontai">
				<text class="maintitle">{{ erqiPeizhi.title1 }}</text>
				<scroll-view class="listbox" scroll-x="true" show-scrollbar="false" :scroll-into-view="'tab-' + channelTabIndex" :scroll-with-animation="true">
					<view class="tab-container">
						<view @tap="channelTabHandler(index, $event)" :data-log="{
							xcxClick: '品牌故事-次屏页面点击',
							pageName: '品牌故事-次屏页面',
							buttonName: `${item}`
						}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in productTabList"
							:key="index" :id="'tab-' + index">
							{{ item }}
						</view>
					</view>
				</scroll-view>
				<scroll-view v-if="productInfoList.length > 0" class="productbox" scroll-x="true"
					show-scrollbar="false">
					<view class="product-grid">
						<view class="product-row">
							<view class="infobox" :key="'top-' + index"
								v-for="(infoItem, index) in productInfoList[channelTabIndex].filter((item, i) => i % 2 === 0)"
								:style="{
									background: `url(${$baseUrl}brandpage/infoBoxBg.png) no-repeat center/contain`
								}" :data-log="{
									xcxClick: '品牌故事-次屏页面点击',
									pageName: '品牌故事-次屏页面',
									buttonName: `${productTabList[channelTabIndex] + '中的' + infoItem.title}+'商品'`
								}" @tap="jumpProduct(infoItem, $event)">
								<view class="flexbox">
									<view class="infotitle">
										{{ infoItem.title }}
									</view>
									<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
								</view>
								<view class="infodesc">{{ infoItem.desc }}</view>
							</view>
						</view>
						<view class="product-row">
							<view class="infobox" :key="'bottom-' + index"
								v-for="(infoItem, index) in productInfoList[channelTabIndex].filter((item, i) => i % 2 === 1)"
								:style="{
									background: `url(${$baseUrl}brandpage/infoBoxBg.png) no-repeat center/contain`
								}" :data-log="{
									xcxClick: '品牌故事-次屏页面点击',
									pageName: '品牌故事-次屏页面',
									buttonName: `${productTabList[channelTabIndex] + '中的' + infoItem.title}+'商品'`
								}" @tap="jumpProduct(infoItem, $event)">
								<view class="flexbox">
									<view class="infotitle">
										{{ infoItem.title }}
									</view>
									<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
								</view>
								<view class="infodesc">{{ infoItem.desc }}</view>
							</view>
						</view>
					</view>
				</scroll-view>



			</view>

			<view class="videoposterbox">
				<video class="videoposter" :src="videoPosterUrl" controls="false" :poster="posterUrl"
					:style="{ width: '100%', height: '100%' }" @loadedmetadata="onVideoLoadedMeta"></video>
			</view>
			<view id="thirdScreen" class="ipbox"
				:style="{ background: `url(${$baseUrl}brandpage/hexiaofeiBg.png) no-repeat center/contain` }">
				<store-product appid="wx1ad0903b95889ea1" product-id="10000239570622" custom-content="true">
					<image :data-log="{
						xcxClick: '品牌故事-三屏页面点击',
						pageName: '品牌故事-三屏页面',
						buttonName: `全家形象`
					}" class="iphexiaofei" :src="erqiPeizhi.iphexiaofeiUrl"></image>
				</store-product>
				<view class="ipcard">
					<view class="title">
						{{ erqiPeizhi.title2 }}
						<!-- <view class="t1">鹤小飞一家</view> -->
					</view>
					<view class="desc">
						{{ ipDesc }}
					</view>
					<view class="ipflex">
						<view class="ipbg ip1">
							<image :data-log="{
								xcxClick: '品牌故事-三屏页面点击',
								pageName: '品牌故事-三屏页面',
								buttonName: `${hexiaofeiNameList[0]}`
							}" :src="erqiPeizhi.ipImg1">
							</image>
						</view>

						<view class="ipright">
							<view class="ipbg ip2">
								<store-product appid="wx1ad0903b95889ea1" product-id="10000239356280"
									custom-content="true">
									<image :data-log="{
										xcxClick: '品牌故事-三屏页面点击',
										pageName: '品牌故事-三屏页面',
										buttonName: `${hexiaofeiNameList[1]}`
									}" @tap="showPopup(1, $event)" :src="erqiPeizhi.ipImg2">
									</image>
								</store-product>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
								<view class="ipbg ip3">
									<image :data-log="{
										xcxClick: '品牌故事-三屏页面点击',
										pageName: '品牌故事-三屏页面',
										buttonName: `${hexiaofeiNameList[2]}`
									}" @tap="showPopup(0, $event)" :src="erqiPeizhi.ipImg3">
									</image>

								</view>
								<view class="ipbg ip4">
									<image :data-log="{
										xcxClick: '品牌故事-三屏页面点击',
										pageName: '品牌故事-三屏页面',
										buttonName: `${hexiaofeiNameList[3]}`
									}" @tap="showPopup(2, $event)" :src="erqiPeizhi.ipImg4">
									</image>
								</view>
							</view>

						</view>

					</view>
				</view>
			</view>
			<view v-if="esgInfoList.length > 0" class="esgbox">
				<text class="maintitle">{{ erqiPeizhi.title3 }}</text>
				<!-- <text class="subtitle">关注祖国下一代的营养、教育和陪伴</text> -->
				<view class="channelscroll">
					<view class="box">
						<view class="infobox" :key="index" v-for="(infoItem, index) in esgInfoList" :data-log="{
							xcxClick: `品牌故事-三屏页面点击`,
							pageName: `品牌故事-三屏页面ESG点击`,
							buttonName: `${index + 1}-${infoItem.desc}`
						}" @tap="jumpLink(infoItem.link, false, $event)">
							<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
							<view class="infotitle">{{ infoItem.desc }}</view>
							<view class="infodesc">{{ infoItem.desc2 }}</view>

						</view>
					</view>

				</view>
			</view>
		</view>

		<view>
			<!-- 普通弹窗 -->
			<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
				border-radius="48rpx">
				<view v-if="qrInfoObj !== null" class="popup-content">
					<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
					<view class="title">
						{{ qrInfoObj.title }}
					</view>
					<rich-text class="desc" :nodes="qrInfoObj.desc">

					</rich-text>
					<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + qrInfoObj.qrUrl"></image>
					<image @tap="downloadHandler($baseUrl + qrInfoObj.qrUrl)" class="btndownload"
						:src="$baseUrl + 'homepage/btn_download.png'"></image>
				</view>
				<view v-else class="popup-content" style="height: 899rpx;">
					<image class="xingmahui" :src="$baseUrl + 'brandpage/hexiaofei.png'"></image>
					<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
				</view>
			</uni-popup>
		</view>
		<view v-if="showVideo" class="video-popup">
			<video :src="currentVideoUrl" controls autoplay
				:style="{ width: videoWidth + 'px', height: videoHeight + 'px' }"
				@loadedmetadata="onVideoLoadedMeta"></video>
			<view class="close-btn-bottom" @tap="closeVideo">×</view>
		</view>
	</view>
</template>


<script>

import { fetchBrandJSON } from '../api/brand';
import { jump, JumpType } from '../utils';
import md from '../md';
import ExposureTracker from '../utils/exposure';

// 定义需要曝光检测的元素配置
const EXPOSURE_CONFIGS = [
	{
		id: 'firstScreen',
		logParams: {
			xcxPage: '品牌故事-首屏页面浏览',
			pageName: '品牌故事-首屏页面'
		}
	},
	// 可以添加更多需要曝光检测的元素配置
	{
		id: 'secondScreen',
		logParams: {
			xcxPage: '品牌故事-首屏页面浏览',
			pageName: '品牌故事-次屏页面'
		}
	},
	{
		id: 'thirdScreen',
		logParams: {
			xcxPage: '品牌故事-首屏页面浏览',
			pageName: '品牌故事-三屏页面'
		}
	}
];

export default {
	beforeDestroy() {
		if (this.exposureTracker) {
			this.exposureTracker.resetAllExposure();
		}
	},
	deactivated() {
		if (this.exposureTracker) {
			this.exposureTracker.resetAllExposure();
		}
	},
	props: {
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	watch: {
		scrollTop: {
			handler(newVal) {
				this.checkExposure(newVal);
			}
		},
	},

	data() {
		return {
			popType: 'bottom',
			swiperList: [],
			erqiPeizhi: {},
			indicatorDots: false,
			autoplay: true,
			interval: 4000,
			duration: 500,
			indicatoractiveColor: "#a6a0a1",
			indicatorColor: "rgba(255, 255, 255, 1)",
			channelTabIndex: 0,
			productTabList: [],
			productInfoList: [],
			swiperIconList: [],
			swiperIndex: 0,
			ipDesc: '',
			esgInfoList: [],
			qrInfoList: [],
			qrInfoObj: null,
			popupIndex: 0,
			showVideo: false,
			testVideoUrl: '',
			channel: {},
			videoWidth: 375,
			videoHeight: 210,
			swiperNameList: ["北纬47°入口", "自有牧场入口", "工厂预约入口"],
			hexiaofeiNameList: ["主要竖屏商品", "主要横屏商品", "视频号", "小红书"],
			exposureTracker: null,
			videoPosterUrl: '',
			posterUrl: '',
		}
	},
	mounted() {

		this.initBrandInfo();

		// 初始化曝光检测工具
		this.exposureTracker = new ExposureTracker(this);
		this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);

		// 初始检查曝光
		this.$nextTick(() => {
			this.checkExposure(this.scrollTop);
		});
	},
	methods: {
		async initBrandInfo() {
			// const { data } = await fetchBrandJSON();
			const data = {
				"erqiPeizhi":{
					"title1":"飞鹤产品家族",
					"title2":"飞鹤品牌IP鹤小飞一家",
					"title3":"飞鹤ESG",
					"iphexiaofeiUrl":"https://course.feihe.com/momclub-picture/brandpage/iphexiaofei.png",
					"ipImg1":"https://course.feihe.com/momclub-picture/brandpage/ip1.png",
					"ipImg2":"https://course.feihe.com/momclub-picture/brandpage/ip2.png",
					"ipImg3":"https://course.feihe.com/momclub-picture/brandpage/ip3.png",
					"ipImg4":"https://course.feihe.com/momclub-picture/brandpage/ip4.png"
				},
				"swiperList": [

					{
						"videoUrl": "https://course.feihe.com/momclub-picture/brandpage/bannerVideo.mp4",
						"link": {},
						"url": "brandpage/Banner31.png"
					},
					{
						"link": {
							"extra": {},
							"type": 3,
							"url": "https://mp.weixin.qq.com/s/0eMxbWB3R_0g06HZPUEj5Q"
						},
						"url": "brandpage/Banner32.png"
					},
					{
						"videoUrl": "https://course.feihe.com/momclub-picture/brandpage/bannerVideoHeitu.mp4",
						"link": {},
						"url": "brandpage/Banner33.png"
					},
					{
						"link": {
							"extra": {},
							"type": 3,
							"url": "https://factory.feihe.com/user/#/web"
						},
						"url": "brandpage/Banner34.png"
					}],
				"product": [
					[
						{
							"productId": "",
							"shareTitle": "星飞帆经典 3段",
							"link": "",
							"contentImgLen": 20,
							"title": "超凡 吸收",
							"skuId": "",
							"shareImg": "brandpage/products/share/0/0_1.jpg",
							"contentImg": "0-1",
							"desc": "星飞帆经典 3段",
							"bgUrl": "brandpage/pic_0_1.png"
						},
						{
							"productId": "",
							"shareTitle": "星飞帆卓睿 3段",
							"link": "",
							"contentImgLen": 25,
							"title": "顶配 脑育",
							"skuId": "",
							"shareImg": "brandpage/products/share/0/0_2.jpg",
							"contentImg": "0-2",
							"desc": "星飞帆卓睿 3段",
							"bgUrl": "brandpage/pic_0_2.png"
						},
						{
							"productId": "",
							"shareTitle": "星飞帆卓耀 3段",
							"link": "",
							"contentImgLen": 28,
							"title": "亲和 自护",
							"skuId": "",
							"shareImg": "brandpage/products/share/0/0_3.jpg",
							"contentImg": "0-3",
							"desc": "星飞帆卓耀 3段",
							"bgUrl": "brandpage/pic_0_3.png"
						},
						{
							"productId": "749098220531287139",
							"shareTitle": "爱本跃动蛋白营养粉",
							"link": "",
							"contentImgLen": 15,
							"title": " 4维 效力",
							"skuId": "749098220531287140",
							"shareImg": "brandpage/products/share/0/0_4.jpg",
							"contentImg": "0-4",
							"desc": "爱本跃动蛋白营养粉",
							"bgUrl": "brandpage/pic_0_4.png"
						},
						{
							"productId": "693279214116405585",
							"shareTitle": "高钙奶酪泡芙脆",
							"link": "",
							"contentImgLen": 15,
							"title": "高钙 爆脆",
							"skuId": "693279214116405586",
							"shareImg": "brandpage/products/share/0/0_5.jpg",
							"contentImg": "0-5",
							"desc": "高钙奶酪泡芙脆",
							"bgUrl": "brandpage/pic_0_5.png"
						},
						{
							"productId": "555503303308649561",
							"shareTitle": "北纬47度黄糯玉米",
							"link": "",
							"contentImgLen": 5,
							"title": "软糯  Q弹",
							"skuId": "555503303308649562",
							"shareImg": "brandpage/products/share/0/0_6.jpg",
							"contentImg": "0-6",
							"desc": "北纬47度黄糯玉米",
							"bgUrl": "brandpage/pic_0_6.png"
						}
					],
					[
						{
							"productId": "",
							"shareTitle": "星飞帆经典 3段",
							"link": "",
							"contentImgLen": 20,
							"title": "超凡 吸收",
							"skuId": "",
							"shareImg": "brandpage/products/share/1/1_1.jpg",
							"contentImg": "1-1",
							"desc": "星飞帆经典 3段",
							"bgUrl": "brandpage/pic_1_1.png"
						},
						{
							"productId": "",
							"shareTitle": "星飞帆卓睿 3段",
							"link": "",
							"contentImgLen": 25,
							"title": "顶配 脑育",
							"skuId": "",
							"shareImg": "brandpage/products/share/1/1_2.jpg",
							"contentImg": "1-2",
							"desc": "星飞帆卓睿 3段",
							"bgUrl": "brandpage/pic_1_2.png"
						},
						{
							"productId": "",
							"shareTitle": "星飞帆卓耀 3段",
							"link": "",
							"contentImgLen": 28,
							"title": "亲和 自护",
							"skuId": "",
							"shareImg": "brandpage/products/share/1/1_3.jpg",
							"contentImg": "1-3",
							"desc": "星飞帆卓耀 3段",
							"bgUrl": "brandpage/pic_1_3.png"
						},
						{
							"productId": "",
							"shareTitle": "星飞帆卓睿A2奶源",
							"link": "",
							"contentImgLen": 20,
							"title": "顶配 A 2",
							"skuId": "",
							"shareImg": "brandpage/products/share/1/1_4.jpg",
							"contentImg": "1-4",
							"desc": "星飞帆卓睿A2奶源",
							"bgUrl": "brandpage/pic_1_4.png"
						},
						{
							"productId": "",
							"shareTitle": "臻稚卓蓓 3段",
							"link": "",
							"contentImgLen": 28,
							"title": "活性 有机",
							"skuId": "",
							"shareImg": "brandpage/products/share/1/1_5.jpg",
							"contentImg": "1-5",
							"desc": "臻稚卓蓓 3段",
							"bgUrl": "brandpage/pic_1_5.png"
						},
						{
							"productId": "",
							"shareTitle": "臻爱倍护 3段",
							"link": "",
							"contentImgLen": 20,
							"title": "高端 乳铁",
							"skuId": "",
							"shareImg": "brandpage/products/share/1/1_6.jpg",
							"contentImg": "1-6",
							"desc": "臻爱倍护 3段",
							"bgUrl": "brandpage/pic_1_6.png"
						}
					],
					[
						{
							"productId": "749098220531287139",
							"shareTitle": "爱本跃动蛋白营养粉",
							"link": "",
							"contentImgLen": 20,
							"title": " 4维 效力",
							"skuId": "749098220531287140",
							"shareImg": "brandpage/products/share/2/2_1.jpg",
							"contentImg": "2-1",
							"desc": "爱本跃动蛋白营养粉",
							"bgUrl": "brandpage/pic_2_1.png"
						},
						{
							"productId": "748659115456528889",
							"shareTitle": "爱本牛初乳",
							"link": "",
							"contentImgLen": 15,
							"title": "初乳 精华",
							"skuId": "7748659115456528890",
							"shareImg": "brandpage/products/share/2/2_2.jpg",
							"contentImg": "2-2",
							"desc": "爱本牛初乳",
							"bgUrl": "brandpage/pic_2_2.png"
						},
						{
							"productId": "768991288915277214",
							"shareTitle": "爱本每日蛋白营养糊",
							"link": "",
							"contentImgLen": 15,
							"title": "每日 蛋白",
							"skuId": "768991288915277215",
							"shareImg": "brandpage/products/share/2/2_3.jpg",
							"contentImg": "2-3",
							"desc": "爱本每日蛋白营养糊",
							"bgUrl": "brandpage/pic_2_3.png"
						},
						{
							"productId": "767546274051183809",
							"shareTitle": "爱本纤纤益生菌羽衣甘蓝蛋白粉",
							"link": "",
							"contentImgLen": 10,
							"title": "腰腹 燃脂",
							"skuId": "767546274051183810",
							"shareImg": "brandpage/products/share/2/2_4.jpg",
							"contentImg": "2-4",
							"desc": "爱本纤纤益生菌\n羽衣甘蓝蛋白粉",
							"bgUrl": "brandpage/pic_2_4.png"
						},
						{
							"productId": "749443379821195324",
							"shareTitle": "爱本参芝初乳肽",
							"link": "",
							"contentImgLen": 10,
							"title": "药食 同源",
							"skuId": "749443379821195325",
							"shareImg": "brandpage/products/share/2/2_5.jpg",
							"contentImg": "2-5",
							"desc": "爱本参芝初乳肽",
							"bgUrl": "brandpage/pic_2_5.png"
						},
						{
							"productId": "753354110711035152",
							"shareTitle": "爱本悦眠功能粉",
							"link": "",
							"contentImgLen": 15,
							"title": "一夜 天亮",
							"skuId": "753354110711035153",
							"shareImg": "brandpage/products/share/2/2_6.jpg",
							"contentImg": "2-6",
							"desc": "爱本悦眠功能粉",
							"bgUrl": "brandpage/pic_2_6.png"
						}
					],
					[
						{
							"productId": "759563658744492290",
							"shareTitle": "爱上吃菜乳酪",
							"link": "",
							"contentImgLen": 10,
							"title": "高钙 高纤",
							"skuId": "759563658744492293",
							"shareImg": "brandpage/products/share/3/3_1.jpg",
							"contentImg": "3-1",
							"desc": "爱上吃菜乳酪",
							"bgUrl": "brandpage/pic_3_1.png"
						},
						{
							"productId": "693279214116405585",
							"shareTitle": "高钙奶酪泡芙脆",
							"link": "",
							"contentImgLen": 15,
							"title": "高钙 爆脆",
							"skuId": "693279214116405586",
							"shareImg": "brandpage/products/share/3/3_2.jpg",
							"contentImg": "3-2",
							"desc": "高钙奶酪泡芙脆",
							"bgUrl": "brandpage/pic_3_2.png"
						},
						{
							"productId": "693279214116405585",
							"shareTitle": "高纤黑巧乳酪",
							"link": "",
							"contentImgLen": 10,
							"title": "醇香 黑巧",
							"skuId": "693279214116405586",
							"shareImg": "brandpage/products/share/3/3_3.jpg",
							"contentImg": "3-3",
							"desc": "高纤黑巧乳酪",
							"bgUrl": "brandpage/pic_3_3.png"
						},
						{
							"productId": "716141706338247497",
							"shareTitle": "超新星水果奶酪",
							"link": "",
							"contentImgLen": 15,
							"title": "10倍  奶钙",
							"skuId": "716141706338247498",
							"shareImg": "brandpage/products/share/3/3_4.jpg",
							"contentImg": "3-4",
							"desc": "超新星水果奶酪",
							"bgUrl": "brandpage/pic_3_4.png"
						},
						{
							"productId": "717871366421930449",
							"shareTitle": "厚切流心芝士片",
							"link": "",
							"contentImgLen": 10,
							"title": "浓郁 爆浆",
							"skuId": "717871366421930450",
							"shareImg": "brandpage/products/share/3/3_5.jpg",
							"contentImg": "3-5",
							"desc": "厚切流心芝士片",
							"bgUrl": "brandpage/pic_3_5.png"
						},
						{
							"productId": "551135905055024574",
							"shareTitle": "嚼奶粉乳酪",
							"link": "",
							"contentImgLen": 10,
							"title": "洁净 配方",
							"skuId": "596810081919086853",
							"shareImg": "brandpage/products/share/3/3_6.jpg",
							"contentImg": "3-6",
							"desc": "嚼奶粉乳酪",
							"bgUrl": "brandpage/pic_3_6.png"
						}
					],
					[
						{
							"productId": "545768683314537529",
							"shareTitle": "北纬47度白甜糯玉米",
							"link": "",
							"contentImgLen": 5,
							"title": "含有 叶酸",
							"skuId": "545770687080957074",
							"shareImg": "brandpage/products/share/4/4_1.jpg",
							"contentImg": "4-1",
							"desc": "北纬47度白甜糯玉米",
							"bgUrl": "brandpage/pic_4_1.png"
						},
						{
							"productId": "555503303308649561",
							"shareTitle": "北纬47度黄糯玉米",
							"link": "",
							"contentImgLen": 5,
							"title": "软糯 Q弹",
							"skuId": "555503303308649562",
							"shareImg": "brandpage/products/share/4/4_2.jpg",
							"contentImg": "4-2",
							"desc": "北纬47度黄糯玉米",
							"bgUrl": "brandpage/pic_4_2.png"
						},
						{
							"productId": "469675861496440509",
							"shareTitle": "北纬47度低GI水果玉米粒袋装",
							"link": "",
							"contentImgLen": 5,
							"title": "开袋 即食",
							"skuId": "469675861496440510",
							"shareImg": "brandpage/products/share/4/4_3.jpg",
							"contentImg": "4-3",
							"desc": "北纬47度低GI水果玉米粒袋装",
							"bgUrl": "brandpage/pic_4_3.png"
						},
						{
							"productId": "733411972814471679",
							"shareTitle": "北纬47度东北烧烤味玉米段",
							"link": "",
							"contentImgLen": 5,
							"title": "秘制 工艺",
							"skuId": "733468301522154622",
							"shareImg": "brandpage/products/share/4/4_4.jpg",
							"contentImg": "4-4",
							"desc": "北纬47度东北烧烤味玉米段",
							"bgUrl": "brandpage/pic_4_4.png"
						},
						{
							"productId": "733411972814471679",
							"shareTitle": "N47°植物酵素乳",
							"link": "",
							"contentImgLen": 10,
							"title": "0乳糖  低GI",
							"skuId": "733468301522154622",
							"shareImg": "brandpage/products/share/4/4_5.jpg",
							"contentImg": "4-5",
							"desc": "N47°植物酵素乳",
							"bgUrl": "brandpage/pic_4_5.png"
						},
						{
							"productId": "705230699873112222",
							"shareTitle": "N47°水果玉米汁",
							"link": "",
							"contentImgLen": 8,
							"title": "轻卡 低GI",
							"skuId": "705230699873112223",
							"shareImg": "brandpage/products/share/4/4_6.jpg",
							"contentImg": "4-6",
							"desc": "N47°水果玉米汁",
							"bgUrl": "brandpage/pic_4_6.png"
						}
					],
					[
						{
							"productId": "739634042657637394",
							"shareTitle": "飞鹤臻贵儿童配方奶粉",
							"link": "",
							"contentImgLen": 10,
							"title": "向上 成长",
							"skuId": "739635029460743612",
							"shareImg": "brandpage/products/share/4/4_1.jpg",
							"contentImg": "5-1",
							"desc": "飞鹤臻贵儿童配方奶粉",
							"bgUrl": "brandpage/pic_4_1.png"
						},
						{
							"productId": "770087385697019251",
							"shareTitle": "飞鹤臻贵悦智配方奶粉",
							"link": "",
							"contentImgLen": 10,
							"title": "悦享 活力",
							"skuId": "770087385697019252",
							"shareImg": "brandpage/products/share/4/4_2.jpg",
							"contentImg": "4-2",
							"desc": "飞鹤臻贵悦智配方奶粉",
							"bgUrl": "brandpage/pic_4_2.png"
						},
						{
							"productId": "584206109842248681",
							"shareTitle": "飞鹤牧场浓厚纯牛奶",
							"link": "",
							"contentImgLen": 10,
							"title": "浓厚 醇香",
							"skuId": "743707906122896598",
							"shareImg": "brandpage/products/share/4/4_3.jpg",
							"contentImg": "4-3",
							"desc": "飞鹤牧场浓厚纯牛奶",
							"bgUrl": "brandpage/pic_4_3.png"
						},
						{
							"productId": "411619746805715934",
							"shareTitle": "六水香长粒香大米",
							"link": "",
							"contentImgLen": 8,
							"title": "当季 新米",
							"skuId": "411619746805715935",
							"shareImg": "brandpage/products/share/4/4_4.jpg",
							"contentImg": "4-4",
							"desc": "六水香长粒香大米",
							"bgUrl": "brandpage/pic_4_4.png"
						},
						{
							"productId": "675921531863073227",
							"shareTitle": "红富士晒晒苹果肉",
							"link": "",
							"contentImgLen": 10,
							"title": "三蒸 三晒",
							"skuId": "675921531863073230",
							"shareImg": "brandpage/products/share/4/4_5.jpg",
							"contentImg": "4-5",
							"desc": "红富士晒晒苹果肉",
							"bgUrl": "brandpage/pic_4_5.png"
						},
						{
							"productId": "599340570081015525",
							"shareTitle": "内衣专护洗衣液",
							"link": "",
							"contentImgLen":11,
							"title": "深层 洁净",
							"skuId": "599340570081015526",
							"shareImg": "brandpage/products/share/4/4_6.jpg",
							"contentImg": "4-6",
							"desc": "内衣专护洗衣液",
							"bgUrl": "brandpage/pic_4_6.png"
						}
					]
				],
				"posterUrl": "https://course.feihe.com/momclub-picture/brandpage/videoposter.png",
				"videoPosterUrl": "https://course.feihe.com/momclub-picture/brandpage/banner_1%E6%85%A2%E4%BA%BA%E8%8A%82x%E9%A3%9E%E9%B9%A4%2B-%2B%E5%9C%9FFINAL.mp4",
				"videoUrl": "https://course.feihe.com/momclub-picture/brandpage/banner_1%E6%85%A2%E4%BA%BA%E8%8A%82x%E9%A3%9E%E9%B9%A4%2B-%2B%E5%9C%9FFINAL.mp4",
				"esgInfoList": [
					[
						{
							"desc2": "飞鹤践行低碳节能，打造绿色产业链；承担 龙头责任，引领行业创新发展；履行社会责 任，构建共富共享生态。",
							"link": {
								"extra": {},
								"type": 3,
								"url": "https://mp.weixin.qq.com/s/UebPA-2XenAdw7lTs2NttA"
							},
							"desc": "中国飞鹤发布2024年ESG报告",
							"bgUrl": "brandpage/esg1.png"
						},
						{
							"desc2": "中国飞鹤于2025年4月初在全国范围内启动 总规模为12亿元，为符合条件的孕期家庭提 供不少于1500元生育补贴的飞鹤生育补贴",
							"link": {
								"extra": {},
								"type": 3,
								"url": "https://mp.weixin.qq.com/s/TpjCyjCf2Df3t1RMfi-JKQ"
							},
							"desc": "12亿元生育补贴计划",
							"bgUrl": "brandpage/esg2.png"
						},
						{
							"desc2": "百年大计，教育为本；教育大计，教师为本。 近三年来，飞鹤已投入超过6500万元开展专 项助教活动，惠及在职专任教师超过28万人",
							"link": {
								"extra": {},
								"type": 3,
								"url": "https://mp.weixin.qq.com/s/fvo6LV95tCIPA_lda9L7zw"
							},
							"desc": "教育公益",
							"bgUrl": "brandpage/esg3.png"
						}
					]
				],
				"channel": {
					"finderUserName": "sphgexisAi0pRGm",
					"feedId": "export/UzFfAgtgekIEAQAAAAAABbEMmxr36QAAAAstQy6ubaLX4KHWvLEZgBPEgaJkYSYbLr6JzNPgMJp7tTZCYcYsIpU6Z0fgSnSE"
				},
				"qrInfoList": [
					{
						"qrUrl": "brandpage/qrhxf_sph.png",
						"title": "视频号",
						"desc": "扫码关注<span style='color:#D3A358;'>鹤小飞一家</span>视频号，看超多有爱的趣味故事"
					},
					{
						"qrUrl": "brandpage/qrhxf_wxxd.png",
						"title": "微信小店",
						"desc": "扫码进入<span style='color:#D3A358;'>鹤小飞一家</span>店铺，挑选精美限量周边"
					}
				],
				"productTabList": [
					"全部",
					"母婴全阶",
					"功能营养",
					"儿童产品",
					"北纬47°",
					"星妈优选"
				],
				"swiperIconList": [
					{
						"text": "北纬47°生态",
						"baseUrl": "brandpage/corn1.png",
						"activeUrl": "brandpage/corn2.png"
					},
					{
						"text": "13家自有牧场",
						"baseUrl": "brandpage/cattle1.png",
						"activeUrl": "brandpage/cattle2.png"
					},
					{
						"text": "北纬47°有机黑土",
						"baseUrl": "brandpage/factory1.png",
						"activeUrl": "brandpage/factory2.png"
					}, {
						"text": "工厂游预约",
						"baseUrl": "brandpage/factory1.png",
						"activeUrl": "brandpage/factory2.png"
					}
				],
				"ipDesc": "鹤小飞一家是由鹤爸、鹤妈、鹤小飞（哥哥）、鹤小小（妹妹） 组成的一家。\n四口热爱生活、积极向上，是他们一家对生活的态度。"
			};
			if (data) {
				this.swiperList = data.swiperList;
				this.erqiPeizhi = data.erqiPeizhi;
				this.productTabList = data.productTabList;
				this.productInfoList = data.product;
				this.esgInfoList = data.esgInfoList[0] || [];
				this.qrInfoList = data.qrInfoList;
				this.ipDesc = data.ipDesc;
				this.swiperIconList = data.swiperIconList;
				this.testVideoUrl = data.videoUrl;
				if (data.videoUrl.indexOf('http') === -1) {
					data.videoUrl = this.$baseUrl + data.videoUrl;
				}
				this.videoPosterUrl = data.videoPosterUrl;
				this.currentVideoUrl = data.videoUrl;
				this.channel = data.channel;
			}
		},
		intervalChange(e) {
			this.swiperIndex = e.target.current;
		},
		jumpSwiper(_index, evt) {//点indicator切换图片
			if (evt) {
				md.sensorLog(evt);
			}
			this.swiperIndex = _index;
		},

		jumpLink(_link, videoUrl, evt) {
			if (evt) {
				md.sensorLog(evt);
			}
			// console.log(_link)
			// uni.navigateTo({
			// 	url: "/pages/product/product?id=1-1"
			// })
			if (videoUrl) {
				// 弹出视频
				this.currentVideoUrl = videoUrl;
				this.showVideo = true;
				return;
				// 视频弹窗出现后，video标签的autoplay会自动播放
			} else if (_link) {
				// 其他跳转逻辑
				jump(_link);
			}
		},
		jumpProduct(item, evt) {
			if (evt) {
				md.sensorLog(evt);
			}
			const { productId, skuId, contentImg, contentImgLen, shareTitle, shareImg, title } = item;
			const tabName = this.productTabList[this.channelTabIndex];
			uni.navigateTo({
				url: "/pages/product/product?productId=" + productId + "&skuId=" + skuId + "&contentImg=" + contentImg + "&contentImgLen=" + contentImgLen + "&shareTitle=" + shareTitle + "&shareImg=" + shareImg + "&tabName=" + tabName + "&title=" + title
			})
		},
		channelTabHandler(_index, evt) {
			if (evt) {
				md.sensorLog(evt);
			}
			this.channelTabIndex = _index;
			
			// 自动滚动到选中的tab
			this.$nextTick(() => {
				const scrollView = uni.createSelectorQuery().select('.listbox');
				if (scrollView) {
					scrollView.scrollOffset((res) => {
						// 这里可以添加额外的滚动逻辑
					}).exec();
				}
			});
		},
		showPopup(_index, evt) {
			if (evt) {
				md.sensorLog(evt);
			}
			this.popupIndex = _index;
			if (_index < 2) {
				this.qrInfoObj = this.qrInfoList[_index];
				md.sensorLogTake({
					xcxPage: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
					pageName: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
				});
			} else {
				this.qrInfoObj = null;
				md.sensorLogTake({
					xcxPage: `品牌故事-鹤小飞家族小红书二维码半屏`,
					pageName: `品牌故事-鹤小飞家族小红书二维码半屏`,
				});
			}

			this.$refs.popup.open(this.popType);
		},
		closePop() {
			this.$refs.popup.close();
		},
		downloadHandler(imgurl) {
			md.sensorLogTake({
				xcxClick: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
				pageName: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
				buttonName: `下载二维码`
			});
			uni.downloadFile({
				url: imgurl,
				success: (downloadRes) => {
					if (downloadRes.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: downloadRes.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: (err) => {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
							}
						});
					} else {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
				}
			});
		},
		showVideoHandler() {
			this.currentVideoUrl = this.testVideoUrl;
			this.showVideo = true;
		},

		closeVideo() {
			this.showVideo = false;
			this.currentVideoUrl = '';
		},
		openChannel(evt) {
			if (evt) {
				md.sensorLog(evt);
			}
			const finderUserName = this.channel.finderUserName;
			const feedId = this.channel.feedId;
			uni.openChannelsActivity({
				finderUserName,
				feedId,
				success: res => {
					console.log('跳转成功', res);
				},
				fail: err => {
					console.log('跳转失败', err);
				}
			});
		},
		previewImage(url) {
			uni.previewImage({
				urls: [url], // 预览当前图片
				current: url // 当前显示的图片
			});
		},
		onVideoLoadedMeta(e) {
			const { width, height } = e.detail;
			const pageWidth = uni.upx2px(750);
			const ratio = height / width;
			this.videoWidth = pageWidth;
			this.videoHeight = pageWidth;// pageWidth * ratio;
		},
		checkExposure(scrollTop) {
			if (this.exposureTracker) {
				this.exposureTracker.checkExposure(scrollTop);
			}
		},
		resetExposure() {
			if (this.exposureTracker) {
				this.exposureTracker.resetAllExposure();
			}
		},
		//跳转微店
		// 		商品ID
		// 10000239356280
		// 商品ID
		// 10000239570622

	}
}
</script>

<style lang="less" scoped>
@import '@/common.less';

.brand-container {
	background-color: #fff;

	.content {
		padding-bottom: 200rpx;

		.banner {
			height: 1250rpx;

			.banneritem {
				width: 750rpx;
				height: 1250rpx;

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

		.swiperbox {
			position: absolute;
			top: 1002rpx;
			width: 196rpx;
			left: 50%;
			transform: translateX(-50%);

			.iconbox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				position: relative;

				.icon {
					width: 200rpx;
					height: 200rpx;
				}

				.indicatorDotsBg {
					position: absolute;
					width: 196rpx;
					height: 77rpx;
				}

				.indicatorDots {
					// margin-left: 19rpx;
					margin-top: 21rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 196rpx;
					height: 10rpx;
					position: relative;

					.dot {
						// transition: all 0.3s ease;
						cursor: pointer;
					}

					.dot-active {
						width: 26rpx;
						height: 10rpx;
						border-radius: 5rpx;
						background-color: #ffffff;
						margin-right: 5rpx;
						margin-left: 5rpx;
					}

					.dot-normal {
						width: 10rpx;
						height: 10rpx;
						border-radius: 5rpx;
						margin-right: 5rpx;
						margin-left: 5rpx;
						background-color: rgba(255, 255, 255, 0.6);
					}

					.dotText {
						margin-top: 56rpx;
						position: absolute;
						font-size: 17rpx;
						color: #fff;
						text-align: center;
						font-weight: bold;
						width: 196rpx;
						// top: 50%;
						// transform: translateY(-50%);
						pointer-events: none;
					}
				}
			}


		}

		.videoposterbox {
			width: 686rpx;
			height: 384rpx;
			margin-left: 32rpx;
			margin-top: 32rpx;

			.videoposter {
				width: 686rpx;
				height: 384rpx;
				border-radius: 24rpx;

			}

		}

		.productcontai {
			margin-top: 32rpx;
			margin-left: 32rpx;

			.maintitle {
				color: @color-black-deep;
				font-size: 38rpx;
				font-weight: bold;
				display: block;
				margin-left: 5rpx;
			}

			.subtitle {
				color: @color-black-deep;
				font-size: 24rpx;
				margin-top: 10rpx;
				margin-left: 5rpx;
			}

			.listbox {
				margin-top: 15rpx;
				width: 686rpx;
				white-space: nowrap;
				
				.tab-container {
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					min-width: 100%;
					
					.tabitem {
						color: @color-black-deep;
						background-color: #e9edf1;
						padding: 15rpx 20rpx;
						font-size: 22rpx;
						margin-right: 15rpx;
						border-radius: 30rpx;
						flex-shrink: 0;
						white-space: nowrap;
						transition: all 0.3s ease;
						cursor: pointer;
						
						&:last-child {
							margin-right: 0;
						}
						
						&:active {
							transform: scale(0.95);
						}
					}

					.tabActive {
						color: white;
						background-color: @color-gold-main;
						box-shadow: 0 2rpx 8rpx rgba(211, 163, 88, 0.3);
					}
				}
			}

			.productbox {
				width: 686rpx;
				height: 545rpx;
				overflow-x: auto;
				margin-top: 30rpx;

				.product-grid {
					display: flex;
					flex-direction: column;
					height: 100%;
					width: max-content;

					.product-row {
						display: flex;
						flex-direction: row;
						height: 50%;
						align-items: center;
						margin-bottom: 20rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.infobox {
							margin-right: 20rpx;
							flex-shrink: 0;

							&:last-child {
								margin-right: 0;
							}
						}
					}
				}

				.infobox {
					width: 273rpx;
					height: 263rpx;
					background-color: white;
					border-radius: 24rpx;
					// margin-top: 32rpx;

					.flexbox {
						display: flex;
						margin-top: 25rpx;
						align-items: center;
						justify-content: center;

						.infotitle {
							font-size: 36rpx;
							font-weight: 400;
							width: 100rpx;
							color: @color-black-deep;
							margin-left: 15rpx; //一点偏移量
							text-align: center;

						}

						.infoimg {
							width: 150rpx;
							height: 150rpx;
						}
					}

					.infodesc {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24rpx;
						color: @color-black-deep;
						width: 260rpx;
						text-align: center;
						height: 90rpx;
						white-space: pre-wrap;

					}
				}

			}




		}

		.ipbox {
			width: 674rpx;
			height: 922rpx;
			position: relative;
			left: 36rpx;
			border-radius: 24rpx;
			background-color: white;
			top: 50rpx;


			.iphexiaofei {
				width: 374rpx;
				height: 298rpx;
				position: absolute;
				top: 15rpx;
				left: 165rpx;
			}

			.ipcard {
				position: absolute;
				padding: 15rpx;
				top: 313rpx;

				.title {
					display: flex;
					font-size: 36rpx;
					color: @color-black-deep;
					font-weight: bold;

					.t1 {
						color: @color-black-deep;
					}
				}

				.desc {
					margin-top: 20rpx;
					white-space: pre-wrap;
					font-size: 24rpx;
					color: @color-black-deep;
				}

				.ipflex {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;

					.ipbg {
						border-radius: 24rpx;
						background-color: @color-gray-light;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.ip1 {
						width: 288rpx;
						height: 380rpx;
						overflow: hidden;

						image {
							width: 195rpx;
							height: 298rpx;
						}

					}

					.ip2 {
						width: 342rpx;
						height: 196rpx;

						image {
							width: 271rpx;
							height: 152rpx;
						}
					}

					.ip3 {
						width: 160rpx;
						height: 160rpx;

						image {
							width: 70rpx;
							height: 97rpx;
						}
					}

					.ip4 {
						width: 160rpx;
						height: 160rpx;

						image {
							width: 88rpx;
							height: 92rpx;
						}
					}
				}

			}




		}

		.esgbox {
			margin-top: 128rpx;
			margin-left: 32rpx;

			.maintitle {
				color: @color-black-deep;
				font-size: 38rpx;
				font-weight: bold;
				display: block;
				margin-left: 5rpx;
			}

			.subtitle {
				color: @color-black-deep;
				font-size: 24rpx;
				margin-top: 10rpx;
				margin-left: 5rpx;
			}

			.listbox {
				display: flex;
				margin-top: 10rpx;


				.tabitem {
					color: @color-black-deep;
					background-color: #e9edf1;
					padding: 15rpx;
					font-size: 22rpx;
					margin-right: 15rpx;
					border-radius: 30rpx;
				}

				.tabActive {
					color: white;
					background-color: @color-gold-main;
				}
			}

			.channelscroll {
				width: 718rpx;
				overflow-x: scroll;
				margin-top: 32rpx;

				// margin-left: -32rpx;
				.box {
					display: flex;

					.infobox {
						margin-left: 0rpx;
						margin-right: 30rpx;

						.infoimg {
							width: 500rpx;
							height: 400rpx;
						}

						.infotitle {
							color: @color-gold-main;
							font-size: 32rpx;
							text-align: left;
							font-weight: bold;
							margin-top: 10rpx;
						}

						.infodesc {
							font-size: 24rpx;
							color: black;
							margin-top: 10rpx;
							padding-right: 40rpx;
						}
					}
				}

			}


		}


	}

	.popup-content {
		width: 750rpx;
		height: 812rpx;
		border-top-left-radius: 48rpx;
		border-top-right-radius: 48rpx;
		position: relative;

		.btnclose {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 36rpx;
			right: 32rpx;
		}

		.xingmahui {
			width: 750rpx;
			height: 100%;
			position: absolute;
			bottom: 0;
		}

		.title {
			position: absolute;
			top: 47rpx;
			left: 32rpx;
			font-size: 36rpx;
			color: @color-black-deep;
			font-weight: bold;

		}

		.desc {
			position: absolute;
			top: 108rpx;
			left: 32rpx;
			font-size: 28rpx;
			color: @color-black-medium;
			font-weight: bold;

		}

		.qrcode {
			width: 340rpx;
			height: 340rpx;
			position: absolute;
			top: 220rpx;
			left: 205rpx;
		}

		.btndownload {
			width: 286rpx;
			height: 89rpx;
			position: absolute;
			top: 630rpx;
			left: 232rpx;
		}
	}

	.video-popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.close-btn-bottom {
		margin: 32rpx auto 0 auto;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 44rpx;
		line-height: 64rpx;
		text-align: center;
		z-index: 10001;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>