<template>
	<view class="container">
		<view class="bgc">
			<i class="iconfont icon-lujing success-icon" :style="{color:setColor}"></i>
			<view class="title">订单处理成功</view>
			<view class="desc">订单处理成功，预览获取更多优惠</view>
			<view class="btn-block">
				<view @click="lookOrder" class="btn" :style="{'background-color':setColor}">查看订单</view>
			</view>
		</view>
		<view class="swiper-content" v-if="banner.length>0">
			<swiper class="swiper" circular autoplay indicator-active-color="#fff"
				indicator-color="rgba(255,255,255,0.5)">
				<block v-for="(item,index) of banner" :key='index'>
					<swiper-item>
						<image @click="previewImage(item)" class="img" mode="aspectFit" :src="URL+item.thumb"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="bgc" v-if="coupon_list.length>0">
			<view class="more-coupon-title">
				<image class="more-coupon" src="../../static/more-coupon.png"></image>
			</view>
			<view class="coupon_bg">
				<view v-for=" (item,index) in coupon_list" :key="index" class="Coupon">
					<view class="CouponListBg">
						<image src="../../static/coupon_bg_1.png" class="CouponListimg"></image>
					</view>
					<view class="CouponList flex" :data-id="item.id">
						<view class="CouponL flex-center">
							<view>
								<view class="CouponLmoney">
									<view>
										{{Number(item.reduce)}} <text class="ft24">元</text>
									</view>
								</view>
								<view class="CouponLmoneys ft24">
									满{{ Number(item.full)}}可用
								</view>
							</view>
						</view>
						<view class="CouponContent flex-col box-pack-between">
							<view class="ft28 box-pack-between">
								<view class="text-2">
									{{item.name}}
								</view>
								<block v-if="item.state==1">
									<view class="getCoupon flex-center" @click="receive" :data-name="item.name" :data-index="index"
										:data-id="item.id">
										领取
									</view>
								</block>
								<block v-if="item.state == 2">
									<view class="getCoupon flex-center" style="color:#999;border: 1rpx solid #ccc;">已领取
									</view>
								</block>
							</view>
							<view class="CouponContentLine">
							</view>
							<view class="CouponContentC ft24">
								<text>有效期：</text>
								<text>{{item.start_time}}-{{item.end_time}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<!-- <subscribe-msg /> -->
		<!-- #endif -->
		<uni-popup ref="popup" type="center">
			<view class="get-phone-pop">
				<view class="content-block">
					<view class="content flex flex-y-center flex-x-center">提示</view>
				</view>
				<view class="flex-center content-tel">
					<text style="min-width: 130rpx;">积分领取成功</text>
				</view>
				<view @click="openUrl" class="btm-block flex flex-nowarp flex-x-between">
					<view form-type="submit" class="btn sub-btn">确定</view>
				</view>
			</view>
		</uni-popup>

		<model :obj="modelObj"></model>
		<Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>

	</view>
</template>
<script>
	// import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import Vphone from '@/components/v-phone/v-phone.vue';
	// #ifdef MP-ALIPAY
	// const {
	// 	requestSubscribeMessage
	// } = requirePlugin('subscribeMsg');
	// #endif
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			// uniPopup,
			Vphone
		},
		computed: {
			...mapState(['store_id', 'userInfo', 'swiperList']),
		},
		data() {
			return {
				URL: getApp().globalData.URL,
				banner: [],
				coupon_list: [],
				setColor: "",
				systemInfo: {},
				order_id: '',
				getPhonePop: false,
				modelObj: null
			}
		},
		onLoad(e) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$store.state.color,
			})
			this.order_id = e.order_id || '';
			this.setColor = this.$store.state.color;
			this.systemInfo = uni.getStorageSync('systemInfo');
			this.banner_list();
			this.http();
			if (this.systemInfo.set.is_jf == 3 && e.order_id && this.systemInfo.set.integral) {
				uni.showModal({
					title: '提示',
					content: '积分领提醒',
					showCancel: true,
					cancelText: '取消',
					confirmText: '领取',
					success: res => {
						if (res.confirm) {
							this.jiFenS()
						}
					}
				});
			}
		},

		methods: {
			jiFenS() {
				this.$http.request('xcx/ManualAddIntegral', {
					order_id: this.order_id,
				}).then(res => {
					let obj = this.systemInfo.set,
						url, app_id, app_url, is_ambient;
					// #ifdef MP-WEIXIN
					url = obj.wx_url;
					app_id = obj.wx_app_id;
					app_url = obj.wx_app_url;
					is_ambient = obj.wx;
					// #endif
					// #ifdef MP-ALIPAY
					url = obj.zfb_url;
					app_id = obj.zfb_app_id;
					app_url = obj.zfb_app_url;
					is_ambient = obj.zfb;
					// #endif
					if (is_ambient == 1) {
						uni.showToast({
							title: '积分领取成功',
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							if (url == '/pages/index/index' || url == '/pages/home/home' || url ==
								'/pages/order/order' ||
								url == '/pages/my/my') {
								uni.switchTab({
									url: url,
								})
							} else {
								uni.redirectTo({
									url: url,
								})
							}
						}, 3000)
					}
					if (is_ambient == 2) {
						this.$refs.popup.open();
					}
				})
			},

			openUrl() {
				let obj = this.systemInfo.set,
					url, app_id, app_url, is_ambient;
				// #ifdef MP-WEIXIN
				url = obj.wx_url;
				app_id = obj.wx_app_id;
				app_url = obj.wx_app_url;
				is_ambient = obj.wx;
				// #endif
				// #ifdef MP-ALIPAY
				url = obj.zfb_url;
				app_id = obj.zfb_app_id;
				app_url = obj.zfb_app_url;
				is_ambient = obj.zfb;
				// #endif
				this.$refs.popup.close();
				if (is_ambient == 1) {
					if (url == '/pages/index/index' || url == '/pages/home/home' || url == '/pages/order/order' ||
						url == '/pages/my/my') {
						uni.switchTab({
							url: url,
						})
					} else {
						uni.redirectTo({
							url: url,
						})
					}
				}
				// console.log(is_ambient, obj.appId, app_url, "app_url")
				if (is_ambient == 2) {
					uni.navigateToMiniProgram({
						appId: app_id,
						path: app_url,
						success: (res) => {
							// this.$refs.popup.close();
						}
					})
				}
			}, 
			lookOrder(e) { 
				this.$store.commit("SET_TABACTIVE", 1)
				uni.navigateTo({
					 
					url: '/pages/myOrderList/myOrderList'
				})
			},
			// 开启会员弹窗
			onGetphone(e) {
				this.getPhonePop = true;
			},
			// 子组件传参
			setClose(e) {
				this.getPhonePop = e;
			}, 
			// 跳转小程序、内页面
			previewImage(info) {
				// console.log(info)
				if (info.type == 1 && info.appid) {
					uni.navigateToMiniProgram({
						appId: info.appid,
						success(res) {
							// 打开成功
						}
					})
				}
				else if (info.type == 2) {
					if (info.appid) {
						if ("/pages/index/index" == info.appid || "/pages/my/my" == info.appid ) {
							uni.switchTab({
								url: info.appid,
							})
						} else {
							uni.navigateTo({
								url: info.appid,
							})
						}
					} else {
						let url = this.URL + info.thumb;
						uni.previewImage({
							urls: [url],
						});
					}
				}else if (info.type == 3) {
					if (!this.userInfo.mobile) {
						// #ifdef MP-WEIXIN
						this.modelObj = {
							content: "完善资料才能享有领取权利，是否完善？",
						};
						this.$store.commit('showAttrPicker', true)
						// #endif
						// #ifdef MP-ALIPAY
						this.getPhonePop = true;
						// #endif
						return
					} else {
						uni.showToast({
							title: '您已经完善过会员信息了，无需重复操作！',
							icon: 'none'
						})
					}
				}else if(info.type == 4){
					uni.navigateTo({
							url:`/shop/richText/index?id=${info.is_article}`
						})
				}	
			},

			banner_list() {
				this.$http.request('xcx/banner_list', {
					store_id: uni.getStorageSync('store_id'),
					type_id: 1,
				}).then(res => {
					console.log(res, "LqCoupons_lists")
					this.banner = res.data;
				})
			},

			http() {
				this.$http.request('xcx/pay_coupons', {
					user_id: uni.getStorageSync('user_id'),
					store_id: uni.getStorageSync('store_id'),
				}).then(res => {
					console.log(res, "LqCoupons_lists")
					for (let s of res.data) {
						s.checked = false;
						s.state = 1;
					};
					this.coupon_list = res.data;
				})
			},

			receive: function(t) {
				let subscribe = uni.getStorageSync('balance_subscribe');
				var that = this,name = t.target.dataset.name,
					id = t.target.dataset.id,
					index = t.target.dataset.index;
				// 调用方法，唤起订阅组件
				// #ifdef MP-ALIPAY
			 my.requestSubscribeMessage({
					thirdTypeAppId: that.systemInfo.alipay_appid, // 可选，isv接入场景下必填
					entityIds: [subscribe.alipay_coupons], // 模板id列表，最多3个
					// 接收结果的回调方法
				   complete: (res) => {
						console.log('订阅回调', r);
						that.$http.request('xcx/LqCoupons', {
							user_id: uni.getStorageSync('user_id'),
							store_id: uni.getStorageSync('store_id'),
							coupon_id: id,
						}, "", "", true).then(res => {
							that.coupon_list[index].state = 2;
							uni.showToast({
								title: '领取成功',
								icon: 'none'
							})
						})
					},
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: [subscribe.card_tid],
					success: (r) => {
						that.CardMsgSubscribe(name);
					},
					complete: (r) => {
						that.$http.request('xcx/LqCoupons', {
							user_id: uni.getStorageSync('user_id'),
							store_id: uni.getStorageSync('store_id'),
							coupon_id: id,
						}, "", "", true).then(res => {
							that.coupon_list[index].state = 2;
							uni.showToast({
								title: '领取成功',
								icon: 'none'
							})
						})
				   }
				})
				// #endif
			},
			CardMsgSubscribe(name){
			let that=this;
			  that.$http.request('xcx/LqCoupons', {
				user_id: uni.getStorageSync('user_id'),
				store_id: uni.getStorageSync('store_id'),
				name: name,
			}, "", "", true).then(res => {	
			 })
			},
		}
	}
</script>

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

	.bgc {
		background: #FFFFFF;
	}

	.getCoupon {
		width: 100rpx;
		height: 45rpx;
		border-radius: 50px;
		border: 1rpx solid #FE821E;
		text-align: center;
		color: #FE821E;
		min-width: 115rpx;
	}

	.swiper-content {
		// padding: 0 30rpx;
		margin: 20rpx 0;
	}

	.swiper {
		width: 100%;
		height: 400rpx;
		margin: 0 auto;
		// border-radius: 10rpx;
		overflow: hidden;

		.img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.container {
		overflow: hidden;
	}

	.more-coupon-title {
		text-align: center;
		padding: 40rpx 0;
	}

	.more-coupon {
		width: 280rpx;
		height: 50rpx;
	}

	// .coupon_bg {
	// 	background: #F1F1F1;
	// }

	.success-icon {
		display: block;
		font-size: 100rpx;
		color: $theme-color;
		text-align: center;
		padding-top: 20rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		color: #555;
	}

	.desc {
		font-size: 32rpx;
		line-height: 50rpx;
		text-align: center;
		color: #666;
	}

	.btn-block {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		height: 150rpx;
	}

	.btn-block .btn {
		width: 260rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		background-color: $theme-color;
		color: #fff;
	}

	.ft24 {
		font-size: 24rpx;
	}

	.ft28 {
		font-size: 28rpx;
	}

	// page {
	// 	background: #F4F5F7;
	.container {
		.Coupon {
			position: relative;
			margin-top: 30rpx;
			color: #FFFFFF;
		}

		.CouponListBg {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;

			image {
				width: 690rpx;
				height: 180rpx;
				opacity: 1;
				margin: 0 auto;
			}
		}

		.CouponList {
			position: relative;
			width: 690rpx;
			height: 180rpx;
			margin: 0 auto;
			border-radius: 8rpx;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(198, 198, 198, 0.5);
			border: 1rpx solid #f1f1f1;

			.CouponL {
				width: 202rpx;
				height: 100%;
				min-width: 202rpx;
				margin-right: 20rpx;

				.CouponLmoney {
					text-align: center;
					font-size: 58rpx;
					font-family: DIN, DIN-Medium;
					font-weight: 500;
				}
			}

			.CouponContent {
				color: #000000;
				padding: 33rpx 15rpx 20rpx 0;

				.CouponContentLine {
					width: 430rpx;
					height: 1rpx;
					opacity: 0.1;
					border: 1rpx dashed #000000;
				}

				.CouponContentC {
					color: #999999;
				}
			}
		}
	}

	.get-phone-pop {
		/* 成为会员 */
		width: 550rpx;
		background-color: #fff;
		border-radius: 14rpx;
		overflow: hidden;
	}

	.code-btn {
		flex: none;
		width: 170rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #3387FF;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.get-phone-pop .content {
		// height: 180rpx;
		text-align: center;
		font-size: 35rpx;
		color: #000;
		// line-height: 60rpx;
		padding: 30rpx 0;
		padding-bottom: 0;
	}

	.content-tel {
		text-align: center;
		padding: 30rpx 0;
	}

	.get-phone-pop .btm-block {
		width: 100%;
		height: 100rpx;
		border-top: 1rpx solid #eef0ef;
		font-size: 28rpx;
	}

	.get-phone-pop .btm-block .btn {
		height: 100rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 100rpx;
		color: #010101;
		font-weight: bold;
		padding: 0;
		margin: 0;
		border: none;
		border-radius: 0;
		background-color: #fff;
		// font-size: 35rpx;
		margin: 0 auto;
	}

	// }
</style>
