<template>
	<view class="uni-container" v-if="cardData">
		<u-navbar :autoBack="true" :placeholder="true" :bgColor="bgColor">
			<view slot='center' style="font-size: 36rpx; font-weight: bold;">旅游年卡</view>
		</u-navbar>
		<view class="card-box">
			<view class="card-item">
                <!-- <image class="img" :src="$utils.setImgUrl(cardData.orderItemList[0].image11)" mode=""></image> -->
                <image class="img" src="../../static/image/mine/card_detail.png" mode=""></image>
				<view class="title">{{cardData.orderItemList[0].ticketOrderDetailList[0].ticketName}}</view>
				<view class="time">剩余天数 {{getResidueDays(cardData.orderItemList[0].ticketOrderDetailList[0].availableEndTime)}} 天</view>
				<view class="use">
					<!-- <view class="btn" @click="showQrCode">立即使用</view> -->
                    <view></view>
					<view class="code">{{cardData.orderItemList[0].ticketOrderDetailList[0].verificationCode}}</view>
				</view>
			</view>
		</view>
		<view class="form2">
			<view class="row" @click="goDetail(1)">
				<view class="label">
					<image class="icon" src="../../static/image/mine/ywjl.png" mode=""></image>
					游玩记录
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
			<view class="row" @click="goDetail(2)">
				<view class="label">
					<image class="icon" src="../../static/image/mine/qyxq.png" mode=""></image>
					权益详情
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
			<view class="row" @click="goDetail(3)">
				<view class="label">
					<image class="icon" src="../../static/image/mine/hyxx.png" mode=""></image>
					会员信息
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
		</view>
        <uni-popup ref="codePopup" background-color="transparent" :is-mask-click="false">
            <view class="code_popup">
				<u-icon name="close" color="#999" size="34rpx" @click="closeCodePopup"></u-icon>
                <view class="title">扫码使用</view>
                <view class="qrcode" v-if="qrCodeInfo" @click="showCode">
                    <uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrCodeInfo" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box" @complete="complete"></uqrcode>
                </view>
            </view>
        </uni-popup>
	</view>
</template>
<script>
	import _config from '../../common/http/config.js';
	export default {
		data() {
			return {
                qrCodeInfo: null,
                id: '',
				bgColor: '#FFF',
				cardData: null,
                size: 0
			};
		},
		onLoad(options) {
            this.id = options.id;
            this.size = uni.upx2px(300);
			this.orderNkDetail()
		},
		methods: {
			async orderNkDetail() {
				let info = await this.$http.orderNkDetail(this.id)
				this.cardData = info.data;
			},
            showCode () {
                this.$refs.uqrcode && this.$refs.uqrcode.toTempFilePath({
                    success: res => {
                        uni.previewImage({
                            urls: [res.tempFilePath],
                        });
                    }
                });
            },
            setQrCode () {
                this.$nextTick(() => {
                    this.$refs.uqrcode && this.$refs.uqrcode.make();
                })
            },
            complete(e) {
                if (e.success) {
                    uni.hideLoading();
                } else {
                    uni.hideLoading();
                    uni.showToast({ mask: true, title: '二维码生成失败', icon: 'none' });
                }
            },
            async showQrCode () {
				this.qrCodeInfo = this.cardData.orderItemList[0].ticketOrderDetailList[0].verificationCode;
                this.$refs.codePopup.open('center')
                this.setQrCode();
            },
            async closeCodePopup () {
				this.$refs.codePopup.close()
				this.qrCodeInfo = null;
            },
			goDetail(type) {
				let pageUrl = ''
				if (type === 1) {
					pageUrl = '/pages/my/record'
				} else if (type === 2) {
					pageUrl = '/pages/my/equityDetails'
				} else if (type === 3) {
					pageUrl = '/pages/my/member'
				}
				uni.navigateTo({ url: pageUrl + `?id=${this.id}` })
			},
			getResidueDays(time) {
				let endTime = this.$moment(time).format('YYYY/MM/DD')
				let nowTime = this.$moment().format('YYYY/MM/DD');
				const days = this.$moment(endTime).diff(this.$moment(nowTime), 'days');
				return days;
			},
		}
	}
</script>

<style lang="scss" scoped>
    .code_popup{
		position: relative;
        width: 638rpx; height: 638rpx; background: #fff; border-radius: 20rpx; box-sizing: border-box; background: linear-gradient( 180deg, #E8F8F4 0%, #fff 100%);
		/deep/.u-icon {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}
        .title{ padding-top: 63rpx; font-weight: 500; font-size: 40rpx; color: #000000; text-align: center; }
        .qrcode{
            width: 300rpx; height: 300rpx; margin: 80rpx auto 0;
            .qrcode_box{ width: 100%; height: 100%; }
        }
    }
	.uni-container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background: #FBFBFB;
		.card-box {
			padding: 32rpx 0 0;
			margin: 0 32rpx;
            border-radius: 10rpx;
			.card-item {
				position: relative;
				.img {
					width: 686rpx;
					height: 364rpx;
                    border-radius: 10rpx;
                    vertical-align: top;
				}
				.title {
					position: absolute;
					top: 40rpx;
					left: 40rpx;
					font-weight: bold;
					font-size: 42rpx;
					color: #FFFFFF;
				}
				.time {
					position: absolute;
					top: 111rpx;
					left: 40rpx;
					font-size: 24rpx;
					color: rgba(255,255,255,0.7);
				}
				.use {
					position: absolute;
					bottom: 40rpx;
					left: 0;
					width: 100%;
					padding: 0 40rpx;
					box-sizing: border-box;
					display: flex;
					align-items: flex-end;
					flex-direction: row;
					justify-content: space-between;
					.btn {
						width: 181rpx;
						height: 68rpx;
						background: #FDCE88;
						border-radius: 34rpx;
						line-height: 68rpx;
						text-align: center;
						font-size: 28rpx;
						color: #552F11;
					}
					.code {
						font-size: 24rpx;
						color: rgba(255,255,255,0.7);
					}
				}
			}
		}
		.form2 {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 0 32rpx;
			margin: 32rpx 32rpx 0;
			.row {
				height: 95rpx;
				line-height: 95rpx;
				border-bottom: 1rpx solid rgba(0,0,0,0.1);
				display: flex;
				align-items: center;
				flex-direction: row;
				justify-content: space-between;
				&:last-child {
					border: none;
				}
				.label {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					display: flex;
					align-items: center;
					flex-direction: row;
					.icon {
						width: 44rpx;
						height: 44rpx;
						margin-right: 12rpx;
					}
				}
				.icon {
					/deep/.uniui-right {
						font-size: 34rpx !important;
						color: #999999 !important;
					}
				}
			}
		}
	}
</style>