<template>
	<view class="">
		<no-none v-if='CouponList.length<=0'></no-none>
		<block v-else>
			<view class="coupon-content" v-for="(item,index) of CouponList" :key="index" >
				<view class="flex coupon">
					<view class="coupon-left flex-y-center">
						<view class="w100">
							<view class="title text-1">
								{{item.coupon_name}}
							</view>
							<view class="date text-1">满￥{{Number(item.full_price)}} 元减￥
								<text style="color: red;font-size: 32rpx;">{{ Number(item.cut_price) }}</text>元
							</view>
							<view class="code 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">
						<image class="used" src="./static/images/yes_used.png" mode=""></image>
					</view>
				</view>
				<view class="coupon-foot">
					<view class="mrt10" v-if="item.nickname">
						领取用户：{{item.nickname}}
					</view>
					<view class="mrt10">
						领取时间：{{item.draw_time}}
					</view>
					<view class="mrt10">
						使用时间：{{item.use_time}}
					</view>
				</view>
			</view>
			<loading :is_load="is_load" :is_load_more='is_load_more'></loading>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CouponList: [],
				page: 1,
				is_load: false,
				is_load_more: false,
				is_hexiao: false
			}
		},
		onLoad() {
			this.Coupon();
		},

		onReachBottom() {
			if (!this.is_load) {
				this.page = this.page + 1;
				this.Coupon();
			}
		},

		methods: {
			Coupon() {
				// let url, is_agent;
				// !this.is_hexiao ? (url = "coupon/verification_log") : (
				// 	url = "home/log", is_agent = "staff");
				this.request({
					url: "coupon/verification_log",
					data: {
						token: uni.getStorageSync('token'),
						page: this.page,
						limit: 15,
					},
					// is_agent: is_agent,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						if (res.data.list.length == 0)
							this.is_load = true, this.is_load_more = true,
							setTimeout(() => {
								this.is_load_more = false
							}, 1e3);
						this.CouponList = this.CouponList.concat(res.data.list)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #efeff4;
		padding-top: 30rpx;
	}

	.mrt10 {
		margin-bottom: 4rpx;
	}

	.coupon-content {
		margin-top: 40rpx;
		border-radius: 8rpx;
		width: 670rpx;
		margin: 0 auto;
		overflow: hidden;
		margin-bottom: 40rpx;

		.coupon-foot {
			background: #FFFFFF;
			color: #999;
			font-size: 22rpx;
			padding: 20rpx;

		}

		.coupon {
			height: 150rpx;
			background: rgb(180, 180, 180);
			color: #fff;

			.coupon-left {
				width: 460rpx;
				font-size: 24rpx;
				font-weight: 400;
				padding-left: 22rpx;

				.title {
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Medium;
					font-weight: 500;
				}

				.date {
					margin-bottom: 8rpx;
				}
			}

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

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

				.top {
					top: -10rpx;
				}

				.bottom {
					bottom: -10rpx;
				}

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

			}

			.coupon-right {
				.used {
					width: 112rpx;
					height: 83rpx;
				}
			}
		}
	}
</style>
