<template>
	<view class="page-content">
		<image class="banner" :src="breweryInfo.brandCover"></image>
		<view class="brand-header">
			<view style="padding:0 24rpx">
				<view class="flex align-start justify-between margin-bottom-xl">
					<view class="flex align-center">
						<image :src="breweryInfo.brandLogo" style="width: 72rpx;height: 72rpx;margin-right: 36rpx;">
						</image>
						<view class="flex flex-col">
							<text class="margin-bottom-xs"
								style="color: #0B0E26;font-size: 32rpx;">{{ breweryInfo.brandName}}</text>
							<text class=""
								style="color: #5E5F60;font-size: 24rpx;">{{breweryInfo.country}}·{{breweryInfo.province}}·{{breweryInfo.city}}</text>
						</view>
					</view>
					<view class="flex align-center">
						<text v-if="!isFavor" class="cuIcon-like"
							style="font-size: 50rpx;color: #0B0E26;margin-right: 30rpx;"
							@click="favorBreweryFun(1)"></text>
						<text v-else class="cuIcon-likefill" style="font-size: 50rpx;color: pink;margin-right: 30rpx;"
							@click="favorBreweryFun(2)"></text>
						<image src="/static/send.png" style="width: 50rpx;height: 50rpx;" @click="share"></image>
					</view>

				</view>
				<view class="flex justify-between align-center">
					<view style="width: 226rpx;text-align: center;">
						<view class="margin-bottom-xs" style="font-size: 36rpx;">{{ beerTotal}}</view>
						<view style="font-size: 24rpx;">在售酒款</view>
					</view>
					<view class="solid-left solid-right" style="width: 226rpx;text-align: center;">
						<view class="margin-bottom-xs" style="font-size: 36rpx;">
							{{ breweryInfo.buildingDate && breweryInfo.buildingDate.substr(0,4)}}
						</view>
						<view style="font-size: 24rpx;">since</view>
					</view>
					<view style="width: 226rpx;text-align: center;">
						<view class="margin-bottom-xs" style="font-size: 36rpx;">{{myCoin || '--'}}</view>
						<view style="font-size: 24rpx;">啤酒币</view>
					</view>
				</view>
			</view>
			<view style="color: #A1A1A1;font-size: 24rpx;margin-top:28rpx;text-indent: 2em;">
				{{breweryInfo.desc}}
			</view>
		</view>

		<view class="content-box">
			<view class="top flex align-center justify-between">
				<view class="def-box" :class="{'active':currentTab == 1}" @click="changeTab(1)">累积活动</view>
				<view class="def-box" :class="{'active':currentTab == 2}" @click="changeTab(2)">在售酒款</view>
				<view class="def-box" :class="{'active':currentTab == 3}" @click="changeTab(3)">啤酒币兑换</view>
			</view>
			<!-- 累积活动 -->
			<view v-if="currentTab == 1">
				<scroll-view scroll-y enable-flex class="scroll-container" @scrolltolower="changeActPage">
					<view class="activity-item flex" v-for="(it, index) in activityList" :key="index">
						<view class="left flex flex-col justify-between align-center">
							<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;"></image>
							<view class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募即将结束</view>
							<view>
								<text style="font-size: 72rpx; color: #DE3C4B;">{{it.remainingDays}}</text>天
							</view>

						</view>
						<view class="right">
							<!-- <view class="title">{{ it.activityName }}</view> -->
							<view class="title">{{ it.breweryName }}</view>
							<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration}}天内</text></view>
							<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget}}桶</view>
							<scroll-view v-if="it.beers" scroll-x="true" class="scroll-img">
								<view class="beer-box" v-for="(it, index) in it.beers" :key="index"
									@click="toReview(it)">
									<image v-if="it.cover" :src="it.cover" class="cover"></image>
								</view>
							</scroll-view>
							<view class="flex align-center">
								<text
									v-if="it.activityRewardType == 2 || (it.activityRewardType == 1 && it.activityRewardGoods)"
									class="zeng">赠</text>
								<text v-if="it.activityRewardType == 1 && it.activityRewardGoods"
									style="color: #0B0E26;font-size: 24rpx;">{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}</text>
								<text v-if="it.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{it.activityRewardCount}}个</text>
							</view>
						</view>
					</view>
					<view class="cu-load" style="width: 100%;"
						:class="loading?'loading': activityList.length == activityTotal ? 'over' :'more'"></view>
				</scroll-view>
			</view>
			<!-- 在售酒款 -->
			<view v-if="currentTab == 2" class="">
				<scroll-view scroll-y enable-flex class="scroll-container flex justify-start flex-wrap" @scrolltolower="changeBeerPage">
					<view class="beer-box" v-for="(it, index) in beerList" :key="index" @click="toReview(it)">
						<image :src="it.cover" class="cover"></image>
						<view class="title word-all">{{ it.beerName}}</view>
						<view class="desc word-all">{{ it.beerStyles }}</view>
						<view class="desc word-all">{{ 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>
					<view class="cu-load" style="width: 100%;"
						:class="loading?'loading': beerList.length == beerTotal ? 'over' :'more'"></view>
				</scroll-view>
			</view>
			<!-- 啤酒币兑换 -->
			<view v-if="currentTab == 3" class="goods-container">
				<scroll-view scroll-y enable-flex class="flex justify-start flex-wrap" style="height: 100%;"
					lower-threshold="20" @scrolltolower="changeGoodsPage">
					<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
						<view class="cover-box">
							<image :src="item.goodsCover" class="cover"></image>
							<!-- <view class="like">
								<text v-if="index % 2 == 0" class="cuIcon-like" style="color: #1E2019"></text>
								<text v-else class="cuIcon-likefill" style="color: pink"></text>
							</view> -->
						</view>
						<view class="title">
							<text>{{ item.goodsName }}</text>
						</view>
						<view class="flex justify-between align-center" style="padding:26rpx 16rpx">
							<view class="flex align-center">
								<text class="num">{{ item.redeemedNum}}</text>
								<image src="@/static/beerCoin.png"
									style="width: 30rpx;height: 30rpx;margin-left: 20rpx;">
								</image>
							</view>
							<!-- <text style="color: #979797;font-size: 20rpx;">青岛啤酒</text> -->
						</view>
					</view>
					<view class="cu-load" style="width: 100%;"
						:class="loading?'loading': goodsList.length == goodsTotal ? 'over' :'more'"></view>
				</scroll-view>
			</view>
		</view>
		<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
	</view>

</template>

<script>
	import {
		getBreweryInfo,
		getBreweryActivities,
		getBreweryBeerList,
		getBreweryGoodsList,
		favorBrewery,
		getBreweryFavorStatus,
		getBreweryCoinBalance
	} from '@/api/bar.js'
	import loginPopup from '@/components/loginPopup.vue';
	export default {
		components: {
			loginPopup,
			// createPoster
		},
		data() {
			return {
				breweryId: '',
				currentTab: 1,
				breweryInfo: {}, // 品牌方详情
				activityList: [],
				goodsList: [],
				beerList: [],
				loading: false,
				beerTotal: 0, // 在售酒款总数
				goodsTotal: 0, // 兑换商品总数
				activityTotal: 0, // 活动总数
				total: 0,
				formattedDate: '', // 当前年月日
				isFavor: false, // 是否收藏
				myCoin: 0, // 我的啤酒币
				queryForm: {
					pageNum: 1,
					pageSize: 4,
					id: ''
				}
			};
		},
		onLoad({
			breweryId
		}) {
			this.breweryId = breweryId
			this.queryForm.id = breweryId
			this.getBreweryInfoFun()
			this.getBreweryActivitiesFun()
			this.getBreweryBeerListFun()
			this.getBreweryGoodsListFun()
			this.getDate()
			this.getBreweryFavorStatusFun()
			this.getBreweryCoinBalanceFun() // 啤酒币余额
		},
		methods: {
			changeTab(index) {
				this.currentTab = index
				this.queryForm.pageNum = 1
				if (index == 1) {
					this.activityList = []
					this.getBreweryActivitiesFun()

				} else if (index == 2) {
					this.beerList = []
					this.getBreweryBeerListFun()
				} else if (index == 3) {
					this.goodsList = []
					this.getBreweryGoodsListFun()
				}

			},
			// 登录成功回调
			loginSuccess() {
				this.getBreweryFavorStatusFun()
				this.getBreweryCoinBalanceFun()
			},
			share() {
				uni.downloadFile({
					url: this.breweryInfo.brandCover,
					success: (res) => {
						console.log(res)
						// #ifdef MP-WEIXIN
						uni.showShareImageMenu({
							provider: 'weixin',
							// path: '/pages/index/featureInfo?id=' + this.id,
							path: res.tempFilePath,
							shareType: 0,
							success: (res) => {
								console.log(res)
							},
							fail: (err) => {
								console.log(err)
							}
						})
						// #endif
					}
				})
			},
			// 啤酒币余额
			getBreweryCoinBalanceFun() {
				if (!uni.getStorageSync('token')) {
					this.$refs.loginRef.open()
					return
				}
				getBreweryCoinBalance(this.breweryId).then(res => {
					if (res.data) {
						this.myCoin = res.data.balance
					}
				})
			},
			// 收藏品牌方状态
			getBreweryFavorStatusFun() {
				if (!uni.getStorageSync('token')) {
					this.$refs.loginRef.open()
					return
				}
				getBreweryFavorStatus(this.breweryId).then(res => {
					if (res.data) {
						this.isFavor = true
					} else {
						this.isFavor = false
					}
				})
			},
			// 获取当前年月日
			getDate() {
				const currentDate = new Date();
				// 获取年份
				const year = currentDate.getFullYear();
				// 获取月份（注意：月份是从 0 开始计数的，所以要加 1）
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				// 获取日期
				const day = String(currentDate.getDate()).padStart(2, '0');
				// 格式化日期为 YYYY-MM-DD 格式
				this.formattedDate = `${year}-${month}-${day}`;
			},
			// 计算剩余天数
			getRemainingDays(date) {
				const targetDate = new Date(date);
				const currentDate = new Date();
				const timeDiff = targetDate.getTime() - currentDate.getTime();
				const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
				return remainingDays;
			},

			// 品牌方详情
			getBreweryInfoFun() {
				getBreweryInfo(this.breweryId).then(res => {
					this.breweryInfo = res.data
				})
			},
			// 累积活动
			getBreweryActivitiesFun() {
				this.loading = true
				getBreweryActivities(this.queryForm).then(res => {
					this.loading = false
					this.activityTotal = res.total
					if (res.rows && res.rows.length > 0) {
						let arr = res.rows.map(it => {
							it.remainingDays = this.getRemainingDays(it.endDate)
							return it
						})
						arr.forEach(it => {
							this.activityList.push(it)
						})
					}
				}).catch(() => {
					this.loading = false
				})
			},
			changeActPage() {
				if (this.activityList.length < this.activityTotal) {
					this.queryForm.pageNum++
					this.getBreweryActivitiesFun()
				}
			},
			// 在售酒款
			getBreweryBeerListFun() {
				this.loading = true
				getBreweryBeerList(this.queryForm).then(res => {
					this.loading = false
					this.beerTotal = res.total
					if (res.rows && res.rows.length > 0) {
						res.rows.forEach(it => {
							this.beerList.push(it)
						})
					}
					
				}).catch(() => {
					this.loading = false
				})
			},

			changeBeerPage() {
				if (this.beerList.length < this.beerTotal) {
					this.queryForm.pageNum++
					this.getBreweryBeerListFun()
				}
			},
			// 兑换商品
			getBreweryGoodsListFun() {
				this.loading = true
				getBreweryGoodsList(this.queryForm).then(res => {
					this.loading = false
					this.goodsTotal = res.total
					if (res.rows && res.rows.length > 0) {
						res.rows.forEach(it => {
							this.goodsList.push(it)
						})
					}
				}).catch(() => {
					this.loading = false
				})
			},
			changeGoodsPage() {
				if (this.goodsList.length < this.goodsTotal) {
					this.queryForm.pageNum++
					this.getBreweryGoodsListFun()
				}
			},
			// 收藏品牌方
			favorBreweryFun(status) {
				if (!uni.getStorageSync('token')) {
					this.$refs.loginRef.open()
					return
				}
				let data = {
					breweryId: this.breweryId,
					status
				}
				favorBrewery(data).then(res => {
					if (status == 1) {
						uni.showToast({
							title: '收藏成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: '取消收藏',
							icon: 'none'
						})

					}
					this.getBreweryFavorStatusFun()

				})
			},
			// 跳转详情
			toDetail(item) {
				uni.navigateTo({
					url: "/pagesCoin/goodsDetail?id=" + item.id + "&breweryId=" + item.breweryId
				})
			},
			// 跳转酒评页
			toReview(it) {
				uni.navigateTo({
					url: "/pages/index/review?beerId=" + it.id
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page-content {
		.banner {
			width: 100%;
			height: 724rpx;
		}

		.brand-header {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: -150rpx;
			margin-bottom: 20rpx;
			z-index: 1;
		}

		.content-box {
			padding: 22rpx 26rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 30rpx;

			.top {
				padding: 0 72rpx;
				margin-bottom: 20rpx;

				.def-box {
					font-size: 20rpx;
					font-weight: 500;
					color: #0B0E26;
					width: 146rpx;
					height: 52rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 13rpx;
					background-color: #F2F2F2;
				}

				.active {
					background: #39E5B1;
				}
			}

			// 累积活动
			.activity-item {
				border-radius: 20rpx;
				background: #FDFDFD;
				box-sizing: border-box;
				border: 1px solid #F2F2F2;
				width: 702rpx;
				margin-bottom: 32rpx;

				.left {
					padding: 24rpx 20rpx;
					border-radius: 20rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					border: 1px solid #EFEDE9;
					width: 180rpx;
					margin-top: -10rpx;
					margin-bottom: -10rpx;
				}

				.right {
					padding: 20rpx;
					flex: 1;

					.title {
						font-family: Source Han Sans;
						font-size: 28rpx;
						font-weight: bold;
						line-height: 30rpx;
						color: #0B0E26;
						margin-bottom: 20rpx;
					}

					.sub {
						font-family: Source Han Sans;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 30rpx;
						color: #0B0E26;
						margin-bottom: 16rpx;

					}

					.scroll-img {
						width: 500rpx;
						display: flex;
						flex-direction: row;
						white-space: nowrap;
						height: 144rpx;
						margin-bottom: 20rpx;

						.beer-box {
							width: 100rpx;
							background: #FFFFFF;
							margin-right: 20rpx;
							box-sizing: border-box;
							display: inline-block;

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

							.cover {
								width: 100rpx;
								height: 144rpx;
								border-radius: 10rpx;
							}

						}
					}

					.zeng {
						font-family: Source Han Sans;
						font-size: 20rpx;
						font-weight: bold;
						line-height: normal;
						text-align: center;
						color: #0B0E26;
						padding: 8rpx 12rpx;
						border-radius: 10rpx;
						background: #FEE034;
						margin-right: 20rpx;
					}
				}
			}

			// 在售酒款
			.scroll-container {
				margin-bottom: 50rpx;
				justify-content: flex-start;
				.beer-box {
					width: 208rpx;
					background: #FFFFFF;
					margin-right: 12rpx;
					margin-left: 12rpx;
					margin-bottom: 36rpx;
					box-sizing: border-box;
					// display: inline-block;
					min-height: 490rpx;
					// &: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;
					}
				}
			}

			// 兑换商品
			.goods-container {
				flex: 1;
				overflow-y: auto;
				padding-bottom: calc(60rpx + constant(safe-area-inset-bottom));
				padding-bottom: calc(60rpx + env(safe-area-inset-bottom));

				.goods-item {
					width: 334rpx;
					height: 605rpx;
					border-radius: 30rpx;
					background: rgba(255, 255, 255, 0.59);
					box-sizing: border-box;
					border: 1px solid rgba(242, 242, 242, 0.702);
					margin-right: 20rpx;
					margin-bottom: 56rpx;

					&:nth-child(2n) {
						margin-right: 0;
					}

					.cover-box {
						width: 334rpx;
						height: 440rpx;
						border-radius: 30rpx 30rpx 0 0;
						position: relative;

						.cover {
							width: 100%;
							height: 100%;
							border-radius: 30rpx 30rpx 0 0;
						}

						.like {
							position: absolute;
							right: 16rpx;
							bottom: 18rpx;
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							background-color: #fff;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.title {
						padding: 16rpx 14rpx;
						font-size: 24rpx;
						color: #3D3D3D;
					}

				}
			}
		}
	}
</style>