<template>
	<view class="cuopon">
		<u-navbar title="优惠券" autoBack bg-color="#fff0e7" placeholder></u-navbar>
		<view class="cuopon-list">
			<scroll-view :scroll-y="true" style="height: 100%;">
				<view class="cuopon-item" v-for="item in couponList" :key="item.id">
					<view class="amount-wrap">
						<view class="amount-sign">
							¥
						</view>
						<view class="amount">
							{{ item.balance }}
						</view>
					</view>
					<view class="v-info">
						<view class="title">
							{{ item.title }}
						</view>
						<view class="time">
							有效期 {{ item.end_time }}
						</view>
						<view class="v-desc-wrap">
							<view class="v-desc">
								满{{ item.start }}可用
							</view>
							<view class="v-desc">
								自动抵扣
							</view>
						</view>
					</view>
					<view class="v-ft">
						<u-button class="v-btn" :disabled="!!amount&&item.start >= amount" @click="seleteDiscounts(item)">使用</u-button>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getCouponList } from '@/request/yyf.js';
	export default {
		data() {
			return {
				checkboxValue: [],
				couponList: [],
				amount: 0
			}
		},
		onLoad() {
			this.getData();
			
			let amount = this.$Route.query.amount;
			if( amount ) {
				this.amount = Number(amount);
			}
		},
		methods: {
			leftClick() {
				this.$router.replace('/pages/mine/mine');
			}, 
			seleteDiscounts(data){
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('select', {
					data
				});
				
				uni.$emit('selectCoupon', data);
				uni.navigateBack();
			},
			async getData() {
				const { data } = await getCouponList({
					status: 1
				});
				if(data.code === 1) {
					this.couponList = data.data.data;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cuopon {
		box-sizing: border-box;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 30rpx 30rpx 40rpx;

		.cuopon-list {
			flex: 1;
			overflow: hidden;

			// background: rgba(255, 255, 255, .4);
			.cuopon-item {
				display: flex;
				margin-bottom: 30rpx;
				padding: 25rpx 45rpx;
				background-color: #fff;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.amount-wrap {
					display: flex;

					.amount-sign {
						font-size: 25rpx;
						font-family: OPPOSans-Medium, OPPOSans;
						font-weight: 500;
						color: #FF3838;
						line-height: 40rpx;
					}

					.amount {
						width: 120rpx;
						margin-left: 5rpx;
						font-size: 80rpx;
						font-weight: 800;
						line-height: 1;
						color: #FF3838;
					}
				}

				.v-info {
					flex: 1;
					padding: 0 35rpx;

					.title {
						font-size: 32rpx;
						font-family: OPPOSans-bold, OPPOSans;
						font-weight: bold;
						color: #111111;
					}

					.time {
						padding: 14rpx 0;
						font-size: 24rpx;
						font-family: OPPOSans-Medium, OPPOSans;
						font-weight: 500;
						color: #8C8C8C;
					}

					.v-desc-wrap {
						display: flex;
						flex-wrap: wrap;

						.v-desc {
							margin-right: 12rpx;
							padding: 7rpx 10rpx;
							background: #FFE4D9;
							font-size: 23rpx;
							font-family: OPPOSans Regular-Regular, OPPOSans Regular;
							font-weight: 400;
							color: #FF3838;
							border-radius: 3rpx;
						}
					}
				}

				.v-ft {
					display: flex;
					align-items: flex-end;

					.v-btn {
						height: 50rpx;
						background: #E39B46;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						font-size: 23rpx;
						font-family: OPPOSans-Medium, OPPOSans;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>