<template>
	<view class="page">
		<view :style="{'padding-top': statusBaeHeight + 58 + 'px'}">
			<view class="search-box">
				<input type="text" placeholder="搜索酒款/酒厂" @focus="toSearch">
			</view>
		</view>
		<view v-if="showJoinImg && bannerJoin" class="join-box" @click="toJoin">
			<!-- <view class="text-center" >加入我们，一起探索酒吧运营增长新模式🎈</view>
			<view class="flex justify-between align-center" style="margin-bottom:50rpx">
				<text>实时酒款评分</text>
				<text>无缝对接品牌活动</text>
				<text>酒币好礼兑换</text>
			</view>
			<view class="bg-zd btn" @click="toJoin">立即入驻</view> -->
			<image :src="bannerJoin.bannerUrl" class="img"></image>
		</view>
		<!-- 轮播 -->
		<swiper v-if="beerList.length > 0" class="swiper" circular :autoplay="true" :indicator-dots="true">
			<swiper-item v-for="(item,index) in beerList" :key="index">
				<view class="goods-box">
					<image :src="item.cover" class="cover"></image>
					<view class="flex-1">
						<view class="flex justify-between align-center" style="margin-bottom: 28rpx;">
							<view class="flex align-center">
								<text
									style="font-size: 40rpx;color: #141415;font-weight: 600;margin-right: 8rpx;">{{ item.beerName }}</text>
								<image src="@/static/verify-mark.png" style="width: 48rpx;height: 48rpx;">
								</image>
							</view>

							<!-- <text class="cuIcon-like" style="color: #979797;font-size: 48rpx;"></text> -->
						</view>
						<view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;">品牌名称</view>
						<view style="margin-bottom: 38rpx;font-size: 30rpx;color: #5F5F63;">{{ item.launchDate }}</view>
						<text style="border-radius: 16rpx;background: #F5F5F5;padding: 8rpx 16rpx;color: #5F5F63;">
							<text class="cuIcon-favorfill" style="font-size: 30rpx;color: #FFBC11;"></text>
							4.9
						</text>
						<text style="color: #5F5F63;margin-left: 16rpx;">20 条评论</text>
					</view>
				</view>
			</swiper-item>

		</swiper>

		<!-- 快捷导航 -->
		<view class="flex justify-between bg-white" style="margin-bottom:32rpx;padding: 20rpx 36rpx">
			<view class="nav-item" @click="toGo(1)">
				<view class="flex justify-center align-center img-box">
					<image src="/static/nav-1.png" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<text class="text-bold">新酒上市</text>
			</view>
			<view class="nav-item" @click="toGo(2)">
				<view class="flex justify-center align-center img-box">
					<image src="/static/nav-2.png" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<text class="text-bold">生成酒单</text>
			</view>
			<view class="nav-item" @click="toGo(3)">
				<view class="flex justify-center align-center img-box">
					<image src="/static/nav-3.png" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<text class="text-bold">酒币换购</text>
			</view>
			<view class="nav-item" @click="toGo(4)">
				<view class="flex justify-center align-center img-box">
					<image src="/static/nav-4.png" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<text class="text-bold">关注厂牌</text>
			</view>
		</view>
		<!-- <view class="flex quickNav-box">
			<image class="left" :src="quickNavList[0].bannerUrl"></image>
			<view style="width: 326rpx;">
				<image class="right"  :src="quickNavList[1].bannerUrl"></image>
				<image class="right" :src="quickNavList[2].bannerUrl"></image>
			</view>
		</view> -->
		<!-- <view class="padding-lr flex justify-start">
			<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">为您推荐</view>
			<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">我的关注</view>
			<view class="text-sm tag" :class="{'active-tag': curTag == 2}" @click="changeTag(2)">新酒上枪</view>
			<view class="text-sm tag" :class="{'active-tag': curTag == 3}" @click="changeTag(3)">风格分类</view>
		</view> -->
		<!-- <view style="padding:32rpx 24rpx;background: #F6F6F6;">
			<view class="text-bold" style="font-size: 40rpx;color: #1A1A1A;">热门活动招募</view>
			<image src="/static/home-arrow-down.png" style="width: 80rpx;height: 70rpx;"></image>
		</view> -->
		<commonTitle title="热门活动招募"></commonTitle>
		<!-- 专辑列表 -->
		<template v-for="(item,i) in featurePageList">
			<view class="flex justify-between align-center title-box">
				<view class="flex-1 flex flex-col">
					<text class="title">{{ item.pageName }}</text>
					<text class="sub">{{ item.subTitle}}</text>
				</view>
				<image src="@/static/arrow-right.png" style="width: 48rpx;height: 48rpx;"></image>
			</view>
			<scroll-view scroll-x="true" class="scroll-container">
				<view class="beer-box" v-for="(it, index) in item.beers" :key="index" @click="toReview(it)">
					<image :src="it.cover" class="cover"></image>
					<view class="title">{{ it.beerName}}</view>
					<view class="desc">{{ it.beerStyles }}</view>
					<view class="desc">{{ it.brandName }}</view>
					<view class="flex align-center num">
						<image src="@/static/vector.png" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
						</image>
						{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）
					</view>
				</view>
			</scroll-view>
		</template>
		<view v-if="showJoinImg" class="weixin-box">
			<text>入驻助理在线服务，1对1咨询入驻权益和使用指南！</text>
			<view class="bg-zd btn">立即添加</view>
		</view>
		<!-- 开屏广告 -->
		<uni-popup ref="ADRef" type="center" :is-mask-click="false">
			<view class="flex flex-col align-center justify-center" style="width: 630rpx;height: 61vh;">
				<swiper class="swiper" style="width: 630rpx;height: 58vh;" circular :autoplay="true"
					:indicator-dots="true">
					<swiper-item v-for="(item,index) in ADList" :key="index">
						<image :src="item.bannerUrl" style="width: 630rpx;height: 50vh;border-radius: 30rpx;"
							@click="handleAD(item)">
						</image>
					</swiper-item>
				</swiper>
				<text class="cuIcon-roundclose text-white" style="font-size: 68rpx !important;" @click="closeAd"></text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getBeerList,
		getBannerList
	} from '@/api/bar.js'
	import {
		listFeaturePage
	} from '@/api/platform.js'
	import commonTitle from '@/components/commonTitle.vue'
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				statusBaeHeight: 0,
				curTag: 0,
				beerList: [],
				ADList: [], // 广告弹窗
				bannerJoin: null, // 入驻banner
				showJoinImg: false, // 是否显示入驻图片
				userInfo: null,
				featurePageList: [], // 专辑页列表
				quickNavList: [], // 快捷导航
			};
		},
		mounted() {
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#FFFFFF',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			}, 500)
			this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
			this.userInfo = uni.getStorageSync('userInfo')
			if (!this.userInfo || this.userInfo.userType == '09') { // 没登录或者没入驻
				this.showJoinImg = true
			}
			// this.getBeerListFun()
			this.getBannerListFun() // 广告轮播图
			this.getFeaturePageListFun() // 专辑页列表
		},

		methods: {
			// 搜索
			toSearch() {
				uni.navigateTo({
						url: '/pages/index/searchBeer'
					})
			},
			changeTag(index) {
				this.curTag = index
			},
			getBeerListFun() {
				getBeerList().then(res => {
					this.beerList = res.rows
				})
			},
			// 查询广告弹窗 banner列表
			getBannerListFun() {
				this.ADList = []
				this.bannerJoin = null
				getBannerList().then(res => {
					res.data.forEach(it => {
						if (it.bannerType == 'homeAD') { // 开屏广告
							this.ADList.push(it)
						} else if (it.bannerType == 'homeJoin') { // 入驻
							this.bannerJoin = it
						} else if (it.bannerType == 'quickNav') { // 快捷导航
							this.quickNavList.push(it)
						}
					})
					if (this.quickNavList.length > 0) {
						// 按照showOrder排序
						this.quickNavList.sort((a, b) => {
							return a.showOrder - b.showOrder
						})
					}
					let showHomeAD = uni.getStorageSync('showHomeAD')
					if (!showHomeAD) {
						this.$refs.ADRef.open()
					}

				})
			},
			// 关闭广告
			closeAd() {
				uni.setStorageSync('showHomeAD', true)
				this.$refs.ADRef.close()
			},
			handleAD(item) {
				this.closeAd()
				if (item.bannerLink) {
					uni.navigateTo({
						url: item.bannerLink,
					})
				}
			},
			// 立即入驻
			toJoin() {
				if (!this.bannerJoin) return
				uni.navigateTo({
					url: this.bannerJoin.bannerLink,
				})
			},
			// 跳转专辑页
			toFeaturePage(item) {
				uni.navigateTo({
					url: `/pages/index/featurePage?id=${item.id}`
				})
			},
			// 查询专辑页列表
			getFeaturePageListFun() {
				listFeaturePage().then(res => {
					this.featurePageList = res.data
				})
			},
			// 跳转酒评页
			toReview(it) {
				uni.navigateTo({
					url: "/pages/index/review?beerId=" + it.id
				})
			},
			toGo(key) {
				switch (key) {
					case 1: // 新酒上市
						// uni.navigateTo({
						// 	url: "/pages/index/review?beerId=" + it.id
						// })
						break;
					case 2: // 生成酒单
						uni.navigateTo({
							url: "/pagesActivity/winelist?beerId=2"
						})
						break;
					case 3: //酒币换购
						if (!this.userInfo) {
							uni.showModal({
								title: '提示',
								content: '请先登录',
								showCancel: false,
								success: () => {
									uni.navigateTo({
										url: '/pages/index/chooseLogin'
									})
								}
							})
							return
						}
						uni.navigateTo({
							url: "/pagesCoin/beerCoin"
						})
						break;
					case 4: // 关注酒厂
						// uni.navigateTo({
						// 	url: "/pages/index/review?beerId=" + it.id
						// })
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-popup {
		z-index: 1025;
	}

	.page {
		background: #FDFDFD;
		height: 100vh;
		overflow-y: auto;
		padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
	}

	.search-box {
		border-radius: 20rpx;
		width: 466rpx;
		height: 60rpx;
		background-color: rgba(196, 196, 196, 0.15);
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		margin-left: 32rpx;

		input {
			width: 100%;
			height: 100%;
			background-color: transparent;
			font-size: 28rpx;
		}
	}

	.join-box {
		margin: 20rpx 32rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		border: 1.5px solid #F2F2F2;
		padding: 34rpx 26rpx;
		height: 450rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.btn {
			width: 582rpx;
			height: 68rpx;
			border-radius: 24rpx;
			text-align: center;
			line-height: 68rpx;
			margin: 0 auto;
		}

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

	.swiper {
		margin-bottom: 20rpx;
		height: 400rpx;
	}

	// 快捷导航
	.nav-item {
		text-align: center;
		color: #0B0E26;

		.img-box {
			width: 146rpx;
			height: 146rpx;
			background: #F2F2F2;
			border-radius: 50%;
			margin-bottom: 18rpx;
		}
	}

	.quickNav-box {
		border-radius: 20rpx;
		background: #FFFFFF;
		width: 100%;
		padding: 32rpx 24rpx;
		height: 490rpx;
		box-sizing: border-box;

		.left {
			height: 416rpx;
			width: 352rpx;
			// width: 47%;
			border-radius: 20rpx;
			margin-right: 22rpx;
		}

		.right {
			height: 196rpx;
			// width: 326rpx;
			width: 100%;
			margin-bottom: 22rpx;
			border-radius: 20rpx;
		}
	}

	.goods-box {
		border-radius: 30rpx;
		background: rgba(255, 255, 255, 0.2);
		box-sizing: border-box;
		border: 1px solid #F2F2F2;
		box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
		display: flex;
		padding: 16rpx 32rpx;
		margin: 20rpx 32rpx 0;

		.cover {
			width: 208rpx;
			height: 300rpx;
			border-radius: 30rpx;
			margin-right: 14rpx;
		}
	}

	.tag {
		background-color: transparent;
		border-radius: 12rpx;
		padding: 12rpx 20rpx;
		border: 1px solid #9D9D9D;
		;
		margin-right: 24rpx;
		margin-bottom: 50rpx;
	}

	.active-tag {
		background-color: #FEE034;
		font-weight: bold;
		border: 1px solid #FEE034;

	}

	.title-box {
		padding: 24rpx 32rpx;
		margin-bottom: 28rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #1E2019;
			line-height: 130%;
		}

		.sub {
			font-size: 20rpx;
			color: #9D9D9D;
		}
	}

	.scroll-container {
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		height: 490rpx;
		margin-bottom: 50rpx;

		.beer-box {
			width: 208rpx;
			background: #FFFFFF;
			margin-right: 28rpx;
			margin-bottom: 36rpx;
			box-sizing: border-box;
			display: inline-block;

			&:nth-child(1) {
				margin-left: 32rpx;
			}

			.cover {
				width: 208rpx;
				height: 300rpx;
				border-radius: 30rpx;
				margin-bottom: 18rpx;
			}

			.title {
				font-size: 28rpx;
				color: #1E2019;
				margin-bottom: 12rpx;
				color: #19191B;
			}

			.desc {
				font-size: 24rpx;
				color: #A5A7B9;
				margin-bottom: 12rpx;
				color: #979797;
			}

			.num {

				font-size: 20rpx;
				color: #5F5F63;
			}
		}
	}

	.weixin-box {
		position: fixed;
		// bottom: 130rpx;
		bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
		background-color: #71F4B4;
		border-radius: 30rpx 30rpx 0px 0px;
		height: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 40rpx 26rpx;
		font-size: 20rpx;
		color: #3D3D3D;

		.btn {
			border-radius: 30rpx;
			background: #FEE034;
			width: 132rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			font-size: 20rpx;
			color: #3D3D3D;
			font-weight: 500;
		}

	}
</style>