<template>
	<view>
		<no-none v-if='CouponList.length<=0'></no-none>
		<block v-else>
			<view class="CouponList flex" @click="CouponUse"  :data-num="item.num" :data-title="item.title" v-for=" (item,index) in CouponList" :key="index" :data-id="item.id">
				<view class="CouponL flex-grow-1">
					<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 flex-grow-0">
					<view class="coupon-center">
						<view class="rund top">
						</view>
						<view class="line">
						</view>
						<view class="rund bottom">
						</view>
					</view>
					<view class="CouponLmoney"> <text class="unit">￥</text>{{ Number(item.cut_price) }}</view>
					<view class="CouponLmoneys">满{{ Number(item.full_price)}}可用</view>
					<view class="CouponRtext">立即查看</view>
				</view>
			</view>
			<loading :is_load="is_load" :is_load_more='is_load_more'></loading>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '', //获取用户的token
				page: 1,
				limit: 10,
				CouponList: [], //优惠券列表
				page: 1,
				is_load: false,
				is_load_more: false,
			}
		},

		onLoad() {
			this.token = uni.getStorageSync('token'); //读取缓存手机号码
		},

		onShow() {
			this.page = 1;
			this.CouponList = [];
			this.Coupon();
		},

		onPullDownRefresh() {
			console.log("下拉")
			this.page = 1;
			this.CouponList = [];
			this.Coupon();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onReachBottom() {
			if (!this.is_load) {
				this.page = this.page + 1;
				this.Coupon();
			}
		},
		methods: {
			
			CouponUse(e) {
				console.log(e.currentTarget.dataset.id)
				let {id,title,num} = e.currentTarget.dataset;
				
				// let title = e.currentTarget.dataset.title;
				
				// let title = e.currentTarget.dataset.num;
				
			     uni.$emit("handleFun",{title:title,coupon_id:id,num:num});
			     uni.navigateBack();
			},
			
			loginOut() {
				uni.removeStorageSync("token")
				uni.removeStorage({
					key: 'login',
					success: (res) => {
						uni.reLaunch({
							url: "../login/login"
						})
					}
				})
			},
			Coupon() {
				this.request({
					url: "coupon/lists",
					data: {
						token: uni.getStorageSync('token'),
						page: this.page,
						limit: 15,
						status:1
					},
				}).then(res => {
					console.log(res, "res")
					if (res.data.list.length == 0) {
						this.is_load = true,
							this.is_load_more = true,
							setTimeout(() => {
								this.is_load_more = false
							}, 1e3);
						return
					}
					this.is_load = false;
					this.CouponList = this.CouponList.concat(res.data.list);
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.no-more {
		font-size: 28rpx;
		color: #999999;
		text-align: center;
		padding: 20rpx 0;
	}

	.CouponList {
		margin: 0 40rpx;
		margin-top: 20rpx;
		border-radius: 8rpx;
		height: 180rpx;
		overflow: hidden;
		.CouponL {
			text-align: left;
			padding: 10rpx 20rpx;
			border: 1rpx solid #F1F1F1;

			.CouponContenttitle {
				font-size: 34rpx;
				padding-top: 15rpx;
			}

			.CouponContentC {
				color: #999;
				font-size: 24rpx;
				padding-top: 15rpx;
			}
		}

		.CouponR {
			background: linear-gradient(0deg, rgba(2, 126, 251, 1) 0%, rgba(0, 172, 238, 1) 100%);
			color: #FFFFFF;
			width: 200rpx;
			text-align: center;
			position: relative;

			.coupon-center {
				position: absolute;
				left: -16rpx;
				top: 0;
				width: 30rpx;

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

				.top {
					top: -15rpx;
				}

				.bottom {
					bottom: -15rpx;
				}

				.line {
					width: 1rpx;
					height: 180rpx;
				}
			}

			.CouponLmoney {
				font-size: 47rpx;
				padding-top: 15rpx;

				.unit {
					font-size: 28rpx;
				}
			}

			.CouponRtext {
				font-size: 22rpx;
				border: 1rpx solid #FFFFFF;
				text-align: center;
				border-radius: 50px;
				display: inline-block;
				padding: 4rpx 18rpx;
			}

			.CouponLmoneys {
				font-size: 20rpx;
				margin-bottom: 10rpx;
			}

		}
	}
</style>
