<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">使用范围：{{ g.couponsUseScopeName }}</view>
						<!-- <view class="cdTiaojianBRText">{{ g.remark }}</view> -->
					</view>
				</view>
				<view class="cdTiaojianButtom"  @click="gouseUrl(g)">立即使用</view>
		</view>
		<view class="cd_box" v-if="false">
			
			
			<Text class='cd_name'>
				{{g.couponName}}
			</Text>
			<view style="display: flex;align-items: flex-end;">
				<Text style='font-size: 32px;'>{{ g.denomination }} </Text>
				<Text style='font-size: 14px;'>{{g.couponsType!=1?'折':""}}</Text>
			</view>
			<Text class='condition'>
				满{{g.useCondition }}可用
			</Text>

			<view v-if='type==2 && g.IsReceive==0' class="receive" :style="{'background':mainColor}" @click="receive(g.CouponId)">
				<Text>
					立即领取
				</Text>
			</view>
			<view v-if='type==1 || g.IsReceive==1' class="gouse" @click="gouseUrl(g)">
				<Text>
					去使用
				</Text>
			</view>
			<view style="width: 100%;border-top: 1px dashed #f5f5f5;margin: 10px 0;"></view>
			<Text class='c_name' style='margin-top: 25px;'>有效期</Text>
			<Text class='cd_content'>{{g.expirationDate}} 失效</Text>
			<!-- <Text class='cd_content' v-if='g.IndateType==1'>领取后{{g.IndateDay}}天内有效</Text>
			<Text class='cd_content' v-if='g.IndateType==2'>{{g.StartDate}}-{{g.EndDate}}</Text> -->
			<!-- <Text class='cd_content' >{{g.StartDate}}-{{g.EndDate}}</Text> -->
			<Text class='c_name' style='margin-top: 1px;'>使用规则</Text>

			<Text class='cd_content' v-if='g.UseType==1'>适用类别: <Text v-for="(item, index) in g.ProductList" :key="index">{{item.Relevance}}</Text>
			</Text>
			<Text class='cd_content' v-if='g.UseType==2'>适用商品: <Text v-for="(item, index) in g.ProductList" :key="index">{{item.Relevance}}</Text>
			</Text>
			<Text class='cd_content' v-if='g.UseType==3'>适用范围:全场通用</Text>
			<Text class='cd_content' v-if='g.UseType==4'>适用方式:当面付</Text>
			<Text class='c_name' style='margin-top: 1px;'>使用说明</Text>
			<Text class='cd_content'>{{g.Describe}}</Text>
		</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.request2({
						url: '/api/AppletUser/GrantCoupon',
						data: {
							CouponId: id
						}
					},
					(res) => {
						if (res.resultCode == 1) {
							uni.showToast({
								title: res.message,
								icon: "none"
							});
							this.g.IsReceive = 1;
						}
					}
				);
			},


			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;
		/* position: fixed; */
		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;
		/* margin-top: 480rpx; */
	}
	.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>
