<template>
	<view class="container">
		<view class="nav" :style="{'height':height+4+'px','padding-top':statusBarHeight+'px'}">
			<image @click="$router.pop()" class="back" src="../../static/back-white.png" mode="heightFix"></image>
			<view class="title">
				订单详情
			</view>
		</view>
		<view class="order-status" :style="{'padding-top':height+statusBarHeight+26+'px'}">
			<image class="icon" :src="statusIcon" mode="widthFix"></image>
			<view class="name">
				{{statusText[orderData.state]}}
			</view>
		</view>
		<view class="order-sub">{{statusSubText[orderData.state]}}</view>
		<view class="bottom">
			<view class="goods">
				<image class="img" :src="orderData.goodsPath" mode=""></image>
				<view class="info">
					<view class="title">{{orderData.attrValue}}</view>
					<view class="spec">{{orderData.attrName}}:{{orderData.denomination}}</view>
					<view class="price">
						<view class="left">{{orderData.goodsIntegral}}积分</view>
						<view class="right">x{{orderData.payNumber}}</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="title">
					<view class="line"></view>
					<view class="text">订单信息</view>
				</view>
				<view class="item-copy">
					<view class="left">订单编号：</view>
					<view class="right">{{orderData.orderSn}}</view>
					<view class="copy" @click="copy()">复制</view>
				</view>
				<view class="item">
					<view class="left">兑换成功数：</view>
					<view class="right">{{orderData.state===100&&orderData.successQuantity=='0'?'-':orderData.successQuantity}}</view>
				</view>
				<view class="item">
					<view class="left">兑换失败数：</view>
					<view class="right">{{orderData.state===100&&orderData.failQuantity=='0'?'-':orderData.failQuantity}}</view>
				</view>
				<view class="item" v-if="showOrderInfoBottom">
					<view class="left">支付积分：</view>
					<view class="right">{{orderData.payIntegral}}</view>
				</view>
				<view class="item" v-if="showOrderInfoBottom">
					<view class="left">实际消耗：</view>
					<view class="right">{{orderData.state===100&&orderData.successCostIntegral=='0'?'-':orderData.successCostIntegral}}</view>
				</view>
				<view class="item" v-if="showOrderInfoBottom">
					<view class="left">返还积分：</view>
					<view class="right">{{orderData.state===100&&orderData.failReturnIntegral=='0'?'-':orderData.failReturnIntegral}}</view>
				</view>
				<view class="item" v-if="showOrderInfoBottom">
					<view class="left">创建时间：</view>
					<view class="right">{{orderData.createTime}}</view>
				</view>
				<view class="btn" @click="showOrderInfoBottom=!showOrderInfoBottom">
					<view>{{showOrderInfoBottom?'收起':'展开'}}</view>
					<image class="arrow" :src="icon" mode=""></image>
				</view>
			</view>
			<view class="order-info" :style="{'margin-bottom':safeAreaBottom+140+'rpx'}">
				<view class="title">
					<view class="line"></view>
					<view class="text">商品使用说明</view>
				</view>
				<view class="good-introduction">
					<rich-text :nodes="formatRichText(orderData.goodsDetails||'')" class="rich-text"></rich-text>
				</view>
			</view>
			<view class="coupon-btn" :style="{'height':safeAreaBottom+120+'rpx'}">
				<view class="btn" :style="{'background-color':orderData.state===200?'#FF0520':''}" @click="goCoupon()">
					查看卡券
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: this.CustomBarHeight,
				statusBarHeight: this.StatusBarHeight,
				safeAreaBottom: this.SafeAreaBottom,
				orderId: '',
				orderData: {},
				statusText:{
					100:'兑换中',200:'兑换成功',300:'兑换失败'
				},
				statusSubText:{
					100:'卡券生成中，请稍候…',200:'祝您使用愉快.',300:'如有疑问，请联系客服.'
				},
				orderId: '',
				showOrderInfoBottom: false
			};
		},
		computed: {
			statusIcon: function () {
				if (this.orderData.state == 100) {
					return '../../static/order-pending.png'
				} else if (this.orderData.state == 300) {
					return '../../static/order-fail.png'
				} else {
					return '../../static/order-success.png'
				}
			},
			icon: function () {
				if (!this.showOrderInfoBottom) {
					return '../../static/arrow-down.png'
				} else {
					return '../../static/arrow-up.png'
				}
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.getData()
		},
		methods: {
			getData() {
				this.$net.post('/orders/details', {'orderSn': this.orderId}).then(res=>{
					if (res.code === 200) {
						this.orderData = res.data
					}
				})
			},
			goCoupon() {
				if (this.orderData.state === 100) {
					this.toast('卡券生成中，请稍候…')
				} else if (this.orderData.state === 200) {
					this.$router.push('Coupon', {'orderId':this.orderData.orderSn})
				} else {
					this.toast('兑换失败，无法查看')
				}
			},
			copy() {
				let that = this
				uni.setClipboardData({
				    data: this.orderData.orderSn,
				    success: function () {
				        console.log('success');
						that.toast('订单号已复制到剪贴板')
				    }
				});
			},
			formatAttrStr(attrs) {
				let str = '';
				for(let i = 0; i < attrs.length; i++) {
					str = str + attrs[i] + (i === attrs.length - 1 ? '' : '，')
				}
				return str;
			},
			formatRichText (html) { //控制小程序中图片大小
			    let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
			        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			        return match;
			    });
			    newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
			        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
			        return match;
			    });
			    newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			    newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');
			    newContent = newContent.replace(/\<p style="/gi, '<p style="text-align:left;padding-left:20px;padding-right:20px;');
				newContent = newContent.replace(/\<p/gi, '<p style="text-align:left;padding-left:20px;padding-right:20px;"');
				return newContent;
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	background: url(data:image/png;base64,[encoded data, 211648 characters]);
	background-size: 750rpx 420rpx;
	background-repeat: no-repeat;
	.nav {
		display: flex;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #FF0520;
		align-items: center;
		.back {
			padding: 0 34rpx;
			height: 34rpx;
			width: 86rpx;
		}
		.title {
			margin-left: 222rpx;
			font-size: 34rpx;
			color: #FFFFFF;
		}
	}
	.order-status {
		display: flex;
		padding-left: 40rpx;	
		.icon {
			height: 52rpx;
			width: 52rpx;
			margin-top: 2rpx;
		}
		.name {
			margin-left: 8rpx;
			font-size: 40rpx;
			font-weight: bolder;
			color: #FFFFFF;
		}
	}
	.order-sub {
		margin-top: 18rpx;
		margin-left: 40rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.bottom {
		margin-top: 40rpx;
		border-radius: 16rpx;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		background-color: #F5F5F5;
		padding: 26rpx 24rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.goods {
			border-radius: 16rpx;
			background-color: #FFFFFF;
			margin-bottom: 24rpx;
			padding: 32rpx 24rpx;
			display: flex;
			padding: 24rpx;
			.img {
				height: 160rpx;
				width: 160rpx;
				border-radius: 8rpx;
				background-color: #D8D8D8;
			}
			.info {
				margin: 4rpx 0 0 16rpx;
				position: relative;
				.title {
					font-size: 24rpx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: 36rpx;
					width: 478rpx;
				}
				.spec {
					width: 478rpx;
					margin-top: 10rpx;
					font-size: 22rpx;
					color: #666666;
					line-height: 32rpx;
				}
				.price {
					margin-top: 36rpx;
					width: 478rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left {
						font-size: 28rpx;
						font-weight: bolder;
						color: #FF0520;
					}
					.right {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
		.order-info {
			margin-top: 24rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx 24rpx;
			width: 100%;
			.title {
				display: flex;
				align-items: center;
				.line {
					height: 28rpx;
					width: 4rpx;
					border-radius: 8rpx;
					content: ' ';
					background-color: #FF0520;
				}
				.text {
					font-size: 26rpx;
					color: #333333;
					font-weight: bolder;
					margin-left: 8rpx;
				}
			}
			.item {
				display: flex;
				justify-content: space-between;
				margin-top: 28rpx;
				width: 100%;
				font-size: 26rpx;
				.left {
					color: #666666;
				}
				.right {
					color: #333333;
				}
			}
			.item-copy {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;
				width: 100%;
				font-size: 26rpx;
				.left {
					color: #666666;
					width: 130rpx;
				}
				.right {
					color: #333333;
					width: 432rpx;
					text-align: right;
				}
				.copy {
					font-size: 26rpx;
					color: #338AFF;
				}
			}
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				view {
					font-size: 26rpx;
					color: #999999;
				}
				.arrow {
					height: 12rpx;
					width: 20rpx;
					display: block;
					margin-left: 10rpx;
				}
			}
			.good-introduction {
				background-color: #FFFFFF;
				width: 100%;
				align-items: center;
				text-align: center;
				display: flex;
				flex-direction: column;
				margin-top: 24upx;
				.rich-text {
					width: 100%;
				}
			}
		}
		.coupon-btn {
			// height: 120rpx;
			bottom: 0;
			background-color: #FFFFFF;
			display: flex;
			padding: 0 24rpx;
			// align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0;
			right: 0;
			.btn {
				background-color: rgba($color: #FF0520, $alpha: 0.5);
				border-radius: 40rpx;
				height: 80rpx;
				width: 100%;
				line-height: 82rpx;
				text-align: center;
				color: #ffffff;
				font-size: 32rpx;
			}
		}
	}
}
</style>
