<template>

	<view class="page-home">
		<view class="page-home-bg">
			<image class="page-home-bg-img" src="./static/images/coupun-bg.png"></image>
		</view>
		<!-- 优惠券详情 -->
		<view style="height: 100rpx;"></view>
		<view class="get_bg">
			<image src="./static/images/getbg.png" mode=""></image>
			<view class="get_bg_content">
				<view class="flex-center get_bg_content_title">
					<view class="">
						<view class="ft48 get_bg_cut_price"> <text style="font-size: 30rpx;">￥</text>
							{{CouponLists.cut_price}}<text class="ft26">元</text>
						</view>
						<view class="get_bg_title text-2" style="padding: 0 30rpx;">{{CouponLists.title}}</view>
						<view class="get_bg_full_price">满{{CouponLists.full_price}}可用</view>
					</view>
				</view>

				<view style="margin-top: 40rpx;">
					<view class="DEtilename flex-y-center">
						<view class="DEtilenameL">优惠券标题:</view>
						<view class="DEtilenameR ">{{CouponLists.title}}</view>
					</view>

					<view class="DEtilename flex-y-center">
						<view class="DEtilenameL">剩余数量:</view>
						<view class="DEtilenameR">{{CouponLists.num}}</view>
					</view>

					<view class="DEtilename flex-y-center">
						<view class="DEtilenameL">已领取数量:</view>
						<view class="DEtilenameR">{{CouponLists.use_times}}</view>
					</view>

					<view class="DEtilename flex-y-center">
						<view class="DEtilenameL">可用时间:</view>
						<view class="DEtilenameR">{{CouponLists.start_time}}</view>
					</view>

					<view class="DEtilename flex-y-center">
						<view class="DEtilenameL">截止时间:</view>
						<view class="DEtilenameR">{{CouponLists.end_time}}</view>
					</view>
				</view>

				<!-- 		<view class="bottomButton flex-between">
					<view class="buttonL" @click="deletes">删除</view>
					<view class="buttons" style="background: #3387ff;" @click="amend">修改</view>
				</view> -->

				<!-- 领取优惠券   -->
				<view class="getcoupon" v-if="CouponLists.is_show == 1 && CouponLists.is_edit !=1" @click="getcoupon">
					领取优惠券
				</view>

				<!-- 领取优惠券  -->
				<view class="getcoupon" style="background: #CCCCCC;"
					v-if="CouponLists.is_show == 3&& CouponLists.is_edit !=1">
					优惠券已过期
				</view>

				<view class="Isgetcoupon" style="background: #CCCCCC;"
					v-if="CouponLists.is_show == 2&& CouponLists.is_edit !=1">
					已领取
				</view>

				<view class="bottomButton flex-between" v-if="CouponLists.is_edit ==1">
					<view class="buttonL" @click="deletes">删除</view>
					<view class="buttons" style="background: #ffa000;" @click="amend">修改</view>
				</view>
			</view>

			<view class="getcoupon-rule">
				<view class="getcoupon-rule-title flex-center">
					<view class="line">
					</view>
					<text style="margin: 0 20rpx;"></text> 领取规则
					<view class="line">
					</view>
				</view>

				<view class="getcoupon-rule-content">
					<view class="">
						1.优惠劵只可在线下核销使用
					</view>
					<view class="">
						2.优惠劵在指定的日期使用，过期无法使用
					</view>
					<view class="">
						3.平台对发放的优惠劵享有最终解释权
					</view>
					<!-- #ifdef H5 -->
					<view class="" @click="Copy">
						4.复制此链接可发送给用户领取优惠劵 <text style="color:rgb(255, 160, 0);margin-left: 10px;">复制</text> 
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	export default {
		data() {
			return {
				id: '', //跳转接受的id
				token: '',
				CouponLists: [],		
				URL: getApp().globalData.URL,
			}
		},

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

		onShow() {
			this.is_web();
		},

		onShareAppMessage(option) {

		},

		methods: {
			//请求详情
			Coupons() {
				let that = this;
				let token = that.token;
				let id = that.id;
				this.request({
					url: "coupon/detail",
					data: {
						token: token ? token : "",
						coupon_id: id
					},
				}).then(res => {
					if (res.code == "200") {
						this.CouponLists = res.data.detail
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
			// 修改
			amend() {
				let id = this.id;
				uni.navigateTo({
					url: './addCoupons?id=' + id
				})
			},
			// 删除
			deletes() {
				let that = this;
				let token = that.token;
				let coupon_id = that.id;
				uni.showModal({
					title: '提示',
					content: '确定删除吗？',
					confirmColor: "#000000",
					success: (res) => {
						if (res.confirm) {
							this.request({
								url: "coupon/delete",
								data: {
									token: token,
									coupon_id: coupon_id,
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code == "200") {
									uni.showToast({
										title: "删除成功",
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 2000)
								}
							}).catch((res) => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							});

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			//领取优惠券
			getcoupon() {
				let id = this.id,
					that = this;
				let TikTok = uni.getStorageSync('userToken');
				console.log(TikTok)
				// 判断用户是否授权
				if (TikTok) {
					console.log('当前授权了')
					this.request({
						url: "Coupon/draw",
						data: {
							coupon_id: id,
							token: TikTok
						},
						// is_agent: 'member',
					}).then(res => {
						if (res.code == "200") {
							uni.showModal({
								title: '温馨提示',
								content: '优惠劵领取成功',
								showCancel: false,
								confirmColor: "#000000",
								confirmText: '确定',
								success: (res) => {
									if (res.confirm) {
										uni.reLaunch({
											url: "../discountCouponIndex/discountCouponIndex"
										})
									}
								},
								fail: () => {},
								complete: () => {}
							});
						}
					}).catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					});
				} else {
					console.log('当前没有授权了')
					this.gzhurl();
				}
			},

			gzhurl(e) {
				this.request({
					url: "user/gzhurl",
					data: {
						type: 4,
						id: this.id,
					},
				}).then(res => {
					if (res.data.url) {
						window.location.href = res.data.url
					}
				}).catch((res) => {
					console.log("message", res)
				});
			},

			is_web() {
				this.Coupons();
				function GetRequest() {
					var url = location.search; //获取url中"?"符后的字串
					var theRequest = new Object();
					if (url.indexOf("?") != -1) {
						//判断是否有参数
						var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
						var strs = str.split("&");
						console.log(strs)
						for (var i = 0; i < strs.length; i++) {
							theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
						}
					}
					return theRequest;
				}
				console.log(GetRequest().code,GetRequest().id)
				if (GetRequest().code) {
					//发起网络请求
					this.request({
						url: "user/gzh_login",
						data: {
							code: GetRequest().code,
							type:3,
						},
					}).then(res => {
						console.log(res, "res")
						uni.setStorageSync("userToken", res.data.token);
						this.getcoupon();
					}).catch((res) => {
						console.log("message", res)
						if (res.message == "获取openid失败") {
							return
						}
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					});
				}
				// else{
				// 	this.Coupons();
				// }
			},
			
			Copy(e) {
				// alert("Copy_nav_ali")
				let id=this.id;
				let content = this.URL+`/forward/#/merchant/CouponDetails?id=${id}`;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				uni.showToast({
					title: "复制成功",
					icon: 'none'
				})
				textarea.remove();
				return result
			},
			
		}
	}
</script>

<style>
	page {
		height: 800rpx;
		width: 100%;
	}

	.page-home {
		width: 100%;
		height: 100%;
	}

	.page-home-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.page-home-bg-img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.get_bg {
		width: 650rpx;
		height: 800rpx;
		margin: 0 auto;
		position: relative;
	}

	.get_bg image {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.get_bg_content {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.get_bg_content_title {
		height: 270rpx;
	}

	.get_bg_cut_price {
		font-size: 60rpx;
		color: #ffa024;
	}

	.get_bg_title {
		font-size: 35rpx;
		color: #000000;
		margin: 15rpx 0;
		padding: 0 15rpx;
	}

	.get_bg_full_price {
		font-size: 26rpx;
		color: #999
	}

	.getcoupon {
		width: 500rpx;
		background: rgba(255, 190, 44);
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		color: #fff;
		margin: 0 auto;
		margin-top: 80rpx;
		position: relative;
	}

	.Isgetcoupon {
		width: 640rpx;
		background: #f0f0f0;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background: #ccc;
		border: 2rpx solid #f0f0f0;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		color: #f4f4f4;
		margin-top: 80rpx;
	}

	page {
		background: #F5F7FA;
	}

	.flex-between {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.flex-y-center {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
	}

	.DEtile {
		background: #Fff;
		position: relative;
		margin-top: 20rpx;
	}

	.DEtilename {
		margin-top: 20rpx;
	}

	.DEtilenameL {
		padding: 0 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #666666;
		min-width: 250rpx;
	}

	.DEtilenameR {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding-right: 40rpx;
		width: 400rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}


	.bottomButton {
		position: relative;
		left: 0;
		width: 100%;
		margin-top: 62rpx;
		padding: 0 60rpx;
	}

	.buttonL {
		width: 300rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background: #ffffff;
		border: 2rpx solid #ccc;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		color: #707070;
		margin-right: 40rpx;
	}

	.buttons {
		width: 300rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		/* background: linear-gradient(180deg, rgba(255, 190, 44), rgba(255, 190, 44)); */
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		color: #ffffff;
		margin-left: 40rpx;
	}

	.getcoupon-rule {
		font-size: 24rpx;
		text-align: left;
		color: #FFFFFF;
	}

	.getcoupon-rule-title {
		text-align: center;
		margin-top: 50rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.getcoupon-rule-content {
		width: 550rpx;
		margin: 0 auto;
		line-height: 45rpx;
	}

	.line {
		width: 50rpx;
		height: 2rpx;
		background: #FFFFFF;

	}
</style>
