<template>
	<view class="waybill" @click="$emit('click',WaybillInfo)" v-if="WaybillInfo">
		<view class="waybill-number">
			运单号 {{WaybillInfo.kuaidi.nu}}
		</view>
		<view class="waybill-address">
			<view class="waybill-address-form waybill-address-info">
				<view class="address-user-name">
					{{WaybillInfo.send_address[2]}}
				</view>
				<view class="address-name">
					{{formatDate(WaybillInfo.create_time)}}
				</view>
			</view>
			<view class="waybill-address-status">
				{{'运输中'}}
				<image src="../../static/10箭头@2x.png" mode="" style="width: 100%;height: 12rpx;"></image>
			</view>
			<view class="waybill-address-to waybill-address-info">
				<view class="address-user-name">
					{{WaybillInfo.take_address[2]}}
				</view>
				<view class="address-name">
					{{formatDate(WaybillInfo.kuaidi.data[WaybillInfo.kuaidi.data.length-1].time)}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			WaybillInfo: {
				type: Object,
				default: () => {}
			}
		},
		name: "waybill",
		data() {
			return {
			};
		},
		methods: {
			formatDate(date) {
				console.log(date);
				let dateArr = date.split('-')
				dateArr.splice(0, 1)
				return dateArr.join('-')
			}
		},
	}
</script>

<style scoped lang="scss">
	.waybill {
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 38rpx 49rpx;
		box-sizing: border-box;
		margin: 30rpx 0;

		.waybill-number {
			font-size: 30rpx;

			color: #999999;
			margin-bottom: 36rpx;
		}
	}

	.waybill-address {
		display: flex;

		.waybill-address-info {
			// padding: 0 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 180rpx;
			overflow: hidden;

			.address-user-name {
				width: 100%;
				font-weight: bold;
				font-size: 34rpx;
				white-space: nowrap;
				overflow: hidden;
				text-align: center;
				text-overflow: ellipsis;
			}

			.address-name {
				width: 100%;
				font-size: 12rpx;
				color: #999999;
				white-space: nowrap;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.waybill-address-status {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
</style>