<template>
	<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="head">
				<view class="head_left">
					<text class="shopName">{{listinfo.name}}</text>
					<text class="tableName" v-if="listinfo.tableName">「桌号：{{listinfo.tableName}}」</text>
				</view>
				<text class="status" v-if="listinfo.status == 'unpaid' ||  listinfo.status == 'paying'">
					<text> 待支付 </text>
				</text>
				<text class="status" v-if="listinfo.status == 'unsend'">
					<text>待发货</text>
				</text>
				<text class="status" v-if="listinfo.status == 'closed'">
					<text>订单完成</text>
				</text>
				<text class="status" v-if="listinfo.status == 'send'">
					<text> 已发</text>
				</text>
				<text class="status" v-if="listinfo.status == 'refunding'">
					<text>申请退单</text>
				</text>
				<text class="status" v-if="listinfo.status == 'refund'">
					<text>退单</text>
				</text>
				<text class="status" v-if="listinfo.status == 'cancelled'">
					<text>已取消</text>
				</text>
				<text class="status" v-if="listinfo.status == 'merge'">
					<text>合台</text>
				</text>
			</view>
			
			<!-- 取餐号 -->
			<view class="number-wrap" 
				v-if="listinfo.status != 'unpaid' && listinfo.status != 'paying'&& listinfo.status != 'cancelled'">
				<text class="t">取餐号</text>
				<text class="number">{{listinfo.outNumber}}</text>
			</view>
			<block>
				
			</block>
			<!-- 订单详情 -->
			<view class="shop-box">
				<view class="shop-head">
					<view class="shop-head-left">
						<view class="tag-wrap">
							<text class="tag" v-if="listinfo.sendType == 'post'">快递</text>
							<text class="tag" v-if="listinfo.sendType == 'takeaway'">外卖</text>
							<text class="tag" v-if="listinfo.sendType == 'takeself'">自提</text>
							<text class="tag" v-if="listinfo.sendType == 'table'">堂食</text>
						</view>
						<text class="title">订单详情</text>
					</view>
								
					<view style="display: flex;align-items: center;"
						v-if="listinfo.status == 'unpaid' ||  listinfo.status == 'paying'"
						>
						<!-- <text style="font-size:24rpx;">支付时间:</text> -->
						<uni-countdown :show-day="false" color="#E3AD7F" border-color="#E3AD7F" splitorColor="#E3AD7F"
							:font-size="16" :hour="0" :minute="listinfo.expiredMinutes" :second="listinfo.expiredSeconds" />
					</view>
				</view>
				<view class="shop-info">
					<view class="item" v-for="(item,index) in listinfo.details" :key="index">
						<view class="cover">
							<u-image width="152" height="152" radius="16" :src='item.productImg' v-if="item.productId!=-999"></u-image>
							<u-image width="152" height="152" radius="16" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'" mode="heightFix" v-else></u-image>
						</view>
						<view class="info">
							<text class="productName">{{item.productName}}</text>
							<text class="productSkuName" v-if="item.productSkuName">{{item.productSkuName}}</text>
						</view>
							
						<view class="price">
							<view class="priceAmount">￥{{item.priceAmount}}</view>
							<view class="num">x{{item.num}}</view>
						</view>
					</view>
				</view>
				<view class="cell-item" v-if="listinfo.orderInfo.seatCount > 0">
					<view class="label">餐位费</view>
					<view class="val">
						<view>X{{listinfo.orderInfo.seatCount}}</view>
						<view style="font-size: 28rpx;">￥</view>
						<view>{{listinfo.orderInfo.seatAmount}}</view>
					</view>
				</view>
				<view class="total-wrap">
					<view>合计：</view>
					<view class="price"> ￥{{listinfo.payAmount}} </view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="order_footer">
				<view class="order_footer_icon">
					<view class="order_footer_left_icon"></view>
					<view class="order_footer_right_icon"></view>
				</view>
				<view class="order-info">
					<view class="row" @click="copyHandle(listinfo.orderNo)">
						<text class="t">订单编号：</text>
						<text class="info">{{listinfo.orderNo}}（点击复制）</text>
					</view>
					<view class="row">
						<text class="t">下单时间：</text>
						<text class="info">{{$u.timeFormat(listinfo.time, 'yyyy-mm-dd hh:MM:ss')}}</text>
					</view>
			
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	
		data() {
			return {
				
				
			}
		},
		props:{
			listinfo:{
				type: Object
			}
		},
		mounted() {
		},
		methods: {
			
		
			/**
			 * 复制订单号
			 * @param {Object} e
			 */
			copyHandle(e) {
				uni.setClipboardData({
					data: e,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.card_box{
		background-color: #fff;
		// box-shadow: 0rpx 8rpx 12rpx 2rpx rgba(87,86,86,0.35);
		position: relative;
		width: 100%;
		height: 100%;
		// box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(87,86,86,0.35);
		border-radius: 18rpx;
		.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;
			.head {
				display: flex;
				justify-content: space-between;
				padding: 50rpx 34rpx 32rpx 34rpx;
				border-bottom: 2rpx dashed #E3E3E3;
				.head_left{
					.shopName{
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
					.tableName{
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}
		
				.status {
					text{
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
			
			.number-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 32rpx;
				.t{
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
				.number {
					font-weight: bold;
					font-size: 56rpx;
					color: #333333;
				}
			}
			
		
			.price {
				.i {
					font-size: 20upx;
				}
		
				.num {
					font-size: 38upx;
				}
			}
			
			.shop-box{
				padding: 36rpx 34rpx 30rpx 34rpx;
				border-bottom: 2rpx dashed #E3E3E3;
				.shop-head{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.shop-head-left{
						display: flex;
						align-items: center;
						.tag-wrap{
							width: 80rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 10rpx 10rpx 10rpx 10rpx;
							border: 2rpx solid #E3AD7F;
							margin-right: 18rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							.tag{
								font-weight: 400;
								font-size: 24rpx;
								color: #E3AD7F;
							}
						}
						.title{
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}
						
					}
				}
				.shop-info {
					margin-top: 32rpx;
					.item:nth-child(1) {
						margin-top: 0;
					}
				
					.item {
						margin-bottom: 32rpx;
						display: flex;
						.cover{
							
						}
						.info {
							flex: 1;
							display: flex;
							flex-direction: column;
							padding-left: 16upx;
							.productName{
								font-weight: bold;
								font-size: 28rpx;
								color: #333333;
								margin-top: 20rpx;
							}
							.productSkuName{
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								  display: -webkit-box;
								  -webkit-box-orient: vertical;
								  -webkit-line-clamp: 3;
								  overflow: hidden;
								  text-overflow: ellipsis;
							}
							.n {
								font-size: 24upx;
								color: #999;
							}
						}
						.price{
							display: flex;
							flex-direction: column;
							align-items: flex-end;
							padding-left: 68rpx;
							.priceAmount{
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								margin-top: 26rpx;
							}
							.num{
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								margin-top: 22rpx;
							}
						}
					}
				}
				.cell-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 32rpx 0;
					.label{
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						padding-bottom: 32rpx;
					}
					.val{
						display: flex;
						align-items: flex-end;
						padding-bottom: 32rpx;
						border-bottom: 2rpx dashed #e5e5e5;
						view:nth-child(1){
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							margin-right: 42rpx;
						}
						view:nth-child(2){
							display: flex;
							align-items: flex-end;
							font-weight: bold;
							font-size: 36rpx;
							color: #333333;
						}
					}
				}
				.total-wrap {
					width: 100%;
					display: flex;
					justify-content: space-between;
					font-weight: bold;
					font-size: 28rpx;
					color: #333;
					.price{
						font-weight: bold;
						font-size: 32rpx;
					}
				}
			}
		
			
		
			.order_footer{
				display: flex;
				flex-direction: column;
				padding: 34rpx;
				position: relative;
				.order_footer_icon{
					width: 100%;
					position: absolute;
					top: -22.5rpx;
					left: 0;
					display: flex;
					justify-content: space-between;
					.order_footer_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);
						
					}
					.order_footer_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);
					
					}
				}
				.title{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.order-info {
					.row {
						display: flex;
						justify-content: space-between;
						padding-top: 32upx;
				
						.t {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}
				
						.info {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}
		
			
		}
	}
	
</style>
