<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :border="true" title="订单详情" :autoBack="false" @left="onBackHome"></el-navbar>
		
		<view class="wrapper" v-if="!isEmpty(order)">
			
			<view class="address">
				<view class="address-box">
					<view class="icon"><uni-icons color="#ffffff" type="location-filled" size="17" /></view>
					<view class="content">
						<view class="info">
							<view>
								<text>{{ order.address.name }}</text>
								<text>{{ order.address.mobile }}</text>
							</view>
							<view>{{ order.address.address }}</view>
						</view>
					</view>
					<view class="arrow"></view>
				</view>
			</view>
			
			<view class="goods">
				
				<view class="goods-box" v-for="(value,index) in order.goods" :key="index">
					<view class="thumb-image">
						<image :src="value.photo"></image>
					</view>
					<view class="goods-info">
						<view class="goods-name">
							<text class="gift" v-if="value.type == 2">[赠品]</text>
							<text>{{ value.goods_name }}</text>
						</view>
						<view class="goods-sku" v-if="!isEmpty(value.spec)">{{ value.spec }}</view>
						<view class="goods-price">￥<text>{{ value.sell_price }}</text></view>
					</view>
					<view class="num">x{{ value.goods_total_nums }}</view>
				</view>
				
			</view>
			
			<view class="order" v-if="inArray(order.active,[5,6,7]) && !isEmpty(order.express_name)">
				<view class="list">
					<view>物流公司</view>
					<view><text>{{ order.express_name }}</text></view>
				</view>
				<view class="list">
					<view>物流单号</view>
					<view><text>{{ order.express_no || "-" }}</text></view>
				</view>
				<view class="list">
					<view>发货时间</view>
					<view><text>{{ order.send_time }}</text></view>
				</view>
				<view class="list" v-if="order.active == 5">
					<view>物流信息</view>
					<view><text class="btn" @click="navigateTo(`/pages/order/express?order_id=${order.id}`)">查看物流</text></view>
				</view>
			</view>
			
			<view class="order">
				<view class="list">
					<view>订单状态</view>
					<view><text style="color: red;">{{ order.text }}</text></view>
				</view>
				<view class="list">
					<view>订单编号</view>
					<view><text>{{ order.order_no }}</text></view>
				</view>
				<view class="list">
					<view>下单时间</view>
					<view><text>{{ order.create_time }}</text></view>
				</view>
				<view class="list">
					<view>订单留言</view>
					<view><text>{{ order.message || "-" }}</text></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">￥<text>{{ order.real_freight }}</text></view>
				</view>
				<view class="list">
					<view>实付款</view>
					<view class="price">￥<text>{{ order.order_amount }}</text></view>
				</view>
			</view>
			
		</view>
		
		<view class="placeholder"></view>
		<view class="footer" v-if="inArray(order.active,[1,2,3,5,7])">
			<view class="wrap">
				<view v-if="inArray(order.active,[1])" class="btn" @click="navigateTo(`/pages/cart/cashier?pay_type=order&order_id=${order.id}`)">去支付</view>
				<view v-if="inArray(order.active,[2])" class="btn white" @click="onCancel">申请退款</view>
				<view v-if="inArray(order.active,[3,5])" class="btn white" @click="navigateTo(`/pages/refund/detail?order_id=${order.id}`)">{{ order.active == 5 ? "申请退款" : "退款详情" }}</view>
				<view v-if="inArray(order.active,[5])" class="btn white" @click="onDelivery">确认收货</view>
				<view v-if="inArray(order.active,[7])" class="btn" @click="navigateTo(`/pages/order/evaluate?order_id=${order.id}`)">订单评价</view>
			</view>
		</view>
		
		<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,inArray } from "@/el-ui/libs/check";
	import { navigateTo,redirectTo } from "@/el-ui/libs/navigate";
	
	const isLoading = ref(true);
	const options = ref();
	onLoad((option)=>{
		options.value = option;
	});
	
	onShow(()=>{
		getOrderDetail(options.value);
	});
	
	const order = ref({});
	const getOrderDetail = (params)=>{
		uni.$http.get("order.index/detail",params).then(res=>{
			isLoading.value = false;
			if(res.code){
				order.value = res.data;
			}
		});
	}
	
	const onDelivery = ()=>{
		uni.$layer.showModal("您确定已收到货物吗？").then(()=>{
			uni.$http.post("order.index/delivery",{ id: order.value.id }).then(res=>{
				if(res.code){
					uni.$layer.showToast("操作成功");
					getOrderDetail(options.value);
				}else{
					uni.$layer.showToast(res.msg);
				}
			});
		});
	}
	
	const onCancel = ()=>{
		uni.$layer.showModal("您确定要申请退款吗？").then(()=>{
			uni.$http.post("order.index/cancel",{ id: order.value.id }).then(res=>{
				if(res.code){
					uni.$layer.showToast("操作成功");
					getOrderDetail(options.value);
				}else{
					uni.$layer.showToast(res.msg);
				}
			});
		});
	}
	
	const onBackHome = ()=>{
		navigateTo("pages/order/index?type=all");
	}
	
</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;
						.gift {
							font-size: 22rpx;
							color: #eb5d2a;
						}
					}
					.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;
				}
			}
			.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;
						}
						.btn {
							padding: 10rpx 20rpx;
							border: 1px solid #ddd;
							border-radius: 20rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
	.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);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.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, #ff6335, #f9211c);
					font-size: 28rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					color: #fff;
					border-radius: 50rpx;
					&.white {
						background: #fff;
						color: #333;
						border: 1px solid #eee;
					}
				}
			}
		}
	}
</style>