<template>
	<div>
		<z-paging ref="paging" v-model="list" @query="getMemberCounponList">
			<image class="bf" :src="$util.img('/upload/weapp/user/bf.png')" slot="top" style="width: 100%;height: 360rpx;"></image>
			<view class="view">

				<div class="content">
					<div class="coupon" v-for="(item,index) in list" :key="index" :style="{background:`url(${$util.img('/upload/weapp/user/coupon.png')} ni-repeat)`}">
						<div class="left">
							<view>
								<view style="text-align: center;margin-bottom: 6rpx;" class="use_price price-font" v-if="item.type == 'reward'"
									:class="{ disabled: item.useState == 2 }">
									<text>￥</text>
									{{ parseInt(item.money) }}
								</view>
								<view style="text-align: center;margin-bottom: 6rpx;" class="use_price price-font" v-else-if="item.type == 'discount'"
									:class="{ disabled: item.useState == 2 }">
									{{ parseFloat(item.discount) }}
									<text>折</text>
								</view>
								<view class="use_condition font-size-tag" v-if="item.at_least > 0"
									:class="{ disabled: item.useState == 2 }">满{{ item.at_least }}元可用</view>
								<view class="use_condition font-size-tag" v-else
									:class="{ disabled: item.useState == 2 }">无门槛优惠券</view>
							</view>

						</div>
						<div class="lineImg">
							<image  :src="$util.img('/upload/weapp/user/line')" mode=""></image>
						</div>
						<div class="right">

							<view class="btn" v-if="item.useState == 0" @click.stop="receiveCoupon(item, index)">领取</view>
							<view class="btn" v-if="item.useState == 1" @click.stop="toGoodsList(item, index)">去使用</view>
							<view class="btn" v-if="item.useState == 2" :class="{ disabled: item.useState == 2 }">已抢光</view>


							<view class="type max_price" v-if="item.goods_type == 1"
								:class="{ disabled: item.useState == 2 }">全场商品</view>
							<view class="type max_price" v-else :class="{ disabled: item.useState == 2 }">指定商品</view>
							<view class="type max_price" v-if="item.discount_limit != '0.00'">
								(最大优惠{{ item.discount_limit }}元)</view>



							<view class="validity" v-if="item.validity_type == 0">
								有效期：{{ $util.timeStampTurnTime(item.end_time) }}</view>
							<view class="validity" v-else-if="item.validity_type == 1">
								有效期：领取之日起{{ item.fixed_term }}日内有效</view>
							<view class="validity" v-else>有效期：长期有效</view>
						</div>
					</div>
				</div>

			</view>
			<div class="btnBox" slot="bottom">
				<div class="btn" @click="toMyCoupon">我的优惠券</div>
			</div>
		</z-paging>
	</div>
</template>


<script>
	// import zPaging from "../components/z-paging/components/z-paging/z-paging.vue"
	export default {
		components: {
			// zPaging
		},
		data() {
			return {
				list: [],
				sort: 1,
				types: '',
				couponBtnSwitch: false,
				//分享建立上下级id
				memberId: 0,
				mpShareData: null //小程序分享数据
			};
		},
		onLoad(option) {
			//获取memberId
			if (uni.getStorageSync('token')) {
				this.$util.getMemberId().then(resolve => {
					this.memberId = resolve;
				});
			}
			//小程序分享接收source_member
			if (option.source_member) {
				uni.setStorageSync('source_member', option.source_member);
			}
			// 小程序扫码进入，接收source_member
			if (option.scene) {
				var sceneParams = decodeURIComponent(option.scene);
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
						if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
						if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
					});
				}
			}
		},
		onShow() {
			setTimeout(() => {
				if (this.addonIsExist && !this.addonIsExist.coupon) {
					this.$util.showToast({
						title: '商家未开启优惠券',
						mask: true,
						duration: 2000
					});
					setTimeout(() => {
						this.$util.redirectTo('/pages/index/index');
					}, 2000);
					return;
				}
			}, 1000);

			//记录分享关系
			if (uni.getStorageSync('token') && uni.getStorageSync('source_member')) {
				this.$util.onSourceMember(uni.getStorageSync('source_member'));
			}

			//小程序分享
			// #ifdef MP-WEIXIN
			this.$util.getMpShare().then(res => {
				this.mpShareData = res;
			});
			// #endif



		},
		//分享给好友
		onShareAppMessage() {
			return this.mpShareData.appMessage;
		},
		//分享到朋友圈
		onShareTimeline() {
			return this.mpShareData.timeLine;
		},
		methods: {

			toMyCoupon() {
				uni.navigateTo({
					url: '/pages_tool/member/my_coupon'
				})
			},
			changeSort(sort, types) {
				this.list = [];
				this.sort = sort;
				this.types = types;
				this.$refs.mescroll.refresh(false);
			},
			liClick(item, index) {
				if (item.useState == 0) this.receiveCoupon(item, index);
				else this.toGoodsList(item, index);
			},

			//领取优惠券
			receiveCoupon(item, index) {
				if (this.couponBtnSwitch) return;
				this.couponBtnSwitch = true;
				let token = uni.getStorageSync('token');
				if (token != '') {
					this.$api.sendRequest({
						url: '/coupon/api/coupon/receive',
						data: {
							coupon_type_id: item.coupon_type_id,
							get_type: 2 //获取方式:1订单2.直接领取3.活动领取
						},
						success: res => {
							this.couponBtnSwitch = false;
							let msg = '';
							msg = '领取成功，快去使用吧';
							let list = this.list;
							if (res.data.is_exist == 1 && res.code < 0) {
								msg = '您已领取过该优惠券，快去使用吧';
							} else {
								msg = res.message;
							}
							if (res.data.is_exist == 1) {
								for (let i = 0; i < list.length; i++) {
									if (list[i].coupon_type_id == item.coupon_type_id) {
										list[i].useState = 1;
									}
								}
							} else {
								for (let i = 0; i < list.length; i++) {
									if (list[i].coupon_type_id == item.coupon_type_id) {
										list[i].useState = 2;
									}
								}
							}



							uni.showToast({
								title: '领取成功',
								image: this.$util.img('/upload/weapp/user/success.png')
							});
						},
						fail: res => {
							this.couponBtnSwitch = false;
						}
					});
				} else {
					this.couponBtnSwitch = false;
					this.$refs.login.open('/pages_tool/login/login');
				}
			},
			//获取优惠券列表
			getMemberCounponList(page, page_size) {
				this.$api.sendRequest({
					url: '/coupon/api/coupon/typepagelists',
					data: {
						page,
						page_size,
						sort: this.sort,
						type: this.types
					},
					success: res => {

						if (res.data.list.length) {
							res.data.list.forEach(v => {
								if (v.count == v.lead_count) v.useState = 2;
								else if(v.max_fetch != 0 && v.member_coupon_num && v.member_coupon_num >= v.max_fetch) v.useState = 1;
								else v.useState = 0;
							});
						}



						this.$refs.paging.complete(res.data.list)
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail() {

						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			imageError(index) {
				this.list[index].logo = this.$util.getDefaultImage().goods;
				this.$forceUpdate();
			},
			couponImageError(index) {
				this.list[index].image = this.$util.img('public/uniapp/goods/coupon.png');
				this.$forceUpdate();
			},
			toGoodsList(item) {
				if (item.goods_type != 1) {
					this.$util.redirectTo('/page_goods/goodsList/goodsList', {
						coupon: item.coupon_type_id
					});
				} else {
					this.$util.redirectTo('/page_goods/goodsList/goodsList', {});
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.use_price {
		font-size: 60rpx;
		line-height: 1;
		color: #F08433;

		text {
			font-size: $font-size-toolbar;
		}

		&.disabled {
			color: $color-tip;
		}
	}

	.use_condition {
		color: #F08433;


		&.margin_top_none {
			margin-top: 0;
		}

		&.disabled {
			color: $color-tip;
		}
	}

	.item-base {
		position: relative;
		width: 197rpx;
		min-width: 197rpx;
		text-align: center;
		background: linear-gradient(to left, var(--bg-color), var(--bg-color-shallow));
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 38rpx 10rpx 38rpx 18rpx;

		&.disabled {
			background: #dedede;
		}

		.coupon-line {
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
		}

		>view {
			height: auto;
			position: relative;
			top: 50%;
			transform: translate(0, -50%);
		}



		&::after {
			position: absolute;
			content: '';
			background-color: #f8f8f8;
			left: 0;
			top: 50%;
			transform: translate(0, -50%);
			height: 30rpx;
			width: 15rpx;
			border-radius: 0 30rpx 30rpx 0;
		}
	}

	.item-btn {
		width: 160rpx;
		min-width: 160rpx;
		align-self: center;
		position: relative;

		view {
			width: 100rpx;
			height: 50rpx;
			border-radius: $border-radius;
			line-height: 50rpx;
			margin: auto;
			text-align: center;
			background-image: linear-gradient(to right, var(--bg-color), var(--bg-color-shallow));
			color: var(--btn-text-color);
			font-size: $font-size-tag;

			&.disabled {
				background: #dedede !important;
				color: #909399 !important;
			}
		}

		&::after {
			position: absolute;
			content: '';
			background-color: #f8f8f8;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
			height: 30rpx;
			width: 15rpx;
			border-radius: 30rpx 0 0 30rpx;
		}
	}

	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		overflow: hidden;
		background-repeat-x: no-repeat;
		background-repeat-y: repeat;

		.use_time {
			padding: 20rpx 0;
			border-top: 2rpx dashed #cccccc;
			font-size: $font-size-activity-tag;
			color: #909399;
		}

		.use_title {
			font-size: $font-size-base;
			font-weight: 500;
			padding: 20rpx 0;

			// height:80rpx;
			.title {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.max_price {
				font-weight: 400;
				font-size: $font-size-tag;
			}
		}
	}

	.view {

		.bf {
			width: 100%;
			height: 414rpx;
			display: block;
		}

		.content {
			// position: relative;
			top: -62rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 32rpx;

			.coupon {
				margin-bottom: 32rpx;
				height: 176rpx;

				background-size: cover !important;
				display: flex;

				.left {
					width: 226rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-direction: column;
					padding-top: 36rpx;
					// padding-bottom: 48rpx;

					.quantity {
						box-sizing: border-box;

						.unit {
							font-size: 32rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #E5831E;
						}

						.number {
							font-size: 64rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #F08433;
							line-height: 62rpx;
						}
					}

					.desc {
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(240, 132, 51, 0.78);


					}
				}

				.lineImg {
					position: relative;
					top: 30rpx;
					left: 1rpx;
					width: 20rpx;

					image {
						width: 2rpx;
						height: 114rpx;
					}
				}

				.right {
					padding: 35rpx 0 35rpx 25rpx;
					position: relative;
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.btn {
						position: absolute;
						right: 38rpx;

						width: 144rpx;
						height: 48rpx;
						background: linear-gradient(133deg, #FB6677 0%, #F33B50 100%);
						border-radius: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;

						transform: translate(0, 10%);
					}

					.type {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						word-break: break-all;
						max-width: 230rpx;
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #F08433;
					}

					.validity {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(240, 132, 51, 0.78);
					}
				}
			}
		}
	}

	.btnBox {
		box-sizing: border-box;
		width: 100%;
		// position: fixed;
		// bottom: 0;
		padding: 0rpx 32rpx 56rpx 32rpx;
		background-color: #fff;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;

			background: #F33B50;
			border-radius: 40rpx;

			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}
	}
</style>
