<template>
	<view class="page-content">
		<!-- <view class="flex justify-end align-center top">
			<text class="cuIcon-filter" style="color:rgba(61, 61, 61, 1);font-size: 36rpx;"></text>
		</view> -->
		<scroll-view scroll-y class="coin-container flex justify-start flex-wrap" lower-threshold="20"
			@scrolltolower="pageChange">
			<template v-if="coinList.length > 0">
				<view class="coin-item" v-for="(item, index) in coinList" :key="index">
					<image :src="item.brandLogo" class="cover"></image>
					<view style="flex: 1">
						<view class="flex flex-col justify-between">
							<text class="title">{{item.brandName || '--'}}</text>
				
							<text class="sub">{{item.goodsNum}}款商品可兑换</text>
						</view>
				
					</view>
					<view>
						<text class="num">{{item.balance}}</text>
						<text class="cuIcon-rechargefill"
							style="color:rgba(255, 213, 43, 1);font-size: 36rpx;margin-left: 6rpx;"></text>
					</view>
				</view>
			</template>
			
			<template v-else>
				<view class="flex align-center justify-center"
					style="height: 140rpx;width: 100%;color: #747783;font-size: 24rpx;">暂无品牌方啤酒币</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getStoreCoinBalance,
	} from '@/api/bar.js'
	export default {
		data() {
			return {
				coinList: [],
			};
		},
		mounted() {
			this.getStoreCoinBalanceFun()
		},
		methods: {
			// 门店啤酒币余额
			getStoreCoinBalanceFun() {
				getStoreCoinBalance().then(res => {
					if(res.data && res.data.length > 0) {
						this.coinList = res.data.filter(it => it.breweryId != 0)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		padding: 20rpx 0;
		background: #F2F2F2;
		;
		height: 100vh;

		.top {
			padding-right: 50rpx;
			margin-bottom: 28rpx;

		}

		.coin-container {
			flex: 1;

			.coin-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				background-color: #FFF;
				padding: 32rpx;
				border-radius: 20rpx;

				.cover {
					width: 72rpx;
					height: 72rpx;
					// box-shadow: 0px 8px 20px 0px rgba(43, 45, 51, 0.16);
					margin-right: 24rpx;
				}

				.title {
					font-family: Source Han Sans;
					font-size: 36rpx;
					font-weight: 350;
					line-height: 48rpx;
					color: #0B0E26;
				}

				.num {
					font-family: Source Han Sans;
					font-size: 48rpx;
					font-weight: bold;
					line-height: 48rpx;
					color: #2B2D33;
				}

				.sub {
					font-family: Source Han Sans;
					font-size: 24rpx;
					font-weight: 350;
					line-height: 40rpx;
					color: #5E5F60;
					;
				}
			}
		}
	}
</style>