<template>
	<div class="app-content">
		<div class="page-top">
			<div class="page-top-img">
				<img :src="`${constant.imgUrl}/retail/order/bg.png`" alt />
			</div>
			<div class="page-top-det">
				<div>
					<div class="page-status">{{ data.status | constantfilter('ORDER_STATUS') }}</div>
					<div class="page-prompt" v-if="data.status == 0">请尽快支付哟~</div>
					<div class="page-prompt" v-if="data.status == 1 || data.status == 2">请耐心等待~</div>
				</div>
				<div class="page-status-img">
					<img :src="statusImg" alt />
				</div>
			</div>
		</div>
		<!-- 订单详情 -->
		<div class="page-det">
			<!-- 商品信息 -->
			<div class="module-com">
				<div class="module-tit">商品信息</div>
				<div class="module-det">
					<block v-if="!$util.isEmpty(data.goodsInfoList)">
						<list-module v-for="(items, subIndex) in data.goodsInfoList" :key="subIndex" :info="items" />
					</block>
				</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">{{ data.receiveUserName }}</div>
						</div>
						<div class="msg-list">
							<div class="label">电话</div>
							<div class="value">{{ data.receiveMobile }}</div>
						</div>
						<div class="msg-list">
							<div class="label">地址</div>
							<div class="value">{{ data.receiveFullAddress }}</div>
						</div>
					</div>
					<!--  -->
					<div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">送达时间</div>
							<div class="value">{{ data.reachDate }}</div>
						</div>
						<div class="msg-list">
							<div class="label">贺卡</div>
							<div class="value">{{ data.needCard == 1 ? "需要" : '不需要' }}</div>
						</div>
						<div class="msg-list">
							<div class="label">祝福语</div>
							<div class="value">{{ data.cardInfo || '暂无' }}</div>
						</div>
					</div>
					<!--  -->
					<div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">订单号</div>
							<div class="value">{{ data.orderSn }}</div>
						</div>
						<div class="msg-list">
							<div class="label">时间</div>
							<div class="value">{{ data.addTime | formatTime }}</div>
						</div>
						<div class="msg-list">
							<div class="label">总价</div>
							<div class="value">￥{{ data.prePrice }}</div>
						</div>
						<div class="msg-list">
							<div class="label">运费</div>
							<div class="value">￥{{ data.sendCost }}</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 优惠信息 -->
			<block v-if="data.status == 0">
				<div class="module-com coupon-wrap" v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.member && shopUser.userAsset.getCouponNum">
					<div class="module-tit">优惠信息</div>
					<div class="module-det">
						<app-coupon-sel ref="couponSel" :price="data.prePrice * data.goodsNum" :discountArr="['member', 'coupon']" />
					</div>
				</div>
			</block>
			<block v-else>
				<div class="module-com coupon-wrap" v-if="data.discountAmount && data.discountAmount != '0.00'">
					<div class="module-tit">优惠信息</div>
					<div class="module-det">
						<div class="app-color-3">{{ data.discountType == 0 ? '使用优惠券' : data.discountType == 1 ? '会员打折' : '付款随机优惠' }}</div>
						<div class="app-price">-￥{{ data.discountAmount }}</div>
					</div>
				</div>
			</block>
		</div>
		<!-- 按钮 -->
		<div class="page-btn app-footer">
			<div class="flex-center">
				<span>应付款</span>
				<span class="app-price">
					<span>￥</span>
					<span class="app-size-40">{{ data.prePrice }}</span>
				</span>
			</div>
			<template v-if="data.status == 0">
				<button class="button-com red" @click="payFn">立即支付</button>
			</template>
			<template v-else-if="data.status == 1">
				<button class="button-com middle">填写收花地址</button>
			</template>
			<template v-else-if="data.status == 5">
				<button class="button-com middle" @click="evealFn">评价</button>
			</template>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import ListModule from '@/components/module/app-order-list'
import AppCouponSel from '@/components/app-coupon-sel'
// api
import { getDetail } from '@/api/order'
import { getShopUser } from '@/utils/auth'
export default {
	name: 'order-detail',
	components: {
		ListModule,
		AppCouponSel
	},
	data() {
		return {
			constant: this.$constant,
			data: {}
		}
	},
	computed: {
		...mapGetters({ shopUser: 'getShopUser' }),
		statusImg() {
			let img = ''
			if (this.data.status == 0) {
				img = `${this.$constant.imgUrl}/retail/order/wait-pay.png`
			} else if (this.data.status == 1) {
				img = `${this.$constant.imgUrl}/retail/order/wait-delivery.png`
			} else if (this.data.status == 2) {
				img = `${this.$constant.imgUrl}/retail/order/in-delivery.png`
			} else if (this.data.status == 5) {
				img = `${this.$constant.imgUrl}/retail/order/order-confirm.png`
			}
			return img
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._getDet()
			getShopUser()
		},
		_getDet() {
			let form = {}
			if (this.option.id) {
				form.id = this.option.id
			} else if (this.option.orderSn) {
				form.orderSn = this.option.orderSn
			}
			return getDetail(form).then(res => {
				this.data = res.data
			})
		},
		// operate
		payFn() {
			let data = {
				orderSn: this.data.orderSn,
				totalPrice: this.data.prePrice,
				couponId: 0
			}
			this.$util.pageTo({
				url: '/pages/callback/index',
				query: {
					pagestatus: 1,
					id: this.data.id,
					...data
				}
			})
		},
		evealFn() {
			uni.setStorageSync('orderDetialComment', this.data)
			this.$util.pageTo({
				url: '/pages/order/comment',
				query: {
					id: this.data.id
				}
			})
		}
	}
}
</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: 16px 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>
