<template>
	<view class="express">
		<view class="status-box">
			<view class="item">
				<view class="name">快递公司：</view>
				<view class="val">{{ express }}</view>
			</view>
			<view class="item">
				<view class="name">运单号：</view>
				<view class="val">{{ express_no }}</view>
				<view style='margin-left: 20px;'>
					<u-button size="mini" shape="circle" @click="paste(express_no)">复制</u-button>
				</view>
			</view>
		</view>
		<view style="margin-top: 40rpx;background: #fff;padding: 40rpx;border-radius: 20rpx;">
			<u-time-line>
				<u-time-line-item nodeTop="2">
					<template v-slot:node>
						<view class="u-node meudim" :style="{ background: mainColor, color: '#FFF' }">收</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-desc" style="padding-bottom: 60rpx;margin-top: 5rpx;font-size: 26rpx;">收货地址：{{address}}</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item v-for="(x, i) in d" :key="i">
					<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
					<template v-slot:content>
						<view style="padding-bottom: 30rpx;" :style="{color:(i==0)?'#000 !important':'gray'}">
							<view class="u-order-desc">{{ x.AcceptStation!=null? x.AcceptStation:'' }}</view>
							<view class="u-order-desc">{{ x.Remark !=null? x.Remark:''}}</view>
							<view class="u-order-time">{{ x.AcceptTime !=null? x.AcceptTime:''}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainColor: "",
				d: [],
				loading: false,
				last: {},
				express: '',
				express_no: '',
				address: '',
			};
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: "物流信息",
			});
			this.mainColor = this.$uiConfig.mainColor;
			this.express = option.express || "圆通速递";
			this.express_no = option.no || "YT2042624009816";
			this.address = option.address || "四川成都市高新西区万景峰二期";
			this.id = option.id || 0;
			this.init(this.id, this.express_no);
		},
		methods: {
			init(id, express_no) {
				this.request2({
						url: "/api/AppletOrder/GetOrderExpressInfo",
						data: {
							ExpressId: id,
							ExpressNumber: express_no,
						},
					},
					(res) => {
						this.d = res.data;
					}
				);
			},
			paste(value) {
				uni.setClipboardData({
					data: value,
				});
			},
		},
	};
</script>

<style>
	.express {
		min-height: 100vh;
		background: #f5f5f5;
		font-family: "aaa";
	}

	.express .status-box {
		background: #fff;
		padding: 60rpx 40rpx;
		padding-bottom: 0;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.express .status-box .item {
		display: flex;
		align-items: center;
		padding-bottom: 40rpx;
	}

	.express .status-box .item .name {
		font-size: 24rpx;
		color: #888;
		width: 120rpx;
		margin-right: 40rpx;
	}

	.express .status-box .item .val {
		font-family: "aaa";
		font-size: 28rpx;
		color: #000;
		font-weight: 600;
		width: 1rpx;
		flex: 1;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-node.meudim {
		width: 40rpx;
		height: 40rpx;
		font-size: 24rpx;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.u-order-desc {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.u-order-time {
		font-size: 26rpx;
	}
</style>
