<template>
	<view class="home-container" @scroll="onPageScroll">
		<view class="content">
			<swiper id="firstScreen" class="swiper banner" circular :autoplay="autoplay" :interval="interval"
				:duration="duration" :indicator-dots="false" @change="onBannerSwiperChange">
				<swiper-item v-for="(item, index) in swiperList" :key="item.url">
					<view class="swiper-item banneritem">
						<image @tap="jumpBannerHandler(item, index)" class="b-img" :src="$baseUrl + item.url"></image>
					</view>
				</swiper-item>
			</swiper>

			<!-- 溯源测试按钮 -->
			<!-- <button style="width: 100%;height: 100rpx;background-color: #fff;color: #000;" @tap="testSource">溯源测试</button> -->

			<!-- <view class="swiper-mask">
				<image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
			</view> -->
			<!-- 自定义指示点，仿照示意图 -->
			<view class="custom-banner-indicator">
				<view v-for="(item, idx) in swiperList" :key="item.url + idx"
					:class="['banner-dot', { 'active': idx === bannerCurrentIndex }]"></view>
			</view>
			<view class="barbox" :style="`top:${statusBarHeight}px;`">
				<image class="btnlogo" :src="$baseUrl + 'homepage/btnlogo.png'"></image>
				<image :data-log="{
					xcxClick: '首页-首屏页面点击',
					pageName: '首页-首屏',
					buttonName: '搜索框'
				}" class="btnsearch" @tap="goSearchHandler" :src="$baseUrl + 'homepage/btnsearch.png'">
				</image>
				<view class="customer-btn-wrap">
					<image :data-log="{
						xcxClick: '首页-首屏页面点击',
						pageName: '首页-首屏',
						buttonName: '客服入口'
					}" @tap="goCustomerHandler" class="btncustomer" :src="$baseUrl + 'homepage/btncustomer.png'">
					</image>
					<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
				</view>
			</view>
			<!-- <view :data-log="{
				xcxClick: '首页-首屏页面点击',
				pageName: '首页-首屏',
				buttonName: '文字资源位入口'
			}" @tap="showPopup(1, $event)" class="txtbox">
				<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
				<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
			</view> -->

			<!--推荐工具-->
			<view class="tools_box">
				<view class="tools_maintitle">{{ toolList.maintitle }}</view>
				<view class="tools_subtitle">{{ toolList.subtitle }}</view>
				<swiper :vertical="false" :circular="true" class="tool_swiper" :display-multiple-items="1.65"
					:next-margin="'0rpx'" :previous-margin="'0'" @change="onSwiperChange">
					<swiper-item v-for="(item, index) in toolList.tools" :key="index"
						:class="['swiperItem', { 'active': currentIndex === index }]">
						<view class="tool">
							<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
								@getphonenumber="onGetPhoneNumber" class="sq_btn"></button>
							<image class="tool_bg" :src="$baseUrl + item.icon" @tap="handleToolClick(item)">
							</image>
							<!-- <image class="tool_icon" :src="$baseUrl + item.icon"></image>
							<image class="tool_jt" :src="$baseUrl + toolList.jtIcon"></image>
							<view class="tool_title">{{ item.title }}</view>
							<view class="tool_context">{{ item.context }}</view> -->
						</view>
					</swiper-item>
				</swiper>

				<!-- 自定义指示点 -->
				<view class="custom-indicator">
					<view v-for="(item, index) in toolList.tools" :key="index" class="indicator-dot"
						:class="{ 'active': currentIndex === index }">
					</view>
				</view>
			</view>
			<!--推荐工具-->

			<!--专家团-->
			<view class="et_box">
				<view class="et_maintitle">{{ expertTeam.maintitle }}</view>
				<view :data-log="{
					xcxClick: '首页-二屏页面点击',
					pageName: '首页-二屏',
					buttonName: '专家团副标题点击'
				}" class="et_subtitle">
					<view class="txtlink" @tap="showPopup1(1, 1)">星妈会医生在线答疑群，为孩子成长保驾护航</view>
					<image class="icon_more" @tap="showPopup1(1, 2)" :src="$baseUrl + 'homepage/et_more.png'"></image>
				</view>
				<view class="et_main_box">
					<view class="et_con_bg">
						<view class="et_tab_box">
							<view class="tab_box" @tap="onSelEtTap(0)">
								<image class="et_tab" v-show="etTabSelIndex == 0"
									:src="$baseUrl + 'homepage/et_sel_tab11.png'">
								</image>
								<image class="et_tab" v-show="etTabSelIndex != 0"
									:src="$baseUrl + 'homepage/et_tab11.png'">
								</image>
							</view>
							<view class="tab_box" @tap="onSelEtTap(1)">
								<image class="et_tab" v-show="etTabSelIndex == 1"
									:src="$baseUrl + 'homepage/et_sel_tab2.png'">
								</image>
								<image class="et_tab" v-show="etTabSelIndex != 1"
									:src="$baseUrl + 'homepage/et_tab2.png'">
								</image>
							</view>
							<view class="tab_box" @tap="onSelEtTap(2)">
								<image class="et_tab" v-show="etTabSelIndex == 2"
									:src="$baseUrl + 'homepage/et_sel_tab3.png'">
								</image>
								<image class="et_tab" v-show="etTabSelIndex != 2"
									:src="$baseUrl + 'homepage/et_tab3.png'">
								</image>
							</view>
						</view>
						<view class="et_con_box" @tap="onETMore(1, etTabSelIndex)">
							<image class="et_con1" v-if="etTabSelIndex == 0" :src="$baseUrl + expertTeam.etConUrl1">
							</image>
							<image class="et_con2" v-if="etTabSelIndex == 1" :src="$baseUrl + expertTeam.etConUrl2">
							</image>
							<image class="et_con3" v-if="etTabSelIndex == 2" :src="$baseUrl + expertTeam.etConUrl3">
							</image>
						</view>
						<view class="et_more_txt" @tap="onETMore(2, etTabSelIndex)">
							<text class="txtlink">点击查看更多</text>
							<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
						</view>
					</view>
				</view>
			</view>
			<!--专家团-->

			<!-- <view class="cardScroller">
				<view class="cardbox">
					<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
						<image :data-log="{
							xcxClick: '首页-首屏页面点击',
							pageName: '首页-首屏',
							buttonName: `腰部banner-${cardData.level}`
						}" @tap="jumpLinkCard(cardData, $event)" class="bg" :src="$baseUrl + cardData.bgUrl"></image>
						<text class="level">{{ cardData.level }}</text>
						<text class="subTitle">{{ cardData.subTitle }}</text>
						<view class="showCornerTxt" v-if="cardData.showCornerTxt && cardData.showCornerTxt.length > 0">
							{{ cardData.showCornerTxt }}
						</view>
						<view v-if="cardData.btnTitle && cardData.btnTitle.length > 0" :data-log="{
							xcxClick: '首页-首屏页面点击',
							pageName: '首页-首屏',
							buttonName: `腰部banner-${cardData.level}`
						}" class="cardbtn" @tap="jumpLinkWithLogin(cardData.link, $event)">
							<image class="cardbtnbg" :src="$baseUrl + 'homepage/btn_receive.png'"></image>
							<text class="btnTitle" :style="cardData.btnTitle.length > 7 ? 'font-size:22rpx;' : ''">{{
								cardData.btnTitle }}</text>
							<text class="btnSubTitle">{{ cardData.btnSubTitle }}</text>
							<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
								@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>

						</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="contentbox" id="secondScreen">
				<image class="contentbg" :src="$baseUrl + 'homepage/contentbg.png'" alt="" />
				<image class="contentitem" :key="index" :style="contentItem._style"
					v-for="(contentItem, index) in contentImgList" :src="$baseUrl + contentItem.bgUrl" :data-log="{
						xcxClick: '首页-二屏页面点击',
						pageName: '首页-二屏',
						buttonName: `品牌介绍${index + 1}`
					}" @tap="jumpLink(contentItem.link, contentItem.videoUrl, index, $event)"></image>
			</view> -->


			<view class="channelbox">
				<text class="maintitle">{{ childrenInfoListMianTitle }}</text>
				<view class="subtitle_box">
					<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
					<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
						xcxClick: '首页-三屏页面点击',
						pageName: '首页-三屏',
						buttonName: `次位内容资源位-查看更多文字`
					}" @tap="jumpLink(suggest.link, false, false, $event)"></image>
				</view>
				<view class="channelscroll">
					<view class="box">
						<view class="infobox" :key="index" v-for="(infoItem, index) in childrenInfoList" :data-log="{
							xcxClick: '首页-三屏页面点击',
							pageName: '首页-三屏',
							buttonName: `次位内容资源位-轮播-${index + 1}`
						}" @tap="jumpLink(infoItem.link, false, false, $event)">
							<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
							<view class="infotitlebox">
								<view class="infotitlecon">
									<view class="infotitle">{{ infoItem.desc }}</view>
									<image v-if="infoItem.isNew" class="infotitletag"
										:src="$baseUrl + 'homepage/home_new_tag_v3.png'">New</image>
								</view>
								<view class="infodesc">{{ infoItem.desc2 }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view :data-log="{
					xcxClick: '首页-三屏页面点击',
					pageName: '首页-三屏',
					buttonName: `次位内容资源位-查看更多文字`
				}" @tap="jumpLink(suggest.link, false, false, $event)" class="desc desc2">
					更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
				</view> -->
			</view>
			<view class="channelbox" id="thirdScreen">
				<text class="maintitle">{{ channelTabListMianTitle }}</text>
				<view class="subtitle_box">
					<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
					<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
						xcxClick: '首页-三屏页面点击',
						pageName: '首页-三屏',
						buttonName: `首位内容资源位-查看更多文字`
					}" @tap="jumpLink(voiceStory.link, false, false, $event)"></image>
				</view>
				<view class="listbox">
					<view @tap="channelTabHandler(index, $event)" :data-log="{
						xcxClick: '首页-三屏页面点击',
						pageName: '首页-三屏',
						buttonName: `首页内容资源位分类${index + 1}-${item}`
					}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in channelTabList"
						:key="index">
						{{ item }}
					</view>
				</view>
				<view class="channelscroll2">
					<view class="box2">
						<view class="infobox2" :key="index"
							v-for="(infoItem, index) in changelInfoList[channelTabIndex]" :data-log="{
								xcxClick: '首页-三屏页面点击',
								pageName: '首页-三屏',
								buttonName: `首页内容资源位分类${channelTabIndex + 1}-${channelTabList[channelTabIndex]}-${index + 1}`
							}" @tap="jumpLink(infoItem.link, false, false, $event)">
							<image class="infoimg2" :src="$baseUrl + infoItem.bgUrl"></image>
							<view class="infotitle2box">
								<view class="infotitle2">
									{{ infoItem.desc }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view :data-log="{
					xcxClick: '首页-三屏页面点击',
					pageName: '首页-三屏',
					buttonName: `首位内容资源位-查看更多文字`
				}" @tap="jumpLink(voiceStory.link, false, false, $event)" class="desc">
					滑动或者点击查看全部 <view class="desc1"> 有声故事 > </view>
				</view> -->
			</view>

			<view id="fourthScreen" class="bottomlink">
				<image class="bottombg" :src="$baseUrl + 'homepage/bottombg.png'"></image>
				<view class="box">
					<image class="icon" v-for="(icon, index) in bottomLinkList" :key="index" :data-log="{
						xcxClick: '首页-四屏页面点击',
						pageName: '首页-四屏',
						buttonName: `${qrNameList[index]}`
					}" :src="$baseUrl + icon.bgUrl" :style="icon._style" @tap="showPopup(index, $event)"></image>
				</view>
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
				border-radius="48rpx">
				<view v-if="qrObj !== null" class="popup-content">
					<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
					<view class="title">
						{{ qrObj.title || '' }}
					</view>
					<rich-text class="desc" :nodes="qrObj.desc || ''"></rich-text>
					<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + (qrObj.qrUrl || '')"></image>
					<image @tap="downloadHandler($baseUrl + (qrObj.qrUrl || ''))" class="btndownload"
						:src="$baseUrl + 'homepage/btn_download.png'"></image>
				</view>
				<view v-else class="popup-content" style="height: 977rpx;">
					<image class="xingmahui" :src="$baseUrl + 'homepage/xingmahui.png'"></image>
					<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
				</view>
			</uni-popup>
		</view>

		<!-- 新增图片弹窗 -->
		<uni-popup :is-mask-click="false" :safe-area="false" ref="imagePopup" background-color="transparent">
			<view class="image-popup-content">
				<image class="popup-image" :src="popupImageUrl" mode="aspectFit" @tap="imagePopupJump"></image>
				<image class="popup-close-btn" @tap="closeImagePopup" :src="$baseUrl + 'homepage/btnclose.png'"></image>
			</view>
		</uni-popup>

		<view v-if="showVideo" class="video-popup">
			<video :src="currentVideoUrl" controls autoplay :style="{ width: '100vw', height: videoHeight }"></video>
			<view class="close-btn-bottom" @tap="closeVideo">×</view>
		</view>
		<RegisterLayer v-model="showRegisterLayer" />
	</view>
</template>


<script>
	import {
		jump,
		JumpType
	} from '../utils';
	import {
		useHomeStore
	} from '../stores/home';
	import {
		fetchHomeJSON
	} from '../api/home';
	import {
		useUserStore
	} from '../stores/user';
	import RegisterLayer from "../components/RegisterLayer.vue";
	import md from '../md';
	import ExposureTracker from '../utils/exposure';
	import {
		getHealthField
	} from "@/api/common";

	// const homeStore = useHomeStore();
	const userStore = useUserStore();

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

	export default {
		beforeDestroy() {
			if (this.exposureTracker) {
				this.exposureTracker.resetAllExposure();
			}
		},
		deactivated() {
			if (this.exposureTracker) {
				this.exposureTracker.resetAllExposure();
			}
		},
		data() {
			return {
				popType: 'bottom',
				statusBarHeight: 38,
				showRegisterLayer: false,
				swiperList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 4000,
				duration: 500,
				indicatoractiveColor: "#a6a0a1",
				indicatorColor: "rgba(255, 255, 255, 1)",
				toolList: {},
				expertTeam: {},
				vipCardList: [],
				contentImgList: [],
				channelTabList: [],
				channelTabIndex: 0,
				changelInfoList: [],
				childrenInfoList: [],
				bottomLinkList: [],
				qrInfoObj: undefined,
				popupIndex: 0,
				qrInfoList: [{
					title: '',
					desc: '',
					qrUrl: ''
				}, {
					title: '',
					desc: '',
					qrUrl: ''
				}, {
					title: '',
					desc: '',
					qrUrl: ''
				}, {
					title: '',
					desc: '',
					qrUrl: ''
				}],
				qrObj: {
					title: '',
					desc: '',
					qrUrl: ''
				},
				showVideo: false,
				currentVideoUrl: '',
				isClickPhoneAuth: false,
				voiceStory: {},
				suggest: {},
				videoHeight: '56vw',
				qrNameList: ['公众号', '企业微信', '视频号', '小红书'],
				windowHeight: 0,
				isFirstScreenExposed: false,
				scrollTimer: null,
				exposureTracker: null,
				currentIndex: 0,
				etTabSelIndex: 0,
				bannerCurrentIndex: 0,
				childrenInfoListMianTitle: '',
				channelTabListMianTitle: '',
				popupImageUrl: '',
				popupImageObj: {},
			}
		},
		components: {
			RegisterLayer
		},
		computed: {
			homeStore() {
				return useHomeStore();
			}
		},
		props: {
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		watch: {
			homeStore: {
				handler(newVal) {
					this.showRegisterLayer = this.isClickPhoneAuth && newVal.isLogin && !newVal.babyExistence;
					if (newVal.homeInfo !== null) {
						this.initHomeInfo();
						this.checkAndShowPopup();
					}
				},
				deep: true,
				immediate: true
			},
			scrollTop: {
				handler(newVal) {
					this.checkExposure(newVal);
				}
			}
		},
		mounted() {
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			this.statusBarHeight = menuButtonInfo.top;
			this.isClickPhoneAuth = false;

			// 获取窗口高度
			const systemInfo = uni.getSystemInfoSync();
			this.windowHeight = systemInfo.windowHeight;

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

			// 初始检查曝光
			this.$nextTick(() => {
				this.checkExposure(this.scrollTop);
			});
		},
		unmounted() {
			// 组件销毁时清理弹窗状态（可选，根据业务需求决定是否保留状态）
			// 如果需要重置弹窗状态，可以在这里调用 this.resetPopupState()
		},
		methods: {

			testSource() {
				uni.navigateTo({
					url: '/pages/syWebview/syWebview?p=xmh'
				})
			},
			async initHomeInfo() {
				const {
					data
				} = await fetchHomeJSON();
				console.warn("data", data)
				if (data) {
					this.swiperList = data.swiperList;
					this.vipConfigList = data.vipConfigList;
					// this.vipCardList = data.vipCardList;
					this.contentImgList = data.contentImgList;
					this.channelTabList = data.channelTabList;
					this.changelInfoList = data.changelInfoList;
					this.childrenInfoList = data.childrenInfoList[0] || [];
					this.bottomLinkList = data.bottomLinkList;
					this.qrInfoList = data.qrInfoList || [];
					this.toolList = data.toolList;
					this.expertTeam = data.expertTeam;
					this.vipCardList = data.vipCardList;
					this.voiceStory = data.voiceStory;
					this.suggest = data.suggest;
					this.childrenInfoListMianTitle = data.childrenInfoListMianTitle;
					this.channelTabListMianTitle = data.channelTabListMianTitle;
					this.popupImageUrl = this.$baseUrl + data.popupImageObj?.imageUrl || '';
					this.popupImageObj = data.popupImageObj || {};

					if (this.homeStore.isLogin) {
						this.vipCardList[0] = data.vipConfigList.find(item => item.grade === this.homeStore.homeInfo
							?.grade);
						this.vipCardList[0].level = this.homeStore.homeInfo?.gradeName;
					} else {
						this.vipCardList[0] = data.vipConfigList[0];
					}
				}
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			jumpBannerHandler(item, index) {
				md.sensorLogTake({
					xcxClick: '首页-首屏页面点击',
					pageName: '首页-首屏',
					buttonName: `第${index + 1}张焦点图-入口`,
				});
				if (item.videoUrl) {
					this.currentVideoUrl = this.$baseUrl + item.videoUrl;
					this.showVideo = true;
					return;
				}
				if (item.link) {
					// 有 link，执行跳转
					jump(item.link);
				} else {
					// 没有 link，预览图片
					uni.previewImage({
						urls: [this.$baseUrl + item.url], // 预览当前图片
						current: this.$baseUrl + item.url // 当前显示的图片
					});
				}
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url], // 预览当前图片
					current: url // 当前显示的图片
				});
			},
			jumpLinkWithLogin(link, evt) {
				if (evt) {
					md.sensorLog(evt);
				}
				if (this.homeStore.isLogin) {
					jump(link);
				}
			},
			jumpLinkCard(item, evt) {
				if (evt) {
					md.sensorLog(evt);
				}
				if (item.btnSubTitle.length > 0 && item.btnTitle.length > 0) {
					return; //如果有按钮的话，废弃这个点击事件
				}
				if (item.link) {
					jump(item.link);
				}
			},
			jumpLink(link, videoUrl, index, evt) {
				if (evt) {
					md.sensorLog(evt);
				}
				if (videoUrl) {
					if (videoUrl.indexOf('http') === -1) {
						videoUrl = this.$baseUrl + videoUrl;
					}
					// 弹出视频
					this.currentVideoUrl = videoUrl;
					if (index === 1) {
						this.videoHeight = "100vw";
					} else {
						this.videoHeight = "56vw";
					}
					this.showVideo = true;
					return;
					// 视频弹窗出现后，video标签的autoplay会自动播放
				} else if (link) {
					if (!link || link === '') {
						return;
					}
					// 其他跳转逻辑
					jump(link);
				}
			},
			channelTabHandler(_index, evt) {
				if (evt) {
					md.sensorLog(evt);
				}
				this.channelTabIndex = _index;
			},
			showPopup(_index, evt) {
				if (evt) {
					md.sensorLog(evt);
				}
				md.sensorLogTake({
					xcxPage: `${this.qrNameList[_index]}拉起半屏二维码入口页面浏览`,
					pageName: `${this.qrNameList[_index]}拉起半屏二维码入口`,
				});

				if (_index === 3) {
					this.qrObj = null;
				} else {
					_index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
					this.qrObj = this.qrInfoList[_index];
				}
				this.popupIndex = _index;
				this.$refs.popup.open(this.popType);
			},
			showPopup1(_index, type) {
				md.sensorLogTake({
					xcxClick: `首页-二屏页面点击`,
					pageName: `首页-二屏`,
					buttonName: type == 1 ? '专家团副标题点击' : '专家团进群咨询按钮点击'
				});

				if (_index === 3) {
					this.qrObj = null;
				} else {
					_index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
					this.qrObj = this.qrInfoList[_index];
				}
				this.popupIndex = _index;
				this.$refs.popup.open(this.popType);
			},
			closePop() {
				this.$refs.popup.close();
			},
			goSearchHandler(e) {
				md.sensorLog(e);
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			downloadHandler(imgurl) {
				md.sensorLogTake({
					xcxClick: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
					pageName: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
					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'
						});
					}
				});
			},
			closeVideo() {
				this.showVideo = false;
				this.currentVideoUrl = '';
			},
			onGetPhoneNumber(e) {
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					uni.showToast({
						title: '请授权使用手机号',
						icon: 'none',
					});
					return;
				}
				console.log('detail', e.detail);
				this.isClickPhoneAuth = true;
				userStore.phoneCallback(e.detail);
			},
			goCustomerHandler(e) {
				md.sensorLog(e);
				const {
					memberId,
					mobile,
					openId,
					unionId
				} = this.homeStore.homeInfo;
				const customerUrl =
					`https://intelcc-user.icsoc.net/?channelKey=45839e0505554f8c8aea3c7b6259b049&init=1&crmld=${memberId}&mobile=${mobile}&openId=${openId}&unionId=${unionId}`;
				jump({
					type: JumpType.H5,
					url: customerUrl
				});
			},
			checkExposure(scrollTop) {
				if (this.exposureTracker) {
					this.exposureTracker.checkExposure(scrollTop);
				}
			},
			resetExposure() {
				if (this.exposureTracker) {
					this.exposureTracker.resetAllExposure();
				}
			},

			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},

			onBannerSwiperChange(e) {
				this.bannerCurrentIndex = e.detail.current;
			},

			async handleToolClick(item) {
				md.sensorLogTake({
					xcxClick: "首页-二屏页面点击",
					pageName: "首页-二屏",
					buttonName: item.title + "工具点击",
				});

				if (item.title === "医生问诊") {
					// if (!cfgStatus.value.isRegister) return;
					const res = await getHealthField();

					if (!res.success) {
						uni.showToast({
							title: "获取健康字段失败",
							icon: "none",
						});
						return;
					}

					const {
						sign,
						timestamp,
						appId,
						partnerUserId,
						env
					} = res.data;

					jump({
						type: JumpType.MINI,
						url: "/pages/partner/redirect",
						extra: {
							appId: "wx81ecfb5aa3fb512f",
							envVersion: env,
							extraData: {
								sign, // 参考 4.请求参数
								timestamp, // 参考 4.请求参数
								appId, // 参考 4.请求参数
								partnerUserId, // 参考 4.请求参数
								targetApp: "/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF",
							},
						},
					});
				} else {
					jump({
						type: item.link.type,
						url: item.link.url
					});
				}
			},

			onSelEtTap(index) {
				let str = index === 0 ? '名医专家' : (index === 1 ? '科研专家' : '权威机构')
				md.sensorLogTake({
					xcxClick: "首页-二屏页面点击",
					pageName: "首页-二屏",
					buttonName: str + "tab按钮点击",
				});
				this.etTabSelIndex = index;
			},
			onETMore(index, type) {
				let str = '';
				if (type === 0) {
					str = '名医专家';
				} else if (type === 1) {
					str = '科研专家';
				} else {
					str = '权威机构';
				}
				if (index === 1) {
					str += '内容'
				} else {
					str += '点击查看更多';
				}
				md.sensorLogTake({
					xcxClick: "首页-二屏页面点击",
					pageName: "首页-二屏",
					buttonName: str + "-点击",
				});
				jump({
					type: 1,
					url: '/pages/expertTeamPage/expertTeamPage?tab=' + (this.etTabSelIndex + 1)
				});
			},
			closeImagePopup() {
				this.$refs.imagePopup.close();
			},

			imagePopupJump() {
				jump({
					type: this.popupImageObj.jumpType,
					url: this.popupImageObj.jumpUrl
				});
			},
			showImagePopup() {
				this.$refs.imagePopup.open('center');
			},
			closePop1() {
				this.$refs.imagePopup.close();
			},

			// 重置弹窗状态（可在需要时调用）
			resetPopupState() {
				this.homeStore.resetPopupState(); // 重置 store 中的弹窗状态
			},

			// 检查并显示弹窗（使用 store 全局状态管理）
			checkAndShowPopup() {
				// 使用 store 中的 hasShownPopup 来记录是否已经显示过弹窗
				if (!this.homeStore.hasShownPopup && this.homeStore.homeInfo?.showPop1) {
					this.homeStore.markPopupAsShown(); // 标记已显示过弹窗（全局状态）
					this.$nextTick(() => {
						setTimeout(() => {
							this.showImagePopup();
						}, 500);
					});
				}
			}
		}
	}
</script>

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

	.home-container {
		width: 100vw;
		overflow-x: hidden;
		background-color: white;

		.content {
			background-color: white;
			padding-bottom: 200rpx;

			.banner {
				height: 1116rpx;

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

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

			.swiper-mask {
				position: absolute;
				left: 0;
				width: 750rpx;
				height: 192rpx;
				z-index: 1;
				top: 1065rpx;

				.swiper-mask-img {
					width: 100%;
					height: 100%;
				}
			}

			// 自定义banner指示器样式
			.custom-banner-indicator {
				position: absolute;
				top: 1075rpx;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 16rpx;

				.banner-dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #feebc4;
					transition: all 0.3s ease;
					flex-shrink: 0;

					&.active {
						width: 40rpx;
						height: 16rpx;
						border-radius: 8rpx;
						background-color: #D3A358;
					}
				}
			}

			.barbox {
				position: absolute;
				top: 97rpx;
				left: 32rpx;
				display: flex;
				align-items: center;

				.btnlogo {
					width: 184rpx;
					height: 66rpx;
				}

				.btnsearch {
					width: 150rpx;
					height: 68rpx;
					margin-left: 20rpx;
				}

				.customer-btn-wrap {
					position: relative;
					display: inline-block;
				}

				.btncustomer {
					width: 70rpx;
					height: 68rpx;
					margin-left: 110rpx;
				}

				.phone-auth-btn-cover {
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					background: transparent;
					opacity: 0;
					border: none;
					padding: 0;
					margin: 0;
					z-index: 10;
					pointer-events: auto;
				}
			}

			// .txtbox {
			// 	width: 100%;
			// 	height: 76rpx;
			// 	background-color: @color-white-soft;
			// 	text-align: center;

			// 	.txtlink {
			// 		color: @color-gold-cover;
			// 		font-size: 24rpx;
			// 		text-underline-offset: 10rpx;
			// 		text-decoration: underline;
			// 	}

			// 	.icon_arrow_yellow {
			// 		width: 12rpx;
			// 		height: 20rpx;
			// 		margin-left: 10rpx;
			// 	}
			// }

			.tools_box {
				width: 750rpx;
				height: 840rpx;
				margin-top: 40rpx;
				overflow-x: scroll;
				padding-left: 38rpx;

				.tools_maintitle {
					// font-size: 42rpx;
					// color: #000;
					color: @color-black-deep;
					font-size: 38rpx;
					font-weight: bold;
				}

				.tools_subtitle {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #999;
				}

				.tool_swiper {
					margin-top: 35rpx;
					width: 720rpx;
					height: 700rpx;
					overflow: visible;
					/* 关键：允许内容溢出 */

					.swiperItem {
						width: 400rpx;
						height: 700rpx;
						top: 40rpx;
					}

					/* 当前激活项放大 */
					.swiperItem.active {
						top: 0rpx !important;
						z-index: 10;
						transition: top 0.4s ease;
					}

					.tool {
						position: absolute;
						width: 400rpx;
						height: 700rpx;

						.sq_btn {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 400rpx;
							height: 650rpx;
							// background-color: red;
							opacity: 0;
							z-index: 2;
						}

						.tool_bg {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 400rpx;
							height: 650rpx;
							border-radius: 40rpx;
							z-index: 1;
						}

						.tool_icon {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 400rpx;
							height: 470rpx;
							border-radius: 40rpx;
						}

						.tool_jt {
							position: absolute;
							left: 300rpx;
							top: 510rpx;
							width: 74rpx;
							height: 44rpx;
						}

						.tool_title {
							position: absolute;
							left: 30rpx;
							top: 510rpx;
							color: #000;
							font-size: 36rpx;
							width: 300rpx;

						}

						.tool_context {
							position: absolute;
							left: 30rpx;
							top: 575rpx;
							font-size: 24rpx;
							color: #999;
							width: 300rpx;
						}
					}
				}


				/* 自定义指示点样式 */
				.custom-indicator {
					width: 200rpx;
					height: 10rpx;
					margin-top: -15rpx;
					margin-left: -20rpx;
					display: flex;
					justify-content: center;
					gap: 10rpx;
				}

				.indicator-dot {
					width: 10rpx;
					height: 10rpx;
					border-radius: 10rpx;
					background-color: #feefcc;
					transition: all 0.3s;
				}

				.indicator-dot.active {
					width: 70rpx;
					border-radius: 10rpx;
					background-color: #d3a358;
				}
			}

			.et_box {
				width: 750rpx;
				// height: 840rpx;
				margin-top: 30rpx;
				padding-left: 38rpx;

				.et_maintitle {
					// font-size: 42rpx;
					// color: #000;
					color: @color-black-deep;
					font-size: 38rpx;
					font-weight: bold;
				}

				.et_subtitle {
					width: 700rpx;
					margin-top: 10rpx;
					display: flex;

					.txtlink {
						width: 500rpx;
						color: @color-gold-cover;
						font-size: 24rpx;
						text-underline-offset: 5rpx;
						text-decoration: underline;
					}

					.icon_more {
						width: 140rpx;
						height: 36rpx;
						margin-left: 45rpx;
						margin-top: 2rpx;
					}
				}

				.et_main_box {
					padding-top: 30rpx;
					margin-top: 35rpx;
					width: 670rpx;
					height: 602rpx;
					background-color: #fde8bb;
					border-radius: 38rpx;

					.et_con_bg {
						margin-left: 3rpx;
						width: 651rpx;
						height: 562rpx;
						background-color: #ffffff;
						border-radius: 38rpx;
						padding-left: 15rpx;
						padding-top: 25rpx;

						.et_tab_box {
							height: 70rpx;
							display: flex;
							gap: 15rpx;

							.tab_box {
								width: 204rpx;
								height: 70rpx;

								.et_tab {
									width: 204rpx;
									height: 70rpx;
								}
							}
						}

						.et_con_box {
							width: 631rpx;
							height: 365rpx;
							margin-top: 40rpx;

							.et_con1 {
								width: 631rpx;
								height: 365rpx;
							}

							.et_con2 {
								width: 631rpx;
								height: 365rpx;
							}

							.et_con3 {
								width: 598rpx;
								height: 303rpx;
								margin-top: 20rpx;
								margin-left: 16rpx;
							}
						}

						.et_more_txt {
							width: 100%;
							font-size: 24rpx;
							color: @color-gold-cover;
							text-align: center;
							margin-top: 30rpx;

							.icon_arrow_yellow {
								width: 12rpx;
								height: 20rpx;
								margin-left: 5rpx;
							}
						}
					}
				}
			}

			.cardScroller {
				width: 750rpx;
				overflow-x: scroll;
			}

			.cardbox {
				// 
				position: relative;
				display: inline-flex;
				flex-wrap: nowrap;
				margin-top: 32rpx;

				.cardboxitem {
					width: 380rpx;
					height: 232rpx;
					position: relative;
					margin-left: 32rpx;

					.bg {
						width: 380rpx;
						height: 232rpx;
						position: absolute;
						z-index: 0;

					}

					.level {
						position: absolute;
						left: 24rpx;
						top: 30rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: @color-gold-cover;
						pointer-events: none;
					}

					.subTitle {
						position: absolute;
						left: 24rpx;
						top: 80rpx;
						font-size: 24rpx;
						color: @color-black-deep;
						pointer-events: none;
					}

					.showCornerTxt {
						position: absolute;
						right: 0;
						top: 0;
						color: white;
						font-size: 24rpx;
						padding: 10rpx;
						border-radius: 0 10rpx 0 10rpx;
						background-color: @color-gold-main;
					}

					.cardbtn {
						position: relative;
						left: 6rpx;
						top: 130rpx;

						.phone-auth-btn-cover {
							position: absolute;
							width: 368rpx;
							height: 88rpx;
							z-index: 0;
							left: 0;
							top: 0;
							opacity: 0;
							pointer-events: auto;

						}

						.cardbtnbg {
							position: absolute;
							width: 368rpx;
							height: 88rpx;
							z-index: 0;
							left: 0;
							top: 0;
						}

						.btnTitle {
							position: absolute;
							// z-index: 1;
							width: 180rpx;
							text-align: center;
							font-size: 24rpx;
							color: white;
							// border: 1px solid red;
							top: 23rpx;
							left: 20rpx;
						}

						.btnSubTitle {
							position: absolute;
							top: 23rpx;
							// z-index: 1;
							font-size: 24rpx;
							font-weight: bold;
							color: @color-gold-light;
							left: 210rpx;
						}
					}
				}
			}

			.contentbox {
				width: 750rpx;
				height: 1429rpx;
				position: relative;
				margin-top: 32px;

				.contentbg {
					width: 100%;
					height: 100%;
					position: absolute;
				}

				.contentitem {
					position: absolute;
				}

			}

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

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

				.subtitle_box {
					display: flex;
					margin-top: 10rpx;
					margin-left: 5rpx;
					width: 700rpx;

					.subtitle {
						width: 500rpx;
						color: @color-black-deep;
						font-size: 24rpx;
					}

					.icon_more {
						width: 127rpx;
						height: 34rpx;
						margin-left: 45rpx;
						margin-top: 2rpx;
					}
				}



				.listbox {
					display: flex;
					margin-top: 20rpx;
					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;
					}
				}

				.channelscroll {
					width: 718rpx;
					overflow-y: scroll;
					margin-top: 32rpx;
					height: 620rpx;

					.box {
						display: flex;
						flex-direction: column;

						.infobox {
							width: 670rpx;
							height: 180rpx;
							display: flex;
							align-items: center;
							background-color: #fff;
							border-radius: 16rpx;
							border: 2rpx solid #feeecb;
							margin-bottom: 20rpx;

							.infoimg {
								border-radius: 12rpx 0rpx 0rpx 12rpx;
								-webkit-flex-shrink: 0;
								flex-shrink: 0;
								height: 180rpx;
								/* margin-top: -1rpx ; */
								width: 180rpx;
							}

							.infotitlebox {
								flex: 1;
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;

								.infotitlecon {
									display: flex;
									flex-direction: row;

									.infotitle {
										color: @color-black-deep;
										width: 400rpx;
										font-size: 24rpx;
										font-weight: bold;
										margin-bottom: 8rpx;
										display: -webkit-box;
										-webkit-line-clamp: 1;
										-webkit-box-orient: vertical;
										overflow: hidden;
										line-height: 1.3;
									}

									.infotitletag {
										width: 46rpx;
										height: 22rpx;
										color: #fff;

									}
								}



								.infodesc {
									color: #999999;
									font-size: 22rpx;
									width: 450rpx;
									line-height: 1.3;
									display: -webkit-box;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}
							}



						}
					}

				}

				.channelscroll2 {
					width: 718rpx;
					margin-top: 32rpx;
					margin-left: -16rpx;

					.box2 {
						width: 718rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.infobox2 {
							width: 330rpx;
							height: 430rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							background-color: #fff;
							border-radius: 16rpx;
							border: 4rpx solid #feeecb;
							margin-bottom: 20rpx;
							position: relative;

							.infoimg2 {
								width: 330rpx;
								height: 306rpx;
								border-radius: 12rpx 12rpx 0rpx 0rpx;
								flex-shrink: 0;
							}

							.infotitle2box {
								margin-top: 10rpx;
								flex: 1;
								display: flex;
								flex-direction: column;
								justify-content: center;
								width: 100%;
								padding: 0 10rpx;

								.infotitle2 {
									color: @color-black-deep;
									width: 90%;
									font-size: 24rpx;
									font-weight: bold;
									margin-bottom: 8rpx;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									line-height: 1.3;
									text-align: left;
									margin-left: 5%;
								}
							}
						}
					}
				}


				.desc {

					color: @color-black-deep;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 32rpx;

					.desc1 {
						color: @color-gold-cover;
						margin-left: 5rpx;
					}
				}

				.desc2 {
					padding-bottom: 32rpx;
				}
			}

			.bottomlink {
				width: 750rpx;
				height: 247rpx;

				.bottombg {
					width: 750rpx;
					height: 247rpx;
					position: absolute;
				}

				.box {
					position: relative;
					top: 100rpx;
					width: 74%;
					left: 13%;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					.icon {}

				}
			}

		}

		.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;
		}

		.phone-auth-mask {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 1000;
		}

		.phone-auth-popup {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background: #fff;
			border-radius: 16rpx;
			padding: 40rpx 32rpx;
			z-index: 1001;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.phone-auth-btn {
			background: #ffd700;
			color: #333;
			font-size: 32rpx;
			border-radius: 8rpx;
			padding: 20rpx 60rpx;
			margin-bottom: 20rpx;
		}

		.close-btn {
			font-size: 40rpx;
			color: #999;
			margin-top: 10rpx;
		}

		.image-popup-content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 16rpx;
			position: relative;

			.popup-image {
				width: 500rpx;
				height: 700rpx;
				border-radius: 16rpx;
				object-fit: cover;
			}

			.popup-close-btn {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				bottom: -50rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 10;
			}
		}
	}
</style>