<template>
	<view class="hapPasDetBox column" style="width:100vw;height:100vh;background: #F3F1EF;">
		<view class="hapPasDetTitle">
			{{pageTitle}}
			<template v-if="discountType==1||discountType==5">{{PassbookAata.type==1?'收入':'支出'}}</template>
			<template v-if="discountType>1&&discountType<5">{{PassbookAata.type==1?'领取':'使用'}}</template>
			<template v-else-if="discountType==6">{{PassbookAata.type==1?'收获':'消耗'}}</template>
		</view>
		<view class="hapPasDetNum">
			<template v-if="PassbookAata.type==1">+</template>
			<template v-else>
				<template v-if="discountType<5">-</template>
			</template>
			<template v-if="discountType<6">{{ PassbookAata.money }}</template>
			<template v-else-if="discountType==6">{{ PassbookAata.integralNum }}</template>
		</view>
		<view class="hapPasDetBJ">
			<view class="hapPasDetImg row" @click="goDetails">
				<image mode="scaleToFill" :src="PassbookAata.imgCover" />
				<view class="col">{{ PassbookAata.lineName }}</view>
			</view>
			<view class="row hapPasDetText" v-if="PassbookAata.orderType">
				<text class="hapPasDetL">订单类型</text>
				<view class="hapPasDetR col">
					<text class="hapPasDetRC">
						<template v-if="PassbookAata.orderType==1">线路</template>
						<template v-else-if="PassbookAata.orderType==2">签证</template>
						<template v-else-if="PassbookAata.orderType==3">包车</template>
						<template v-else-if="PassbookAata.orderType==4">门票</template>
						<template v-else-if="PassbookAata.orderType==5">机票</template>
						<template v-else-if="PassbookAata.orderType==6">酒店</template>
					</text>
				</view>
			</view>
			<view class="row hapPasDetText">
				<text class="hapPasDetL">订单号</text>
				<view class="hapPasDetR col">
					<text class="hapPasDetRC">{{ PassbookAata.orderId }}</text>
					<text class="hapPasDetRCop" @click="handleCopy(PassbookAata.orderId)">复制</text>
				</view>
			</view>
			<view class="row hapPasDetText">
				<text class="hapPasDetL">
					<template v-if="discountType==1||discountType==5">{{PassbookAata.type==1?'收入':'支出'}}</template>
					<template v-else-if="discountType>1&&discountType<5">{{PassbookAata.type==1?'领取':'使用'}}</template>
					<template v-else-if="discountType==6">{{PassbookAata.type==1?'收获':'消耗'}}</template>
					日期
				</text>
				<view class="hapPasDetR col">
					<text class="hapPasDetRC">{{ PassbookAata.updateTime }}</text>
				</view>
			</view>
			<view class="row hapPasDetText" v-if="PassbookAata.tcnum">
				<text class="hapPasDetL">团号</text>
				<view class="hapPasDetR col">
					<text class="hapPasDetRC">{{ PassbookAata.tcnum }}</text>
					<text class="hapPasDetRCop" @click="handleCopy(PassbookAata.tcnum)">复制</text>
				</view>
			</view>
			<view class="row hapPasDetText" v-if="PassbookAata.tcnum">
				<text class="hapPasDetL">出团日期</text>
				<view class="hapPasDetR col">
					<text class="hapPasDetRC">{{ PassbookAata.tcStartDate }}</text>
				</view>
			</view>
			<view class="row hapPasDetText">
				<text class="hapPasDetL">订单人数</text>
				<view class="hapPasDetR col">
					<text class="hapPasDetRC active">{{ PassbookAata.peopleNum }}人</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				pageTitle: '',
				scrollTop: 0,
				PassbookAata:{},
				discountType: 0,
			};
		},
		onLoad(option) {
			if(option.data){
				this.PassbookAata = JSON.parse(
					decodeURIComponent(option.data)
				)
				this.discountType = option.discountType
				if(option.discountType==1||option.discountType==5){
					this.pageTitle = '幸福存折'
				}else if(option.discountType==2){
					this.pageTitle = 'VIP折扣'
				}else if(option.discountType==3){
					this.pageTitle = '抵用券'
				}else if(option.discountType==4){
					this.pageTitle = '折扣券'
				}else if(option.discountType==6){
					this.pageTitle = '积分'
				}
				
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: ""
			})
		},
		methods: {
			handleCopy(text){
				uni.setClipboardData({
				  data: String(text),
				});
			},
			goDetails(){
				let item = this.PassbookAata
				let url = null
				let msg = null
				// #ifdef MP-DI
					if(item.orderType==1) {
						msg = `orderId=${item.orderId}`
						url = `jiuzhai/jz_SureOrder?` //线路
					}
					else if(item.orderType==4){//景点门票
					}else if(item.orderType==6){//酒店住宿
					}else if(item.orderType==3){//目的地用车
					}else if(item.orderType==2) {//签证 
						msg = `orderId=${item.orderId}&OrderTypeStr=Visa`
						url = `visa/visa_SureOrder?`
					}else if(item.orderType==5){//机票
						msg = `id=${item.orderId}&OrderTypeStr=DMC`
						url = `airTicket/airTicketOrderDetail?`
					}
				// #endif
				// #ifdef MP-AG
					msg = `orderId=${item.orderId}`
					if(item.orderType==1) url = `jiuzhai/jz_SureOrder?`//线路
					else if(item.orderType==4){//景点门票
					}else if(item.orderType==6){//酒店住宿
					}else if(item.orderType==3){//目的地用车
					}else if(item.orderType==2) url = `visa/visa_SureOrder?`//签证  
					else if(item.orderType==5){//机票
						url = `airTicket/airTicketOrderDetail?`
						msg = `id=${item.orderId}`
					}
				// #endif
				if(url) {
					let path = `/pages/${url}${msg}`
					uni.navigateTo({
						url: path,
					});
				}
			},
		}
	};
</script>

<style scoped>
	@import url('../../asset/css/flex.css');
	.hapPasDetBox{
		padding:  0 30rpx;
	}
	.hapPasDetTitle{
		font-weight: bold;
		font-size: 32rpx;
		color: #080A0A;
		line-height: 70rpx;
		text-align: center;
		padding: 0rpx 0 10rpx 0;
	}
	.hapPasDetNum{
		font-weight: bold;
		font-size: 52rpx;
		color: #B99846;
		line-height: 70rpx;
		text-align: center;
		margin-bottom: 48rpx;
	}
	.hapPasDetBJ{
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		padding: 40rpx 40rpx 40rpx 40rpx;
	}
	.hapPasDetImg{
		margin-bottom: 50rpx;
	}
	.hapPasDetImg image{
		width: 141rpx;
		height: 141rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 1rpx solid #000000;
		display: inline-block;
	}
	.hapPasDetImg view{
		margin-left: 30rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #080A0A;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 4;
		overflow: hidden;
	}
	.hapPasDetText{
		padding: 0 0 10rpx 0;
	}
	.hapPasDetL{
		width: 180rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #757776;
		line-height: 70rpx;
	}
	.hapPasDetR{
		font-size: 28rpx;
		line-height: 70rpx;
	}
	.hapPasDetRC{
		font-weight: bold;
		color: #080A09;
	}
	.hapPasDetRC.active{
		color: #FF3166;	
	}
	.hapPasDetRCop{
		line-height: 35rpx;
		background: #E9E4E0;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		color: #000000;
		font-weight: 500;
		display: inline-block;
		padding: 0 10rpx;
		margin-left: 30rpx;
	}
</style>