<template>
	<view class="coupondetailsStyle" :style="{ height: contentHeight }">
		<view class="couponDetailsHeadeBox">
			<headers :title="'优惠券详情'"></headers>
			<view class="couponDetailsHeadeNB">
				<view class="couponDetailsHeade">
					<view class="couponDetailsHeadeL">
						<view class="couponDetailsHeadeLq" v-if="g.couponsType==1">
							<view>¥</view>
						</view>
						<view class="couponDetailsHeadeLn">{{ g.denomination }}</view>
						<view class="couponDetailsHeadeLq" style="margin-right: 0;margin-left: 10rpx;" v-if="g.couponsType==2">
							<view>折</view>
						</view>
					</view>
					<view class="couponDetailsHeadeR">
						<view class="couponDetailsHeadeRt">{{ g.couponName }}</view>
						<view class="couponDetailsHeadeRn">满{{g.useCondition}}元使用</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cdTiaojian_box">
				<view class="cdTiaojianB">
					<view class="cdTiaojianBLeft">
						<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421660548071.png"/>
					</view>
					<view class="cdTiaojianBRight">
						<view class="cdTiaojianBRTitle">使用条件</view>
						<view class="cdTiaojianBRText">满{{g.useCondition}}元使用</view>
					</view>
				</view>
				<view class="cdTiaojianB">
					<view class="cdTiaojianBLeft">
						<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421660548071.png"/>
					</view>
					<view class="cdTiaojianBRight">
						<view class="cdTiaojianBRTitle">有效期</view>
						<view class="cdTiaojianBRText">{{g.effectDate}} / {{g.expirationDate}}</view>
					</view>
				</view>
				<view class="cdTiaojianB">
					<view class="cdTiaojianBLeft">
						<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421660548071.png"/>
					</view>
					<view class="cdTiaojianBRight">
						<view class="cdTiaojianBRTitle">使用说明</view>
						<view class="cdTiaojianBRText">券类型：{{ g.couponsType==1?'抵用券':'折扣券' }}</view>
						<view class="cdTiaojianBRText">使用范围：
							<template v-if="g.couponsUseScopeName">
								{{ g.couponsUseScopeName }}
							</template>
							<template v-if="g.couponsUseScope">
								{{ g.couponsUseScope }}
							</template>
						</view>
						<view class="cdTiaojianBRText" v-if="g.remark&&g.remark!=''">备注：{{ g.remark }}</view>
					</view>
				</view>
				<view class="cdTiaojianButtom" v-if="type==1"  @click="gouseUrl(g)">立即使用</view>
				<view class="cdTiaojianButtom" v-else  @click="g.couponReceiveCount==0?receive(g.couponReceiveCount):gouseUrl(g)">{{ g.couponReceiveCount==0?'立即领取':'立即使用' }}</view>
				
		</view>
	</view>
</template>

<script>
	import headers from "@/components/header/header";
	export default {
		components: {
			headers,
		},
		data() {
			return {
				pageTitle: "优惠券详情",
				mainColor: "",
				contentHeight: 0,
				g: [],
				loading: false,
				coupon_id: 0,
				isreceive: false,
				type: 0, //type 1是优惠券列表来的 2 是领券中心来的
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad: function(option) {
			this.type = option.type
			let item = JSON.parse(decodeURIComponent(option.item))
			this.g = item;
			console.log("this.g", this.g);
		},
		methods: {
			receive(id){
				this.apipost("b2c_post_CustomerGrantCoupon", {
					Id: id
				}, (res) => {
					if (res.resultCode == 1) {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
						this.g.couponReceiveCount=1;
					}
					}, (failed) => {
						uni.showToast({
							title: failed.message,
							icon: "none",
						});
					}, (error) => {
				})
				
			},

			gouseUrl(g) {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		},
	};
</script>
<style>
	.coupondetailsStyle {
		width: 100%;
		height: 100%;
		background: #f3f4f6;
		/* padding-top: 10px; */

	}

	.coupondetailsStyle .cd_box {
		width: 94%;
		border-radius: 10rpx;
		background: #fff;
		margin-left: 3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
		margin-top: 250rpx;
	}

	.cd_box .cd_name {
		font-size: 14px;
		color: #82848a;
		margin-top: 30px;
	}

	.cd_box .sub_price {
		font-size: 32px;
		margin-top: 10px;
	}

	.cd_box .condition {
		font-size: 16px;
		margin-top: 5px;
	}

	.cd_box .receive {
		width: 130px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #fff;
		margin-top: 15px;
		border-radius: 15px;
	}

	.cd_box .gouse {
		width: 130px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #fff;
		margin-top: 15px;
		border-radius: 15px;
		background: #6995EE;
	}

	.cd_box .c_name {
		width: 90%;
		font-size: 14px;
		color: #82848a;
	}

	.cd_box .cd_content {
		padding: 15px 0;
		width: 90%;
		font-size: 15px;
	}
	.couponDetailsHeadeBox{
		position: relative;
		width: 100%;
		height: 328rpx;
		top: 0;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421380079705.png');
		background-size: 100% auto;
	}
	.couponDetailsHeadeNB{
		position: absolute;
		width: 100%;
		top: 190rpx;
	}
	.couponDetailsHeade{
		width: 675rpx;
		height: 232rpx;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726421549327416.png');
		background-size: 100% auto;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 76rpx 86rpx;
	}
	.couponDetailsHeadeL{
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
	}
	.couponDetailsHeadeLq{
		display: flex;
		font-size: 44rpx;
		color: rgba(222, 87, 67, 1);
		margin-right: 10rpx;
	}
	.couponDetailsHeadeLq{
		position: relative;
		top: 25rpx;
	}
	.couponDetailsHeadeLn{
		font-size: 84rpx;
		color: rgba(222, 87, 67, 1);
		font-family: "DFPLiJinHeiW8-GB";
	}
	.couponDetailsHeadeR{
		flex: 1;
		margin-left: 27rpx;
	}
	.couponDetailsHeadeRt{
		width: 100%;
		font-weight: bold;
		font-size: 32rpx;
		color: #7D5D0D;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.couponDetailsHeadeRn{
		width: 100%;
		font-weight: 500;
		font-size: 24rpx;
		color: #B99846;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 20rpx;
	}
	.cdTiaojian_box{
		padding: 0 66rpx;
		margin-top: 143rpx;
	}
	.cdTiaojianB{
		display: flex;
		margin-bottom: 59rpx;
	}
	.cdTiaojianBLeft{
		flex-shrink: 0;
		margin-right: 19rpx;
	}
	.cdTiaojianBLeft img{
		width: 16rpx;
		height: 16rpx;
		display: inline-block;
	}
	.cdTiaojianBRTitle{
		font-weight: 500;
		font-size: 28rpx;
		color: #080A09;
	}
	.cdTiaojianBRText{
		font-weight: 500;
		font-size: 24rpx;
		color: #B99846;
		margin-top: 23rpx;
	}
	.cdTiaojianButtom{
		width: 100%;
		height: 84rpx;
		background: #E2C27A;
		border-radius: 18rpx;
		color: #fff;
		font-weight: bold;
		font-size: 30rpx;
		text-align: center;
		line-height: 84rpx;
		margin-top: 83rpx;
	}
</style>
