<template>
	<view>
		<!-- tab切换 -->
		<view class="recently flex-between">
			<!-- <van-tab @click="onTab" /> -->
			<liuyuno-tabs :tabData="tabs" @tabClick='onTab' />
		</view>
		<view class="" style="height: 80rpx;"></view>
		<no-none v-if='CouponList.length<=0'></no-none>
		<block v-else>
			<block v-for=" (item,index) in CouponList" :key="index">
				<view class="CouponList" @click="CouponUse" :data-id="item.id">
					<image src="../../static/images/discount-Couponimg.png" mode="" class="CouponListimg"></image>
					<view class="CouponL">
						<view class="CouponLmoney">￥{{ Number(item.cut_price) }}</view>
						<view class="CouponLmoneys">满{{ Number(item.full_price)}}可用</view>
					</view>
					<view class="CouponContent">
						<view class="CouponContenttitle text-1">{{item.title}}</view>
						<view class="CouponContentC">
							<text>有效期：</text>
							<text>{{item.start_time}}-{{item.end_time}}</text>
						</view>
					</view>
					<view class="CouponR" @click="open(item.code,item.qrcode)">
						<view class="CouponRtext">立即使用</view>
					</view>
				</view>
			</block>
			<view class="" style="height: 10rpx;"></view>
			<block v-if="isCoupon">
				<view class="no-more">
					---没有更多了---
				</view>
			</block>
		</block>
		<uni-popup ref="popup" type="center">
			<view class="pop">
				<view style="text-align: center;padding: 40rpx 0 30rpx 0;">
					<view class="flex-center">
						<view class="pop-title">
							<view class="pop-color left">
							</view>
							<view class="">
								核销码
							</view>
							<view class="pop-color right">
							</view>
						</view>
					</view>
					<view>
						{{code}}
					</view>
				</view>
				<view class="pop-code">
					<image class="pop-code-img" :src="qrcode" mode=""></image>
				</view>
				<!--<view class="box-pack-between pop-shop flex-y-center">
					<text @click="merchant"data-index="1">商户位置</text>
					<view class="line"></view>
					<text @click="merchant" data-index="2">前往商户</text>
					<view class="line"></view>
					<text @click="close">关闭窗口</text>
				</view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	export default {
		components: {
			liuyunoTabs
		},
		data() {
			return {
				tabs: ["未使用", "已使用", "已过期"],
				page: 1,
				limit: 10,
				type: 1,
				token: '', //获取用户的token
				power_id: '',
				CouponList: [], //优惠券列表
				isCoupon: false,
				code: "",
				qrcode: '',
			}
		},

		onLoad(e) {
			this.token = e.token, this.power_id = e.power_id; //读取缓存手机号码		
			this.Coupon();
		},
		onReachBottom() {
			this.Coupon();
		},
		methods: { // 使用优惠券
			onTab(e) {
				console.log(e, "e")
				this.activeindexs = e + 1;
				this.type = this.activeindexs;
				this.CouponList = [];
				this.page = 1;
				this.Coupon();
			},
			open(code, qrcode) {
				this.code = code;
				this.qrcode = getApp().globalData.URL + qrcode;
				this.$refs.popup.open();
			},

			CouponUse(e) {
				console.log(e.currentTarget.dataset.id)
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: './CouponDetails?id=' + id
				})
			},
			// 请求优惠券
			Coupon() {
				this.request({
					url: "game/memberPrizeList",
					data: {
						token: this.token,
						power_id: this.power_id,
						page: this.page,
						limit: 10,
						status: Number(this.type) - 1,
					},
					is_agent:'member',
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						// this.CouponList = res.data;
						if (res.code == "200" && res.data.length > 0) {
							this.CouponList = this.CouponList.concat(res.data);
							this.page = this.page + 1;
							this.isCoupon = false;
						} else {
							this.isCoupon = true;
						}
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
		}
	}
</script>

<style lang="scss">
	/* 优惠券列表 */
	page {
		background: #fff;
	}

	.recently {
		position: fixed;
		top: 0;
		width: 100%;
		background: #FFFFFF;
		z-index: 99;

	}

	.flex-between {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.flex-y-center {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
	}

	.CouponList {
		position: relative;
		width: 750rpx;
		height: 170rpx;
		margin-bottom: 20rpx;
	}

	.CouponListimg {
		margin: 30rpx 32rpx;
		width: 686rpx;
		height: 165rpx;
		/* border: 1px solid #f1f1f1; */
		/* font-family: -webkit-body; */
		/* border-radius: 10px; */
	}

	.CouponL {
		position: absolute;
		left: 60rpx;
		top: 60rpx;
		text-align: center;
		width: 150rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.CouponLmoney {
		font-size: 47rpx;
		font-family: PingFangSC-Medium;
		color: #FF5722;
		width: 150rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.CouponLmoneys {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #FF5722;
		width: 150rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 已过期状态 */
	.pastDue {
		position: absolute;
		left: 90rpx;
		top: 70rpx;
		text-align: center;
	}

	.pastDueMoney {
		font-size: 47rpx;
		font-family: PingFangSC-Medium;
		color: #c9c9c9;
	}

	.pastDueMoneys {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #c9c9c9;
	}


	/* 已过期状态 end*/

	.CouponContent {
		position: absolute;
		left: 220rpx;
		top: 65rpx;
		width: 400rpx;
	}

	.CouponContenttitle {
		font-size: 31rpx;
		font-family: PingFangSC-Medium;
		color: #514f50;
		font-weight: 700;
	}

	.CouponContentB {
		font-size: 24rpx;
		font-family: PingFangSC-Regular;
		color: #99a0ad;
		padding: 9rpx 0;

	}

	.CouponContentC {
		font-size: 24rpx;
		font-family: PingFangSC-Regular;
		color: #99a0ad;
		padding-top: 20rpx;
	}


	.CouponR {
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		position: absolute;
		right: 62rpx;
		top: 52rpx;
	}

	.CouponRtext {
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		color: #fff;
	}

	/* 已使用或者已过期 */
	.haveExpired {
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		position: absolute;
		right: 62rpx;
		top: 75rpx;
		letter-spacing: 4rpx
	}

	.haveExpiredtext {
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		color: #fff;
	}

	/* 底部按钮 */
	.bottomButton {
		position: fixed;
		left: 0;
		bottom: 40rpx;
		width: 750rpx;
	}

	.bottomButtonL {
		margin-left: 40rpx;
		background: #F0F2F5;
		width: 320rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		border: 2rpx solid #fff;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		color: #141F33;
		opacity: 1;
	}

	.bottomButtonR {
		margin-right: 40rpx;
		width: 320rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		background: linear-gradient(180deg, #6fa5ff, #438aff);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		color: #FFFFFF;
		opacity: 1;
	}

	.bottomButtonB {
		width: 670rpx;
		height: 98rpx;
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		color: #FFFFFF;
		background: linear-gradient(180deg, #6fa5ff, #438aff);
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.pop {
		width: 600rpx;
		height: 600rpx;
		background: #ffffff;
		border-radius: 16rpx;

		.flex-center {
			font-size: 36rpx;

			.pop-title {
				font-size: 36rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Medium;
				font-weight: 500;
				text-align: center;
				color: #ff2d5a;
				position: relative;
				display: inline-block;

				.pop-color {
					width: 41rpx;
					height: 41rpx;
					opacity: 0.3;
					background: linear-gradient(150deg, #ff2d5a 13%, rgba(251, 45, 89, 0.00) 87%);
					border-radius: 50%;
				}

				.left {
					position: absolute;
					left: -28rpx;
					top: 36rpx;
				}

				.right {
					position: absolute;
					right: -28rpx;
					bottom: 36rpx;
				}
			}
		}

		.pop-code {
			margin: 0 auto;
			text-align: center;

			.pop-code-img {
				width: 337rpx;
				height: 337rpx;
				background: rgba(0, 0, 0, 0.00);
			}

		}

		.pop-shop {
			font-size: 30rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Medium;
			font-weight: 500;
			text-align: center;
			color: #ff2d5a;
			padding: 0 48rpx;
			margin-top: 48rpx;

			.line {
				width: 2rpx;
				height: 24rpx;
				opacity: 0.4;
				background: #ff2d5a;
				border-radius: 1rpx;
			}
		}
	}
</style>
