<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>
				</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">飞鹤产品家族</text>
				<view class="listbox">
					<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">
						{{ item }}
					</view>
				</view>
				<view v-if="productInfoList.length > 0" class="productbox">
					<view class="infobox" :key="index" v-for="(infoItem, index) in productInfoList[channelTabIndex]"
						: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>
			<view id="thirdScreen" class="ipbox">
				<image :data-log="{
					xcxClick: '品牌故事-三屏页面点击',
					pageName: '品牌故事-三屏页面',
					buttonName: `全家形象`
				}" @tap="showPopup(1, $event)" class="iphexiaofei" :src="$baseUrl + 'brandpage/iphexiaofei.png'"></image>
				<view class="ipcard">
					<view class="title">
						飞鹤品牌IP<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]}`
							}" @tap="showPopup(1, $event)" :src="$baseUrl + 'brandpage/ip1.png'">
							</image>
						</view>
						<view class="ipright">
							<view class="ipbg ip2">
								<image :data-log="{
									xcxClick: '品牌故事-三屏页面点击',
									pageName: '品牌故事-三屏页面',
									buttonName: `${hexiaofeiNameList[1]}`
								}" @tap="showPopup(1, $event)" :src="$baseUrl + 'brandpage/ip2.png'">
								</image>
							</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="$baseUrl + 'brandpage/ip3.png'">
									</image>
								</view>
								<view class="ipbg ip4">
									<image :data-log="{
										xcxClick: '品牌故事-三屏页面点击',
										pageName: '品牌故事-三屏页面',
										buttonName: `${hexiaofeiNameList[3]}`
									}" @tap="showPopup(2, $event)" :src="$baseUrl + 'brandpage/ip4.png'">
									</image>
								</view>
							</view>

						</view>

					</view>
				</view>
			</view>
			<view v-if="esgInfoList.length > 0" class="esgbox">
				<text class="maintitle">飞鹤ESG</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: [],
			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,
		}
	},
	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();
			if (data) {
				this.swiperList = data.swiperList;
				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.currentVideoUrl = data.videoUrl;
				this.channel = data.channel;
			}
		},
		intervalChange(e) {
			this.swiperIndex = e.target.current;
		},
		jumpSwiper(_index, evt) {
			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;
		},
		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();
			}
		}
	}
}
</script>

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

.brand-container {
	.content {
		padding-bottom: 200rpx;

		.banner {
			height: 1250rpx;

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

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

		.swiperbox {
			position: absolute;
			top: 1002rpx;
			width: 650rpx;
			left: 50rpx;

			.iconbox {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

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


		}

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

			.videoposter {
				width: 686rpx;
				height: 384rpx;

			}

		}

		.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 {
				display: flex;
				margin-top: 10rpx;
				width: 686rpx;
				align-content: center;
				justify-content: space-between;

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

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

			.productbox {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 686rpx;

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

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

						.infotitle {
							font-size: 36rpx;
							font-weight: 400;
							width: 100rpx;
							color: @color-black-deep;
							margin-left: 36rpx; //一点偏移量
							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: 100%;
						text-align: center;
						height: 100rpx;
						white-space: pre-wrap;

					}
				}

			}




		}

		.ipbox {
			width: 702rpx;
			height: 734rpx;
			position: relative;
			left: 24rpx;
			border-radius: 24rpx;
			background-color: white;
			top: 200rpx;


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

			.ipcard {
				position: absolute;
				padding: 32rpx;
				top: 110rpx;

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

					.t1 {
						color: @color-gold-cover;
					}
				}

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

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

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

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

						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: 248rpx;
			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: 15rpx;
						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>