<template>
	<view class="plr30">
		<view class="f32 mt50">可用红包</view>
		<view v-for="(item,index) in hbs" :key="index" class="flex_column flex_items mt30" style="width: 100%;">
			<view class="bgwhite p30" style="border-radius: 15rpx;width:calc(100% - 60rpx)">
				<u-radio-group v-model="who" iconPlacement="right">
					<view class="flex_start flex_items" style="width: 100%;">
						<view class="flex_between flex_items">
							<view class="flex_column" style="width:370rpx;">
								<view class="f32">{{item.name}}</view>
								<view class="f28 mt15" style="color: #a3a1a1e6;">{{item.remark}}</view>
							</view>
							<view style="width:192rpx;color: #fe4141;" class="flex_column flex_items">
								<view style="">
									<text class="f26">￥</text>
									<text class="f58">{{item.balance}}</text>
								</view>
								<view class="f28">满{{item.full_balance}}可用</view>
							</view>
						</view>
						<u-radio :name="index" activeColor="#FBB500" class="ml30" shape="square" size="22" iconSize="15"
							@change="radioChange"></u-radio>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view style="width: 100%;height:140rpx;"></view>
		<view class="flex_start flex_items"
			style="position: fixed;width: calc(100% - 60rpx);left: 30rpx;bottom: 30rpx;border-radius:40rpx;overflow: hidden;">
			<view class="pl30 ptb20 f28" style="width: 65%;background: #333;color: #fff;">
				<text class="ml30">红包优惠￥{{discount}}</text>
			</view>
			<view @click="gopay" class="ptb20 f32 f-center bold" style="width:35%;background: #fde64f;color: #333;">
				确认
			</view>
		</view>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hbs: [],
				who: 0,
				discount: ""
			}
		},
		onLoad(options) {
			this.hbs = JSON.parse(options.hbs)
			this.discount = this.hbs[this.who].balance
			if (options.whoindex != '') {
				this.who = Number(options.whoindex)
			}
		},
		methods: {
			radioChange(e) {
				this.who = e
				this.discount = this.hbs[e].balance
			},
			gopay() {
				this.who = this.who + ''
				uni.setStorageSync('who', this.who)
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		background: #f5f5f5 !important;
	}
</style>