<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 && index>0" 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" v-if="false">
				<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) {
			console.log("item====", item)
			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,
				extra: this.popupImageObj.jumpExtra
			});
		},
		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: 600rpx;
			height: 600rpx;
			border-radius: 16rpx;
			object-fit: cover;
		}

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