<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :border="true" title="物流信息"></el-navbar>
		
		<view class="wrapper" v-if="!isEmpty(express)">
			
			<view class="order">
				<view class="list">
					<view>物流公司</view>
					<view>{{ express.expName }}</view>
				</view>
				<view class="list">
					<view>发货时间</view>
					<view>{{ express.takeTime || "-" }}</view>
				</view>
				<view class="list">
					<view>物流单号</view>
					<view>{{ express.number || "-" }}</view>
				</view>
			</view>
			
			<view class="express">
				<uni-steps :options="express.list" direction="column" :active="stepsActive"></uni-steps>
			</view>
			
		</view>
		
		<el-loading v-model="isLoading"></el-loading>
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { isEmpty } from "@/el-ui/libs/check";
	import { redirectTo } from "@/el-ui/libs/navigate";
	
    const stepsActive = ref(0);
	const isLoading   = ref(true);
	const express     = ref();
	onLoad((option)=>{
		uni.$http.get("order.index/express",{ id: option.order_id || 0 }).then(res=>{
			isLoading.value = false;
			if(res.code){
				express.value = res.data;
				if(res.data.list.length > 0){
					let array = [];
					stepsActive.value = res.data.list.length - 1;
					res.data.list.forEach((item,index)=>{
						array.push({
							title: item.content,
							desc: item.timestamp
						});
					});
					express.value.list = array;
				}
			}else{
				redirectTo('pages/public/empty');
			}
		});
	})
	
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 20rpx;
		
		.order {
			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;
						}
					}
				}
			}
		}
		
		.express {
			border-radius: 15rpx;
			background-color: #fff;
			padding: 20rpx;
			margin-top: 20rpx;
		}
	}
</style>