<template>
	<view class="container">
		<view class="card_box">
			<view class="card_head_box">
				<view class="card_head_item" v-for="(item,index) in 8" :key="index"></view>
			</view>
			<view class="card">
				<!-- 订单头部 -->
				<view class="top">
					
					<view class="title">
						<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/points/icon_order.png" mode="aspectFill" />
						<view>自提凭证</view>
					</view>
				</view>
				<view class="card_item" v-if="orderInfo.status == 'waiting'">
					<view>
						<view class="code">提货码：{{orderInfo.couponCode}}</view>
						<tki-qrcode ref="tkiQrcode" show :size="qrcodeSize"></tki-qrcode>
					</view>
					
					<view class="semicircle_icon" >
						<view class="semicircle_left_icon"></view>
						<view class="semicircle_right_icon"></view>
					</view>
				</view>
				<view class="card_item status" v-else>
					<view class="status_left">
						<view class="status_title">
							{{
								orderInfo.status == 'unpaid' ? '待支付' : 
								orderInfo.status == 'waiting' ? '待自取' :
								orderInfo.status == 'done' ? '已使用' :
								orderInfo.status == 'cancel' ? '已取消' : ""
								}}
						</view>
						<view class="status_code" v-if="orderInfo.status == 'done'">{{orderInfo.couponCode}}</view>
					</view>
					
					<view class="status_qrcode" >
						<image class="qrcode" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/points/qrcode.png" mode="aspectFill" />
						<image class="status" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/points/status.png" mode="aspectFill" />
					</view>
				</view>
				<view class="total-wrap">
					<view class="info">
						<u-icon name="map" color="#666" size="28"></u-icon>
						<view class="shopName">自取店：{{ shopUserInfo.shopName }}</view>
						<!-- <u-icon name="phone" color="#666" size="28"></u-icon> -->
						<view class="phone">{{shopUserInfo.telephone}}</view>
					</view>
					<view class="address">
						<view class="lable">门店地址：</view>
						<view>{{shopUserInfo.address}}</view>
					</view>
				</view>
			
			</view>
		</view>
		<view class="product">
			<image class="thumbnail" :src="orderInfo.goodsImageUrl" mode="aspectFill" />
			<view class="product_info">
				<view class="name">{{orderInfo.pointsGoodsName}}</view>
				<view class="numBox"><view class="points">{{orderInfo.spendPoints}}积分</view><view class="num">X1</view></view>
			</view>
			<!-- <view class="productInfo"></view> -->
		</view>
		<view class="orderInfo">
			<view class="row">
				<text class="t">支付方式：</text>
				<text class="info">{{orderInfo.payMethod}}</text>
			</view>
			<view class="row">
				<text class="t">兑换时间：</text>
				<text class="info">{{orderInfo.createTime}}</text>
			</view>
			<view class="row" @click="copyHandle(orderInfo.orderNo)">
				<text class="t">订单编号：</text>
				<text class="info">{{orderInfo.orderNo}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
	
		data() {
			return {
				qrcodeSize: 200,
				shopId: null,
				orderInfo: null,
				shopUserInfo: uni.cache.get('shopUserInfo'),
			}
		},
		onLoad(options) {
			console.log(JSON.parse(options.orderInfo))
			if ( options.shopId ) {
				this.shopId = options.shopId;
				this.orderInfo = JSON.parse(options.orderInfo);
			}
		},
		mounted() {
			this.setQrcode();
		},
		methods: {
			
			setQrcode () {
				this.$refs.tkiQrcode.setval(this.orderInfo.couponCode) //操作属性
			},
			
			/**
			 * 复制订单号
			 * @param {Object} e
			 */
			copyHandle(e) {
				uni.setClipboardData({
					data: e,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			
			
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 32rpx 20rpx;
	}
	.card_box{
		background-color: #fff;
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 18rpx;
		padding-bottom: 32rpx;
		.card_head_box{
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: absolute;
			top: -22.5rpx;
			padding: 0 44rpx;
			.card_head_item{
				width: 45rpx;
				height: 45rpx;
				background-color: #f9f9f9;
				border-radius: 50%;
				// box-shadow: inset 0rpx -13rpx 18rpx -16rpx rgba(87, 86, 86, 0.35);
			}
		
		}
		
		.card {
			// background-color: #fff;
			border-radius: 20upx;
			margin-bottom: 28upx;
			position: relative;
			.top{
				padding: 0 34rpx;
			}
			.title{
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				border-bottom: 2rpx dashed #E3E3E3;
				padding-bottom: 36rpx;
				padding-top: 50rpx;
				display: flex;
				align-items: center;
				.icon{
					width: 25.45rpx;
					height: 28.53rpx;
					margin-right: 16rpx;
				}
			}
			.card_item{
				display: flex;
				flex-direction: column;
				position: relative;
				padding: 32rpx 34rpx 48rpx 34rpx;
				border-bottom: 2rpx dashed #E3E3E3;
				align-items: center;
				.code{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 48rpx;
				}
				::v-deep.vue-ref{
					display: flex;
					justify-content: center;
				}
				
				.semicircle_icon{
					width: 100%;
					position: absolute;
					bottom: -22.5rpx;
					left: 0;
					display: flex;
					justify-content: space-between;
					.semicircle_left_icon{
						width: 45rpx;
						height: 45rpx;
						margin-left: -22.5rpx;
						background-color: #f9f9f9;
						border-radius: 50%;
						// box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);
						
					}
					.semicircle_right_icon{
						width: 45rpx;
						height: 45rpx;
						margin-right: -22.5rpx;
						background-color: #f9f9f9;
						border-radius: 50%;
						// box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);
					
					}
				}
				
				
			}
			.card_item.status{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.status_left{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.status_title{
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 24rpx;
					}
					.status_code{
						text-decoration:line-through;
						font-weight: bold;
						font-size: 32rpx;
						color: #999999;
					}
				}
				.status_qrcode{
					width: 112rpx;
					height: 112rpx;
					position: relative;
					.qrcode{
						width: 112rpx;
						height: 112rpx;
					}
					.status{
						width: 54.82rpx;
						height: 48rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
			
				
			.total-wrap {
				width: 100%;
				display: flex;
				flex-direction: column;
				padding: 0 34rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-top: 38rpx;
				.info{
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
					.shopName{
						margin-right: 5rpx;
						margin-left: 16rpx;
						
					}
					.phone{
						margin-left: 16rpx;
					}
				}
				.address{
					margin-left: 36rpx;
					align-self: center;
					display: flex;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin-top: 24rpx;
					align-self: flex-start;
					.lable{
						flex-shrink: 0;
					}
				}
			}
			
		}
	}
	.product{
		padding: 32rpx 34rpx;
		background-color: #FFFFFF;
		margin-top: 32rpx;
		border-radius: 18rpx;
		display: flex;
		.thumbnail{
			width: 152rpx;
			height: 152rpx;
			border-radius: 10rpx;
			margin-right: 16rpx;
			flex-shrink: 0;
		}
		.product_info{
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-top: 15rpx;
			.name{
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 32rpx;
			}
			.numBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 24rpx;
				.points{
					color: #F7853D;
				}
				.num{
					color: #999999
				}
			}
		}
	}
	.orderInfo{
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin-top: 32rpx;
		padding: 32rpx 34rpx;
		// box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(87,86,86,0.35);
		.row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;
					
			.t {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
					
			.info {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
		}
		.row:last-child{
			margin-bottom: none;
		}
		
	}
	
</style>
