<template>
	<div class="app-content">
		<div class="page-top">
			<div class="page-top-img">
				<img src="../../static/images/order/bg.png" alt />
			</div>
			<div class="page-top-det">
				<div>
					<div class="page-status">等待支付</div>
					<div class="page-prompt">请尽快支付哟~</div>
				</div>
				<div class="page-status-img">
					<img src="../../static/images/order/wait-pay.png" alt />
				</div>
			</div>
		</div>
		<!-- 订单详情 -->
		<div class="page-det">
			<!-- 商品信息 -->
			<div class="module-com">
				<div class="module-tit">商品信息</div>
				<div class="module-det">
					<list-module v-for="(item, subIndex) in 2" :key="subIndex" />
				</div>
			</div>
			<!-- 订单信息 -->
			<div class="module-com order-msg">
				<div class="module-tit">订单信息</div>
				<div class="module-det">
					<!--  -->
					<div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">收花人</div>
							<div class="value">叶落西风</div>
						</div>
						<div class="msg-list">
							<div class="label">电话</div>
							<div class="value">叶落西风</div>
						</div>
						<div class="msg-list">
							<div class="label">地址</div>
							<div class="value">海路36号（福建省厦门市软件园二期 望海路36号403室）</div>
						</div>
					</div>
					<!--  -->
					<div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">送达时间</div>
							<div class="value">叶落西风</div>
						</div>
						<div class="msg-list">
							<div class="label">贺卡</div>
							<div class="value">叶落西风</div>
						</div>
						<div class="msg-list">
							<div class="label">地址</div>
							<div class="value">叶落西风</div>
						</div>
					</div>
					<!--  -->
					<div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">订单号</div>
							<div class="value">叶落西风</div>
						</div>
						<div class="msg-list">
							<div class="label">时间</div>
							<div class="value">叶落西风</div>
						</div>
						<div class="msg-list">
							<div class="label">总价</div>
							<div class="value">叶落西风</div>
						</div>
						<div class="msg-list">
							<div class="label">运费</div>
							<div class="value">￥10</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 优惠信息 -->
			<div class="module-com coupon-wrap">
				<div class="module-tit">优惠信息</div>
				<div class="module-det">
					<app-coupon :discountArr="['member', 'coupon']" />
				</div>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="page-btn app-footer">
			<div class="flex-center">
				<span>应付款</span>
				<span class="app-price">
					<span>￥</span>
					<span class="app-size-40">580</span>
					<span>.00</span>
				</span>
			</div>
			<template v-if="false">
				<button class="button-com red">立即支付</button>
			</template>
			<template v-else>
				<button class="button-com default">填写收花地址</button>
			</template>
		</div>
	</div>
</template>

<script>
import listModule from '@/components/module/app-order-list'
import appCoupon from '@/components/app-coupon-sel'
export default {
	name: 'order-detail',
	components: {
		listModule,
		appCoupon
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-bottom: 80px;
	}
	.page-top {
		position: relative;
		.page-top-det {
			position: absolute;
			top: 22px;
			@include disFlex(center, space-between);
			width: 84%;
			padding: 0 48px;
			color: #fff;
			.page-status {
				font-size: 36px;
				font-weight: bold;
				margin-bottom: 16px;
			}
			.page-prompt {
				color: #ffdede;
			}
			.page-status-img {
				width: 180px;
			}
		}
	}
	.page-det {
		width: 94%;
		margin: 0 auto;
		position: relative;
		top: -40px;
		.order-msg {
			.order-msg-blo {
				font-size: 28px;
				padding: 20px 0;
				border-top: 1px solid $borderColor;
				.msg-list {
					@include disFlex(flex-start, space-between);
					margin: 8px 0;
					.label {
						width: 40%;
						color: $fontColor3;
					}
				}
			}
			& .order-msg-blo:first-child {
				border-top: none;
			}
		}
		.coupon-wrap {
			.module-det {
				padding: 20px 0;
			}
		}
	}
	// 底部按钮
	.page-btn {
		width: calc(100% - 60px);
		@include disFlex(center, space-between);
		padding: 0 30px;
		.app-price {
			margin-bottom: 8px;
			margin-left: 4px;
		}
		.red {
			width: 270px;
		}
		.default {
			width: 260px;
		}
	}
	// 公共模块
	.module-com {
		border-radius: 10px;
		background-color: #fff;
		padding: 0 20px;
		box-shadow: 0px 6px 16px #ddd;
		margin-bottom: 20px;
		.module-tit {
			padding: 20px 0;
			font-size: 28px;
			font-weight: 600;
			border-bottom: 1px solid $borderColor;
		}
	}
</style>
