<template>
	<view class="content" v-if="!isLoding">
		<view class="details">
			<view class="header">
				<view class="info-item">
					<view class="info-item-title">优惠券标题</view>
					<view class="info-item-text">{{details.title}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">优惠券类型</view>
					<view class="info-item-text">{{details.type.text}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">优惠券状态</view>
					<view class="info-item-text">{{details.status.text}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">使用渠道</view>
					<view class="info-item-text">{{details.use_way.text}}</view>
				</view>
				<view class="info-item" v-if="details.type.value === 2">
					<view class="info-item-title">满减</view>
					<view class="info-item-text">满{{details.full}}减{{details.price}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">券有效期(起)</view>
					<view class="info-item-text">{{details.time.start_at}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">券有效期(止)</view>
					<view class="info-item-text">{{details.time.end_at}}</view>
				</view>
			</view>
			<view class="mian">
				<block v-if="details.goods.length > 0">
					<view class="mian-title">关联商品</view>
					<view class="mian-goods">
						<view class="item" v-for="(item, index) in details.goods" :key="index">
                            <image class="item-img" :src="item.cover" mode=""></image>
							<view class="item-cont">
							    <view class="item-title nowrap">{{item.name}}</view>
							    <view class="item-price nowrap">￥{{item.price}}</view>
							</view>
                            <block v-if="details.use_way">
                                <view v-if="details.use_way.value == 1" class="item-apply" @click="$Router.push({name: 'goodsDetails', params: {id: item.goods_id}})">
                                    去使用
                                </view>
                            </block>
						</view>
					</view>
				</block>
				<view class="mian-title">使用说明</view>
				<view class="mian-text">
					<text>{{details.description || '-'}}</text>
				</view>
			</view>
		</view>
		<view class="ios-bottom"></view>
        
        <block v-if="details.use_way">
            <view class="clickCodeBtn" v-if='details.use_way.value == 2' @click="clickCode(details.coupon_grant_id)">立即兑换</view>
        </block>
        
        <!-- 二维码弹窗 -->
        <view class="showCode " v-if="showCode">
        	<view class="showCodeBg" @click="showCode = false"></view>
        	<view :class="['showCodeContent', showCode?'showCodeContentSelect':'showCodeContentSelectNo']">
        		<view class="showCodeTitle">优惠券兑换码</view>
        		<image :src="code" mode="widthFix"></image>
        	</view>
        </view>
	</view>
</template>

<script>
	import { couponsInfo, getQrcodeByGrantId } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				isLoding	: true,
				details		: {},
                showCode    : false,
			};
		},
		onShow() {
			couponsInfo(this.$Route.query.couponId).then(res => {
                console.log(res)
				this.details  	 = res
				this.isLoding 	 = false
			})
		},
		methods:{
            // 点击二维码特效
            clickCode(grantid) {
            	this.code = ''
            	if (grantid !== '') {
            		let data = {
            			coupon_grant_id: grantid
            		}
            		getQrcodeByGrantId(data).then(res => {
            			this.code = res.code
            			this.showCode = !this.showCode
            		}).catch(err => {
            			this.$refs.uToast.show({
            				title: err.message,
            				duration: 3000
            			})
            		})
            	}
            },
		}
	}
</script>

<style lang="scss">
	// content
	.content{
		padding-bottom: $padding + 90;
	}
	
	.details{
		margin: $margin;
		background: white;
		border-radius: $radius;
		// 优惠券信息
		.header{
			position: relative;
			border-bottom: dashed 2rpx $border-color;
			padding: $padding;
			&::after,&::before{
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				background: #f8f8f8;
				content: " ";
				bottom: -16rpx;
				border-radius: 50%;
			}
			&::after{
				left: -16rpx;
			}
			&::before{
				right: -16rpx;
			}
			.info{
				padding: $padding 0;
				text-align: center;
				.info-cover{
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
					vertical-align: top;
				}
				.info-title{
					padding-top: $padding;
					text-align: center;
					font-weight: bold;
					font-size: $title-size;
				}
			}
			.info-item{
				position: relative;
				padding-left: 200rpx;
				min-height: 60rpx;
				font-size: $title-size-lg;
				padding-bottom: $padding/3;
				&:last-child{
					padding-bottom: 0;
				}
				.info-item-title{
					position: absolute;
					left: 0;
					top: 0;
					line-height: 50rpx;
					color: $text-color;
				}
				.info-item-text{
					line-height: 50rpx;
					color: $text-gray;
					text-align: right;
					@extend .nowrap;
				}
			}
		}
		// 优惠券介绍
		.mian{
			padding: $padding;
			.mian-title{
				font-size: $title-size-lg;
				font-weight: bold;
				line-height: 50rpx;
				color: $text-color;
			}
			.mian-text{
				font-size: $title-size-m;
				color: $text-gray;
				padding-top: $padding/3;
			}
			.mian-goods{
				padding: $padding - 10 0 $padding;
				.item{
					font-size: $title-size-m;
                    width: 100%;
                    position: relative;
                    margin-bottom: 20rpx;
                    .item-img {
                        width: 90rpx;
                        height: 90rpx;
                        border-radius: 10rpx;
                    }
                    .item-cont {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 90rpx;
                        padding: 0 140rpx 0 110rpx;
                        box-sizing: border-box;
                        font-weight: bold;
                        .item-title{
                        	color: $text-gray;
                            margin-bottom: 10rpx;
                        }
                        .item-price{
                        	color: $text-price;
                        }
                    }
                    .item-apply {
                        position: absolute;
                        right: 0;
                        top: 20rpx;
                        border-radius: $radius - 10;
                        text-align: center;
                        border: #8b64fd 2rpx solid;
                        color: #8b64fd;
                        height: 54rpx;
                        line-height: 50rpx;
                        width: 120rpx;
                    }
				}
			}
		}
	}
    
    // 动画效果
    .showCode {
    	width: 100%;
    	height: 100vh;
    	position: fixed;
    	top: 0;
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: center;
    	box-sizing: border-box;
    	z-index: 199999999999999993;
    
    	.showCodeBg {
    		background-color: rgba($color:#000, $alpha: 0.3);
    		width: 100%;
    		height: 100%;
    		position: absolute;
    		top: 0;
    		left: 0;
    		z-index: 199999999999999994;
    	}
    
    	.showCodeContentSelect {
    		animation: sk-foldCubeAngle .6s linear both;
    	}
    
    	.showCodeContentSelectNo {
    		animation: sk-foldCubeAngleNo .6s linear both;
    	}
    
    	.showCodeContent {
    		width: 600rpx;
    		height: 500rpx;
    		background-color: #fff;
    		border-radius: 20rpx;
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    		box-sizing: border-box;
    		padding: 30rpx;
    		position: relative;
    		z-index: 199999999999999995;
    
    		image {
    			width: 60%;
    		}
    
    		.showCodeTitle {
    			font-weight: 600;
    			padding-bottom: 40rpx;
    			font-size: 36rpx;
    		}
    	}
    }
    
    .clickCodeBtn {
        margin: $margin;
        background: white;
        border-radius: $radius - 10;
        border: #8b64fd 2rpx solid;
        color: #8b64fd;
        line-height: 80rpx;
        text-align: center;
        font-size: 32rpx;
    }
</style>
