<template>
	<view class="">
		<view class="coupon_bg">
			<image class="coupon_bg_title" src="https://zxzhdc.zx-xcx.com/dining/model-title.png"></image>
			<view class="coupon_bg_content">
				<scroll-view scroll-y="true" style="max-height: 300rpx;">
					<view>
						<view class="coupon flex" v-for="(item,index) of couponList" :key='index'>
							<view class="coupon-left flex-y-center">
								<view class="w100">
									<view class="title text-1">
										{{item.name}}
									</view>
									<view v-if="item.type==1" class="title text-1"
										style="font-size: 26rpx;color: #EB8E55;">
										满￥{{Number(item.full)}}元减￥<text
											style="color: red;font-size:30rpx;">{{ Number(item.reduce) }} </text>元
									</view>
									<view v-if="item.type==3" class="date text-1">
										<text style="color: red;font-size: 28rpx;">{{ item.gift }}</text>
									</view>
									<view class="date text-1">
										有效期： {{item.start_time}}~{{item.end_time}}
									</view>
								</view>
							</view>
							<view class="coupon-center">
								<view class="rund top">
								</view>
								<view class="line">
								</view>
								<view class="rund bottom">
								</view>
							</view>
							<view class="coupon-right flex-center flex-grow-1">
								<view class="ft28 getCoupon" v-if="item.state == 1" @tap="receive" :data-id='item.id'
									:data-index="index">
									<view class="">
										立即
									</view>
									<view class="">
										领取
									</view>
								</view>
								<block v-if="item.state == 2">
									<view class="flex-x-center flex-y-center info-btn fs-sm" style="color:#999;">已领取
									</view>
								</block>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<view class="coupon_bg_content_pr flex-y-bottom flex-x-center">
					<image class="img2" src="../static/home/model-bg-btn.png"></image>
					<view class="img3" @click="Getall">
						<image class="" src="/static/home/model-btn.png"></image>
						<view class="img3-pr flex-center">一键领取</view>
					</view>
				</view>
				
			</view>
		</view>
		<gbClose/>
	</view>
</template>
<script>
	import gbClose from './close.vue';
	import {
		mapState,
	} from 'vuex'
	export default {
		components: {
			gbClose
		},
		data() {
			return {
				couponLists: [],
			}
		},
		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo', 'couponList']),
		},

		watch: {
			couponList: {
				handler(val) {
					console.log(val, "val")
					if (val.length > 0) {
						this.couponLists = val;
					}
				},
				deep: true,
			},
		},

		mounted() {
			if (this.couponList.length > 0) {
				this.couponLists = this.couponList;
			}
		},
		
		methods: {
			receive: function(t) {
				let subscribe = uni.getStorageSync('balance_subscribe');
				console.log(t)
				var that = this,
					id = t.currentTarget.dataset.id,
					index = t.currentTarget.dataset.index;
					
					that.$http.request('xcx/LqCoupons', {
						user_id: this.userInfo.id,
						store_id: this.store_id,
						coupon_id: id,
					}, "", "", true).then(res => {
						that.couponList[index].state = 2;
						let couponLength = that.couponList.filter((v, i) => v.state == 2);
						if(couponLength.length == that.couponList.length){
							console.log( "领取关闭");
							that.bus.$emit('send', 2);
						}
						uni.showToast({
							title: '领取成功',
							icon: 'none'
						})
					})
				
				
			},
			
			
			Getall(e){
				var that = this
				that.$http.request('xcx/yijianLqCoupons', {
					user_id: this.userInfo.id,
					store_id: this.store_id,
				}, "", "", true).then(res => {
					that.couponList.forEach((v)=>{
						v.state=2
					})
					that.bus.$emit('send', 2);
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.coupon_bg {
		width: 100%;
		text-align: center;
		border-radius: 0px 0px 16px 16px;
	}

	.coupon_bg_title {
		width: 688rpx;
		height: 404rpx;
		display: block;
		margin-bottom: -2px;
	}

	.coupon_bg_content {
		width: 600rpx;
		// height: 460rpx;
		background: #f41018;
		margin: 0 auto;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.coupon_bg_content .img1 {
		width: 528rpx;
		height: 160rpx;
	}

	.coupon_bg_content_pr {
		position: relative;
	}

	.coupon_bg_content .img2 {
		width: 600rpx;
		height: 166rpx;
	}

	.coupon_bg_content .img3 {
		width: 323rpx;
		height: 77rpx;
		position: absolute;
		bottom: 20rpx;
		color: #751300;
	}

	.coupon_bg_content .img3 image {
		width: 100%;
		height: 100%;
	}

	.coupon_bg_content .img3 .img3-pr {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 90%;
	}

	.coupon {
		width: 528rpx;
		height: 160rpx;
		background: linear-gradient(180deg, #ffefb4 33%, #ffee75 89%);
		border-radius: 8rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;

		.coupon-left {
			width: 404rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #EB8E55;
			padding-left: 22rpx;
			text-align: left;

			.title {
				font-size: 32rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Medium;
				font-weight: 500;
				color: #F03100;
				margin-bottom: 4rpx;
			}

			.date {
				margin-bottom: 4rpx;
				font-size: 24rpx;
			}

			.code {
				font-size: 24rpx;
			}
		}

		.coupon-center {
			position: relative;
			width: 30rpx;

			.rund {
				width: 24rpx;
				height: 24rpx;
				background: #F41018;
				border-radius: 50%;
				position: absolute;
			}

			.top {
				top: -10rpx;
			}

			.bottom {
				bottom: -10rpx;
			}

			.line {
				width: 1rpx;
				height: 124rpx;
				border: 2rpx dashed #EB8E55;
				position: absolute;
				left: 10rpx;
				top: 20rpx;
			}
		}

		.coupon-right {
			.used {
				width: 140rpx;
				height: 140rpx;
			}

			.getCoupon {
				color: #EB8E55;
				font-weight: 600;
			}
		}
	}
</style>
