<template>
	<scroll-view class="waybill-info" style="height:200rpx;" :scroll-y="true">
		<template v-if="WaybillInfo">
			<view class="waybill-info-item" v-for="item in [...WaybillInfo.kuaidi.data].reverse()">
				<view class="time-line">

				</view>
				<view class="item-icon">
					<image src="../../static/11快递@2x.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
				</view>
				<view class="item-info">
					<view class="item-status">
						{{getTitle(item.context)}}
					</view>
					<view class="item-time">
						{{item.time}}
					</view>
					<view class="item-status-address">
						{{item.context}}
					</view>
				</view>
			</view>
		</template>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			WaybillInfo: {
				type: Object,
				default: () => {}
			}
		},
		name: "waybill-info",
		data() {
			return {
				getTitle(text) {

					const regex = /【(.*?)】/;

					const matches = regex.exec(text);

					if (matches && matches.length > 1) {
						const extractedText = matches[1]; // 提取括号中的字
						return extractedText
					}
				},
			};
		}
	}
</script>

<style scoped lang="scss">
	.waybill-info {
		flex: 1;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 40rpx;
		min-height: 300rpx;
		padding: 38rpx;
		position: relative;
	}

	.time-line {
		position: absolute;
		height: calc(100% - 72rpx);
		border-left: 1rpx dashed #ccc;
		left: 26rpx;
		top: 38rpx;
	}

	.waybill-info-item {
		display: flex;
		margin-bottom: 60rpx;

		.item-icon {
			margin-right: 20rpx;
		}

		.item-status {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.item-time,
		.item-status-address {
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>