<template>
	<page-meta :page-style="themeColor"></page-meta>
	<z-paging ref="paging" v-model="list" @query="getMemberCounponList">
		<block slot="top">
			<u-navbar leftIconColor="#fff" title=" " bgColor="transparent" :autoBack="true"> </u-navbar>
			<image class="bf" :src="$util.img('/upload/weapp/user/bf.png')"
				style="width: 100%;height: 360rpx;display: block;"></image>
			<!-- <image :src="$util.img('/upload/weapp/user/beijing.gif')" mode=""></image> -->


		</block>
		<view class="head">
			<view class="" v-for="(item,index) in list" :key="index">
				<!-- 满减 -->
				<view class="biejin df jcsb" v-if="item.type=='reward'">
					<image :src="$util.img('/upload/weapp/user/beijing.png')" mode=""></image>
					<div>
						<div class="time">￥<span>{{item.money | filterCount}}</span></div>
						<div class="charge" v-if="item.at_least==0">无使用门槛</div>
						<div class="charge" v-else>满{{item.at_least}}元使用</div>
					</div>
					<view class="df jcsb">
						<div class="df aic">
							<div class="xukid"></div>
						</div>
						<div>
							<div class="df jcsb draw">
								<div class="drawone">{{item.coupon_name}}</div>
								<div class="drawtwo df aic jcsa" @click="btn(item)">立即领取</div>
							</div>
							<!-- 固定时间 -->
							<div class="timeod" v-if="item.validity_type==0">
								有效期：<span>{{item.end_time | time}}</span>
							</div>
							<div class="timeod" v-else-if="item.validity_type==1">
								有效期：<span>领取之日起{{item.fixed_term}}日内有效</span>
							</div>
							<div class="timeod" v-else-if="item.validity_type==2">
								有效期：<span>长期有效</span>
							</div>
						</div>
					</view>
				</view>
				<!-- 折扣 -->
				<view class="biejin df jcsb" v-if="item.type=='discount'">
					<image :src="$util.img('/upload/weapp/user/beijing.png')" mode=""></image>
					<div>
						<div class="time"><span>{{item.discount | filterCount}}</span>折</div>
						<div class="charge" v-if="item.at_least==0">无使用门槛</div>
						<div class="charge" v-else>满{{item.at_least}}元使用</div>
					</div>
					<view class="df jcsb">
						<div class="df aic">
							<div class="xukid"></div>
						</div>
						<div>
							<div class="df jcsb draw">
								<div class="drawone">{{item.coupon_name}}</div>
								<div class="drawtwo df aic jcsa" @click="btn(item)">立即领取</div>
							</div>
							<!-- 固定时间 -->
							<div class="timeod" v-if="item.validity_type==0">
								有效期：<span>{{item.end_time | time}}</span>
							</div>
							<div class="timeod" v-else-if="item.validity_type==1">
								有效期：<span>领取之日起{{item.fixed_term}}日内有效</span>
							</div>
							<div class="timeod" v-else-if="item.validity_type==2">
								有效期：<span>长期有效</span>
							</div>
						</div>
					</view>
				</view>
			</view>
		</view>
		<ns-empty slot="empty" text="暂无可领取的优惠券" :isIndex="false" style="margin-top: 0;"></ns-empty>
		<div class="btnBox" slot="bottom" v-if="token">
			<div class="btn" @click="toMyCoupon">我的优惠券</div>
		</div>
	</z-paging>
	<loading-cover ref="loadingCover"></loading-cover>

	<ns-login ref="login"></ns-login>

</template>

<script>
	// import zPaging from "../components/z-paging/components/z-paging/z-paging.vue"
	const timesfm = require('../../common/js/timesfm.js')
	export default {
		components: {
			// zPaging
		},
		data() {
			return {
				token: uni.getStorageSync('token'),
				list: [],
				sort: 1,
				types: '',
				couponBtnSwitch: false,
				//分享建立上下级id
				memberId: 0,
				mpShareData: null //小程序分享数据
			};
		},
		onLoad(option) {

			
			if (this.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() {
			let _this = this
			this.$api.sendRequest({
					url: '/coupon/api/coupon/typelists',
					data: {

					},
					success: res => {
						_this.list = res.data
						console.log(_this.list);
					},
				}),

				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: {
			btn(item) {
				let _this = this
				this.$api.sendRequest({
					url: '/coupon/api/coupon/receivedNum',
					data: {
						coupon_type_id: item.coupon_type_id,
					},
					success: res => {
						if (res.data < item.max_fetch) {
							_this.$api.sendRequest({
								url: '/coupon/api/coupon/receive',
								data: {
									coupon_type_id: item.coupon_type_id,
									get_type: '2',
									type: item.type
								},
								success: res => {
									_this.$util.showToast({
										title: '领取成功'
									});
								}
							});
						} else {
							_this.$util.showToast({
								title: '每人最多领取' + item.max_fetch + '张'
							});
						}
					},
				});

			},
			changeSort(sort, types) {
				this.list = [];
				this.sort = sort;
				this.types = types;

				this.$refs.paging.reload()
			},
			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;
									}
								}
							}
							this.$util.showToast({
								title: msg
							});
						},
						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,
						token: uni.getStorageSync('token'),
						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', {});
				}
			},
			toMyCoupon() {
				uni.navigateTo({
					url: '/pages_tool/member/my_coupon'
				})
			},
		},
		filters: {
			filterCount(num) {
				return num.substring(0, num.indexOf('.'));
			},
			time(num) {
				return timesfm(num * 1000)

			}

		}
	};
</script>

<style lang="scss">
	.head {
		padding: 8rpx 32rpx 0 32rpx;
		box-sizing: border-box;

		.biejin {
			width: 686rpx;
			height: 176rpx;
			margin-top: 24rpx;

			image {
				width: 686rpx;
				height: 176rpx;
				position: absolute;
				z-index: -1;
			}

			.time {
				font-size: 32rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #E5831E;
				line-height: 38rpx;
				margin-top: 30rpx;
				margin-left: 58rpx;

				span {
					font-size: 64rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #F08433;
					line-height: 74rpx;
					margin-left: 4rpx;
				}
			}

			.charge {
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(240, 132, 51, 0.78);
				line-height: 32rpx;
				margin-left: 58rpx;
				margin-top: 6rpx;
			}

			.xukid {

				height: 114rpx;
				border: 2rpx dashed rgb(235, 207, 175);
				// margin-left: 54rpx;
			}

			.draw {
				width: 420rpx;
				margin-top: 40rpx;

				.drawone {
					width: calc(420rpx - 150rpx);
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #F08433;
					line-height: 50rpx;
					margin-left: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.drawtwo {
					width: 144rpx;
					height: 48rpx;
					background: linear-gradient(133deg, #FB6677 0%, #F33B50 100%);
					border-radius: 28rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
					margin-right: 38rpx;
					z-index: 10;
				}
			}

			.timeod {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(240, 132, 51, 0.78);
				line-height: 50rpx;
				margin-left: 20rpx;
				margin-top: 10rpx;
			}
		}
	}

	.btnBox {
		box-sizing: border-box;
		width: 100%;

		padding: 12rpx 32rpx 32rpx 32rpx;
		background-color: #fff;

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

			background: $base-color;
			border-radius: 40rpx;

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

	.coupon-head {
		padding: 20rpx 50rpx;
		display: flex;
		background: #fff;

		.sort {
			border: 2rpx solid #c5c5c5;
			padding: 1rpx 20rpx;
			border-radius: $border-radius;
			cursor: pointer;
			margin-right: 15rpx;
		}
	}

	.coupon-listone {
		padding: 0 30rpx;

		.item {
			display: flex;
			background-color: #fff2f0; //
			background-size: 100% 100%;
			border-radius: 20rpx;
			align-items: stretch;
			margin-top: $padding;
			overflow: hidden;

			.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%);
				}

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

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

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

				.use_condition {
					color: #fff;
					margin-top: $padding;

					&.margin_top_none {
						margin-top: 0;
					}

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

				&::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;
					}
				}
			}
		}
	}

	.empty {
		margin-top: 200rpx;
	}

	.cf-container {
		background: #fff;
		overflow: hidden;
	}

	.tab {
		display: flex;
		justify-content: space-between;
		height: 86rpx;

		>view {
			text-align: center;
			width: 33%;
			height: 86rpx;

			text {
				display: inline-block;
				line-height: 86rpx;
				height: 80rpx;
				font-size: 30rpx;
			}
		}
	}

	.active {
		border-bottom: 4rpx solid;
	}
</style>