<template>
	<view class="home-container">
		<view class="content">
			<swiper class="swiper banner" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration" :indicator-color="indicatorColor"
				:indicator-active-color="indicatoractiveColor">
				<swiper-item v-for="item in swiperList" :key="item.url">
					<view class="swiper-item banneritem">
						<image :data-link="item.link" @tap="jumpLink(item.link)" class="b-img" :src="item.url"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="barbox" :style="`top:${statusBarHeight*2-5}rpx;`">
				<image class="btnlogo" :src="baseImgUrl+'/static/homepage/btnlogo.png'"></image>
				<image class="btnsearch" @tap="goSearchHandler" :src="baseImgUrl+'/static/homepage/btnsearch.png'"></image>
				<image class="btncustomer"  :src="baseImgUrl+'/static/homepage/btncustomer.png'"></image>
			</view>
			<view class="txtbox">
				<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
				<image class="icon_arrow_yellow" :src="baseImgUrl+'/static/homepage/icon_arrow_yellow.png'"></image>
			</view>
			<view class="cardScroller">
				<view class="cardbox">
					<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
						<image class="bg" :src="baseImgUrl+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" class="cardbtn"
							:data-link="cardData.link" @tap="jumpLink(cardData.link)">
							<image class="cardbtnbg" :src="baseImgUrl+'/static/homepage/btn_receive.png'"></image>
							<text class="btnTitle">{{cardData.btnTitle}}</text>
							<text class="btnSubTitle">{{cardData.btnSubTitle}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="contentbox">
				<image class="contentbg" :src="baseImgUrl+'/static/homepage/contentbg.png'" alt="" />
				<image class="contentitem" :key="index" :style="contentItem._style"
					v-for="(contentItem,index) in contentImgList" :src="baseImgUrl+contentItem.bgUrl"
					@tap="jumpLink(contentItem.link)"></image>
			</view>
			<view class="channelbox">
				<text class="maintitle">有声频道</text>
				<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
				<view class="listbox">
					<view @tap="channelTabHandler(index)"
						:class="channelTabIndex===index?'tabitem tabActive':'tabitem' "
						v-for="(item,index) in channelTabList" :key="index">
						{{item}}
					</view>
				</view>
				<view class="channelscroll">
					<view class="box">
						<view class="infobox" :key="index" v-for="(infoItem,index) in changelInfoList[channelTabIndex]"
							@tap="jumpLink(infoItem.link)">
							<image class="infoimg" :src="baseImgUrl+infoItem.bgUrl"></image>
							<view class="infotitle">{{infoItem.title}}</view>
						</view>
					</view>

				</view>
				<view class="desc">
					滑动或者点击查看全部 <view class="desc1"> 有声故事 > </view>
				</view>
			</view>
			<view class="channelbox">
				<text class="maintitle">育儿智库</text>
				<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
				<view class="channelscroll">
					<view class="box">
						<view class="infobox" :key="index" v-for="(infoItem,index) in childrenInfoList"
							@tap="jumpLink(infoItem.link)">
							<image class="infoimg2" :src="baseImgUrl+infoItem.bgUrl"></image>
							<view class="infotitle2">
								<view class="infotitle">{{infoItem.title}}</view>
							</view>

						</view>
					</view>

				</view>
				<view class="desc desc2">
					更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
				</view>
			</view>
			<view class="bottomlink">
				<image class="bottombg" :src="baseImgUrl+'/static/homepage/bottombg.png'"></image>
				<view class="box">
					<image class="icon" v-for="(icon,index) in bottomLinkList" :key="index" :src="baseImgUrl+icon.bgUrl"
						:style="icon._style" @tap="showPopup(index)"></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="this.popupIndex !== 3" class="popup-content">
					<image class="btnclose" @tap="closePop" src="/static/homepage/btnclose.png"></image>
					<view class="title">
						{{this.qrInfoList[this.popupIndex].title}}
					</view>
					<rich-text class="desc" :nodes="this.qrInfoList[this.popupIndex].desc">
						
					</rich-text>
					<image class="qrcode" :src="baseImgUrl+this.qrInfoList[this.popupIndex].qrUrl"></image>
					<image class="btndownload" :src="baseImgUrl+'/static/homepage/btn_download.png'"></image>
				</view>
				<view v-else class="popup-content" style="height: 977rpx;">
					<image class="xingmahui" :src="baseImgUrl+'/static/homepage/xingmahui.png'"></image>
					<image class="btnclose" @tap="closePop" src="/static/homepage/btnclose.png"></image>
				</view>
			</uni-popup>
		</view>
	</view>
</template>


<script>
	const baseImgUrl = "";
	const swiperList = [{
			url: '/static/homepage/banner1.jpg',
			link: 'www.baidu.com'
		},
		{
			url: '/static/homepage/banner2.jpg',
			link: 'www.baidu.com'
		},
		{
			url: '/static/homepage/banner3.jpg',
			link: 'www.baidu.com'
		},
	];
	const vipCardList = [{
			level: "钻石会员",
			subTitle: "育儿课程权益",
			btnTitle: "12类系列课程",
			btnSubTitle: "立即领取",
			showCornerTxt: "待领取",
			link: "www.baidu.com",
			bgUrl: "/static/homepage/cardbg1.png"
		},
		{
			level: "北纬47°系列",
			subTitle: "来自万年黑土的健康食品",
			btnTitle: "",
			btnSubTitle: "",
			showCornerTxt: "",
			link: "",
			bgUrl: "/static/homepage/cardbg2.png"
		},
		{
			level: "育儿宝典",
			subTitle: "专家文章、育儿知识、饮食知识",
			btnTitle: "",
			btnSubTitle: "",
			showCornerTxt: "",
			link: "",
			bgUrl: "/static/homepage/cardbg3.png"
		},
	]
	const contentImgList = [{
			bgUrl: '/static/homepage/content_1.png',
			link: 'www.baidu.com',
			_style: 'width:311rpx;height: 324rpx;left: 40rpx;top: 0;'
		},
		{
			bgUrl: '/static/homepage/content_2.png',
			link: 'www.baidu.com',
			_style: 'width:263rpx;height: 324rpx;right: 40rpx;top: 400rpx;'
		},
		{
			bgUrl: '/static/homepage/content_3.png',
			link: 'www.baidu.com',
			_style: 'width:418rpx;height: 345rpx;left: 40rpx;top: 750rpx;'
		},
		{
			bgUrl: '/static/homepage/content_4.png',
			link: 'www.baidu.com',
			_style: 'width:263rpx;height: 324rpx;right: 40rpx;top: 1120rpx;'
		}
	]
	const channelTabList = ["凯叔讲故事", "哄睡故事", "知识科普", "安全意识", "社交能力"];
	const changelInfoList = [
		[{
				bgUrl: "/static/homepage/channel_0_1.png",
				title: "凯叔·金子美铃童诗:【星星和蒲公英】",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/homepage/channel_0_1.png",
				title: "凯叔·金子美铃童诗:【天空和海】",
				link: "www.baidu.com"
			}
		],
		[{
				bgUrl: "/static/homepage/channel_1_1.png",
				title: "凯叔-小睡仙:【睡吧睡吧，香香的】",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/homepage/channel_1_1.png",
				title: "凯叔-小睡仙:【睡觉仙气，3,2,1,】",
				link: "www.baidu.com"
			}
		],
		[{
				bgUrl: "/static/homepage/channel_2_1.png",
				title: "教宝宝认识人体:【守护眼睛的睫毛】",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/homepage/channel_2_1.png",
				title: "教宝宝认识人体：【为什么肚子会咕咕叫？】",
				link: "www.baidu.com"
			}
		],
		[{
				bgUrl: "/static/homepage/channel_3_1.png",
				title: "教宝宝不乱吃东西:【这个不能吃】",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/homepage/channel_3_1.png",
				title: "培养宝宝不摸插座的安全意识:【电线插座不好玩】",
				link: "www.baidu.com"
			}
		],
		[{
				bgUrl: "/static/homepage/channel_4_1.png",
				title: "教会宝宝不嘲笑别人:【鹤鸟】",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/homepage/channel_4_1.png",
				title: "培养宝宝尊重别人的习惯:【爱嘲笑人的斑斑】",
				link: "www.baidu.com"
			}
		]

	]
	const childrenInfoList = [{
			bgUrl: "/static/homepage/children_0.png",
			title: "1+3 育儿妙招大揭秘，带娃从此不“蕉绿”",
			link: "www.baidu.com"
		},
		{
			bgUrl: "/static/homepage/children_1.png",
			title: "已有儿童中招，严重可瘫痪夏季防蜱虫最全指南速看",
			link: "www.baidu.com"
		},
		{
			bgUrl: "/static/homepage/children_2.png",
			title: "99% 家长忽略的脑发育关键动作",
			link: "www.baidu.com"
		}
	]
	const bottomLinkList = [{
			bgUrl: "/static/homepage/iconwx.png",
			link: "www.baidu.com",
			_style: "width:70rpx;height:109rpx;"
		},
		{
			bgUrl: "/static/homepage/iconqw.png",
			link: "www.baidu.com",
			_style: "width:95rpx;height:109rpx;"
		},
		{
			bgUrl: "/static/homepage/iconsph.png",
			link: "www.baidu.com",
			_style: "width:70rpx;height:109rpx;"
		},
		{
			bgUrl: "/static/homepage/iconxhs.png",
			link: "www.baidu.com",
			_style: "width:88rpx;height:99rpx;"
		}
	]
	const qrInfoList = [{
			title: "公众号",
			desc: "扫码关注<span style='color:#D3A358;'>星妈会</span>公众号，了解更多专业育儿资讯",
			qrUrl: "/static/homepage/qrcode_gzh.png"
		},
		{
			title: "企业微信",
			desc: "扫码添加<span style='color:#D3A358;'>星妈管家</span>企微，了解更多专业育儿资讯",
			qrUrl: "/static/homepage/qrcode_qw.png"
		},
		{
			title: "视频号",
			desc: "扫码关注<span style='color:#D3A358;'>星妈会</span>视频号，了解更多专业育儿资讯",
			qrUrl: "/static/homepage/qrcode_sph.png"
		},
	]

	export default {
		data() {
			return {
				popType: 'bottom',
				statusBarHeight:38,
				baseImgUrl: baseImgUrl,
				swiperList: swiperList,
				indicatorDots: true,
				autoplay: true,
				interval: 4000,
				duration: 500,
				indicatoractiveColor: "#a6a0a1",
				indicatorColor: "rgba(255, 255, 255, 1)",
				vipCardList: vipCardList,
				contentImgList: contentImgList,
				channelTabList: channelTabList,
				channelTabIndex: 0,
				changelInfoList: changelInfoList,
				childrenInfoList: childrenInfoList,
				bottomLinkList: bottomLinkList,
				qrInfoList: qrInfoList,
				qrInfoObj: undefined,
				popupIndex: 0

			}
		},
		mounted(){
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight=systemInfo.statusBarHeight || 38;
		},
		methods: {
			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
			},
			jumpLink(_link) {
				console.log(_link)
			},
			channelTabHandler(_index) {
				this.channelTabIndex = _index;
			},
			showPopup(_index) {
				this.popupIndex = _index;
				this.$refs.popup.open(this.popType);
			},
			closePop(){
				
				this.$refs.popup.close();
			},
			goSearchHandler(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			}
		}
	}
</script>

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

	.home-container {
		background-color: white;

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

			.banner {
				height: 1250rpx;

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

					.b-img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.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;
				}
				.btncustomer{
					width: 70rpx;
					height: 68rpx;
					margin-left: 110rpx;
				}
			}

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

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

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

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

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

						.btnTitle {
							position: absolute;
							// z-index: 1;
							width: 169rpx;
							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 {
					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;

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

							.infoimg2 {
								width: 400rpx;
								height: 400rpx;
							}

							.infotitle {
								width: 350rpx;
								color: @color-black-deep;
								font-size: 30rpx;
								text-align: left;
								margin-left: 25rpx;
								font-weight: bold;
							}

							.infotitle2 {
								margin-top: -10rpx;
								width: 400rpx;
								background-color: @color-gray-light;
								border-bottom-left-radius: 20rpx;
								border-bottom-right-radius: 20rpx;

								.infotitle {
									padding-top: 10rpx;
									padding-bottom: 10rpx;
								}
							}
						}
					}

				}

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