<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :border="true" title="确认订单"></el-navbar>
		
		<el-empty v-if="isError" mode="order" :text="errorMsg"></el-empty>
		
		<view class="wrapper" v-if="!isEmpty(order) && !isError">
			
			<view class="address">
				<view class="address-box" @click="isAddress = true">
					<view class="icon"><uni-icons color="#ffffff" type="location-filled" size="17" /></view>
					<view class="content">
						<view class="info" v-if="!isEmpty(address)">
							<view>
								<text>{{ address.name }}</text>
								<text>{{ address.mobile }}</text>
							</view>
							<view>{{ address.address }}</view>
						</view>
						<view v-else class="info">请选择收货地址</view>
					</view>
					<view class="arrow">
						<uni-icons color="#cccccc" type="arrowright" size="18" />
					</view>
				</view>
			</view>
			
			<view class="goods">
				
				<view  v-for="(value,index) in order.goods" :key="index">
					<view class="goods-box" v-if="value.order_type == 1">
						<view class="thumb-image">
							<image :src="value.photo"></image>
						</view>
						<view class="goods-info">
							<view class="goods-name">{{ value.goods_name }}</view>
							<view class="goods-sku" v-if="!isEmpty(value.goods_array)">{{ value.goods_array.name }}</view>
							<view class="goods-price">￥<text>{{ value.sell_price }}</text></view>
						</view>
						<view class="num">x{{ value.goods_total_nums }}</view>
					</view>
					<view class="gift-box" v-if="value.order_type == 3">
						<view>[<text>订单赠品</text>]</view>
						<view>{{ value.goods_name }}</view>
						<view>x{{ value.goods_total_nums }}</view>
					</view>
				</view>
				
				<view class="list-wrap">
					<view class="list-box">
						<view>配送方式</view>
						<view>快递物流</view>
					</view>
					<view class="list-box">
						<view>订单备注</view>
						<view>
							<input @input="eventHandleMessage" maxlength="100" placeholder-style="color:#999; font-size:28rpx; text-align: right;" placeholder="建议留言前先与商家沟通" />
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="order">
				<view class="list">
					<view>商品总价 <text>共{{ order.goods.length }}件商品</text></view>
					<view class="price">￥<text>{{ order.real_amount }}</text></view>
				</view>
				<view class="list">
					<view>运费</view>
					<view class="price" v-if="order.real_freight > 0">￥<text>{{ order.real_freight }}</text></view>
					<view class="price" v-else>免运费</view>
				</view>
				<view class="list" v-if="order.discount > 0">
					<view>订单优惠</view>
					<view class="price"><text>订单满额减</text>￥<text>{{ order.discount }}</text></view>
				</view>
				<view class="list">
					<view>优惠券</view>
					<view @click="isCoupon = !isCoupon">
						<text v-if="isEmpty(order.coupon)">无优惠券</text>
						<text v-else-if="!isEmpty(order.coupon) && order.coupon_amount > 0"><text class="price">-￥{{ order.coupon_amount }}</text></text>
						<text v-else>请选择</text>
						<uni-icons color="#cccccc" type="arrowright" size="15" />
					</view>
				</view>
				<view class="list" v-if="order.real_point > 0">
					<view>支付积分</view>
					<view class="price"><text>{{ order.real_point }}</text><text style="font-size: 24rpx">积分</text></view>
				</view>
				<view class="list">
					<view>合计 <text>含运费和优惠</text></view>
					<view class="price">￥<text>{{ order.order_amount }}</text></view>
				</view>
			</view>
			
			<view class="order">
				<view class="list" @click="isInvoice = true">
					<view>发票申请</view>
					<view>
						<text v-if="isEmpty(invoice)">无需开具发票</text>
						<text v-else>
							{{ invoice == 1 ? "个人普通发票" : "企业普通发票" }}
						</text>
						<uni-icons color="#cccccc" type="arrowright" size="15" />
					</view>
				</view>
			</view>
			
		</view>
		
		<view v-if="!isError" class="placeholder"></view>
		<view v-if="!isError" class="footer">
			<view class="wrap">
				<view class="text">合计：<text>￥</text><text>{{ order.order_amount || '0' }}</text></view>
				<view class="btn" :class="{ active: isSubmit }" @click="onSubmit">提交订单</view>
			</view>
		</view>
		
		<coupon-box v-model="isCoupon" :list="order.coupon || []" @change="onEventCoupon" />
		<invoice-box v-model="isInvoice" @change="onEventInvoice" />
		<address-box v-model="isAddress" @change="onEventAddress" />
		<el-loading v-model="isLoading"></el-loading>
	</el-layout>
</template>

<script setup>
	import { onLoad,onShow } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { isEmpty } from "@/el-ui/libs/check";
	import { navigateTo,redirectTo } from "@/el-ui/libs/navigate";
	
	const isLoading = ref(true);
	const message = ref('');
	const options = ref();
	onLoad((option)=>{
		options.value = option;
	});
	
	onShow(()=>{
		getOrderDetail(options.value);
	});
	
	const isError  = ref(false);
	const order    = ref({});
	const errorMsg = ref("订单为空");
	const getOrderDetail = (params)=>{
		uni.$http.get("checkout/detail",params).then(res=>{
			isLoading.value = false;
			if(res.code){
				isError.value = false;
				order.value = res.data;
			}else{
				isError.value = true;
				errorMsg.value = res.msg;
			}
		});
	}
	
	const eventHandleMessage = (event)=>{
		message.value = event.detail.value;
	}
	
	const isCoupon = ref(false);
	const coupon   = ref({});
	const onEventCoupon = (value)=>{
		coupon.value 			= value.data;
		options.value.coupon_id = value.data.id;
		getOrderDetail(options.value);
	}
	
	const isAddress = ref(false);
	const address   = ref({});
	const onEventAddress = (value)=>{
		options.value.address_id = value.id;
		if(!isEmpty(address.value)){
			address.value = value;
			getOrderDetail(options.value);
		}else{
			address.value = value;
		}
	}
	
	const isInvoice = ref(false);
	const invoice   = ref({});
	const onEventInvoice = (value)=>{
		invoice.value = value;
		options.value.invoice_id = value.id;
	}
	
	const isSubmit = ref(false);
	const onSubmit = ()=>{
		if(isSubmit.value){
			return false;
		}
		
		uni.showLoading({ title: "订单提交中...", mask: true });
		isSubmit.value = true;
		options.value.message = message.value;
		uni.$http.post("checkout/create",options.value,{ isLoading: false }).then(res=>{
			uni.hideLoading();
			isSubmit.value = false;
			if(res.code){
				if(order.value.order_amount <= 0){
					redirectTo(`pages/order/detail?id=${res.data}`);
				}else{
					redirectTo(`pages/cart/cashier?pay_type=order&order_id=${res.data}`);
				}
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 0 20rpx 20rpx 20rpx;
		.address {
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 15rpx;
			.address-box {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex: 1;
				.icon {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 50%;
					text-align: center;
					display: inline-block;
					background-image: linear-gradient(90deg, #ef943f, #eb5529);
				}
				.content {
					width: 100%;
					padding: 0 40rpx;
					.info{
						view {
							padding: 5rpx 0;
							font-size: 28rpx;
							&:nth-child(1){
								text {
									&:nth-child(1){
										font-weight: bold;
										font-size: 28rpx;
										padding-right: 20rpx;
									}
									&:nth-child(2){
										font-size: 30rpx;
										color: #333;
									}
								}
							}
						}
					}
				}
			}
		}
		.goods {
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 15rpx;
			.goods-box {
				display: flex;	
				margin-bottom: 20rpx;
				border-bottom: 1px solid #fbfbfb;
				padding-bottom: 10rpx;
				&:last-child {
					padding-bottom: 0;
					margin-bottom: 0;
					border-bottom: 0;
				}
				.thumb-image {
					padding: 0 10rpx;
					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
					}
				}
				.goods-info {
					width: 100%;
					padding: 0 20rpx;
					display: flex;
					flex-direction: column;
					.goods-name {
						min-height: 40rpx;
						max-height: 80rpx; 
						font-size: 27rpx; 
						display: -webkit-box;
						overflow: hidden; 
						word-break:break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.goods-sku {
						padding: 5rpx 0 10rpx 0;
						font-size: 24rpx;
						color: #888;
					}
					.goods-price {
						color: #eb5d2a;
						font-size: 24rpx;
						text {
							font-size: 30rpx;
						}
					}
				}
				.num {
					color: #888;
					font-size: 28rpx;
					padding: 0 10rpx;
				}
			}
			.gift-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 24rpx;
				padding: 10rpx 0;
				view {
					color: #999;
					&:nth-child(1){
						width: 150rpx;
						text {
							font-size: 22rpx;
						}
					}
					&:nth-child(2){
						width: 100%;
						display: -webkit-box;
						overflow: hidden; 
						word-break:break-all; /* 英文强制换行  */
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
					&:nth-child(3){
						width: 50rpx;
						text-align: right;
					}
				}
			}
			.list-wrap {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				.list-box{
					display: flex;
					justify-content: space-between;
					height: 70rpx;
					line-height: 70rpx;
					view {
						
					}
				}
			}
		}
		.order {
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 20rpx;
			.price {
				color: #eb5d2a;
			}
			.list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 28rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-bottom: 1px solid #fbfbfb;
				&:last-child {
					padding-bottom: 0;
					border-bottom: 0;
				}
				view {
					&:nth-child(1){
						text {
							font-size: 24rpx;
							color: #888;
						}
					}
					&:nth-child(2){
						text {
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
	.placeholder {
		width: 100%;
		height: 102rpx;
	}
	.footer {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		border-top: 2rpx solid #eee;
		z-index: 11111;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.wrap {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			align-items: center;
			view {
				&.text {
					font-size: 28rpx;
					text {
						&:nth-child(1){
							font-size: 24rpx;
							color: red;
						}
						&:nth-child(2){
							font-size: 35rpx;
							color: red;
							font-weight: bold;
						}
					}
				}
				&.btn {
					width: 200rpx;
					background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					font-size: 28rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					color: #fff;
					border-radius: 50rpx;
					&.active {
						background: #ccc;
					}
				}
			}
		}
	}
</style>