<template>
	<view >
		<ujp-navbar title="优惠券详情"></ujp-navbar>
		<view class="" style="background-color: rgba(188, 225, 208, 100);padding: 12px 0 ;">
			<view class="list-item" style="margin-top: 0	;">
				<view class="voucher" v-if="userCoupon.classify == '4'||userCoupon.classify == '5'">月卡优惠券</view>
				
				<view class="voucher" v-else>优惠券</view>
				 
				<view class="content">
					<view class="content-left">
						<view class="text oldTextjp" oldstyle="font-size: 18px;">{{chargingCoupon.couponName}}</view>
						<view class="useful-life oldTextjp2" oldstyle="font-size: 16px;">
							有效期至{{userCoupon.endDate ? userCoupon.endDate.slice(0,10) : ''}}
						</view>		
					</view>
					<view class="content-right">

						 <view class="price2" v-if="userCoupon.classify == '2'">
							 <span style="font-size: 12px;" v-if="userCoupon.value">服务费</span>
							 
								<span v-if="userCoupon.value"> {{userCoupon.value}}<span style="font-size: 12px;">折</span></span>
								<span v-else>免服务费</span>
							 </view>
						 <view class="price" v-else >{{userCoupon.value}}<span style="font-size: 12px;">元</span></view>

						 <view class="price-condition oldTextjp2" oldstyle="font-size: 16px;">
							{{userCoupon.threshold == 0 ? '无门槛' : '满'+userCoupon.threshold+'元可用'}}
						 </view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="main oldTextjp2" oldstyle="font-size: 16px;">
			<view class="explain-item">
				<view class="name">
					卡券编号
				</view>
				<view class="content">
					{{userCoupon.couponNo}}
				</view>
			</view>
			<view class="explain-item">
				<view class="name">
					获取渠道
				</view>
				<view class="content">
					{{userCoupon.accessChannel}}
				</view>
			</view>
			<view class="explain-item">
				<view class="name">
					适用范围
				</view>
				<view class="content">
					{{userCoupon.useScopeText}}
				</view>
			</view>
			<view class="explain-item">
				<view class="name">
					使用规则
				</view>
				<view class="content" v-html="chargingCoupon.useRules">
				</view>
			</view>
			<view class="explain-item">
				<view class="name">
					使用说明
				</view>
				<view class="content" v-html="chargingCoupon.useInstruction">
				</view>
			</view>	
			<view class="explain-item" v-if="userCoupon.startDate" >
				<view class="name">
					有效期开始时间
				</view>
				<view class="content" >
					{{userCoupon.startDate ? userCoupon.startDate : ''}}
					
				</view>
			</view>	
			<view class="explain-item" v-if="userCoupon.endDate">
				<view class="name">
					有效期结束时间
				</view>
				<view class="content" >
					
					{{userCoupon.endDate ? userCoupon.endDate : ''}}
				</view>
			</view>	
			
		</view>
	</view>
</template>


<script>
	import * as userApi from '@/apis/user.js'
	
	export default{
		data(){
			return{
				id: '',
				userCoupon: {},
				chargingCoupon: {},
			}
		},
		onLoad(op) {
			if(op.id) {
				this.id = op.id
				this.getCouponDetail();
			}
		},
		methods:{
			getCouponDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.couponDetail({
					id: this.id
				}).then((res) => {
					uni.hideLoading();
					
					this.userCoupon = res.data.userCoupon;
					this.chargingCoupon = res.data.chargingCoupon;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.list-item{
		width: 91.4%;
		background-color: #fff;
		margin: 12px auto 0;
		position: relative;
		border-radius:8px;
		.voucher{
			width: 60px;
			height: 20px;
			line-height: 20px;
			border-radius: 8px 0px 8px 0px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 12px;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
		}
		.content{
			   display: flex;
			   justify-content: space-between;
			   padding: 48rpx 32rpx;
		}
			   .content-left{
				   .text{
					 
					   height: 22px;
					   line-height: 22px;
					   color: rgba(16, 16, 16, 100);
					   font-size: 16px;
				   }
				
				   .useful-life{
					   height: 17px;
					   line-height: 38px;
					   color: rgba(153, 153, 153, 100);
					   font-size: 12px;
					   margin-top: 4px;
				   }
			   };
			   .content-right{
				   margin-top: -8px;
				   .price{
					   height: 38px;
					   color: rgba(0, 185, 98, 100);
					   font-size: 32px;
				   }
				   .price2{
				   					   height: 38px;
				   					   color: rgba(0, 185, 98, 100);
				   					   font-size: 20px;
				   }
				   .price-condition{
					   height: 17px;
					   color: rgba(102, 102, 102, 100);
					   font-size: 12px;
					   text-align: center;
					   margin-top: 4px;
				   }
			   }
		}
		.limit{
		
			display: flex;
			justify-content: space-between;
			padding: 14px 16px;
			border-top:  1px dotted rgba(227, 227, 227, 100);
			position: relative;
			
			.limit-text{
				color: rgba(153, 153, 153, 100);
								font-size: 11px;
								
								
				
			
			
		}
		
		
	}
	.have-used{
		  
		  width: 64px;
		  height: 64px;
		  position: absolute;
		  top: -12px;
		 right: 0;
		  img{
			  width: 100%;
			  height: 100%;
		  }
	}

.main{
	width: 100%;
	padding: 40rpx 32rpx 180rpx 32rpx;
	.explain-item{
		display: flex;
		line-height: 20px;
		margin-top: 16px;
		.name{
			width: 25%;
			color: #777777;
		}
		.content {
			width: 75%;
		}
		p{
			margin-bottom: 8px;
		}
	}
}
</style>
