<template>
	<view>
		<!-- 模态框 -->
		<view class="cu-modal" :class="show?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl" style="background-color: #ffffff;">
					<view class="text-bold text-lg margin-bottom-sm">物流信息</view>
					
					<view class="cu-timeline" style="max-height: 600upx;overflow-y: auto;">
						<view class="cu-item text-main-color" v-for="(item, index) in flowArr" :key="index">
							<view class="content shadow-blur" style="text-align: left;padding: 15upx 20upx;">
								<view><text style="color: black;">{{item.description}}</text></view>
								<text style="color: #999999;font-size: 24upx;">{{item.time}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action margin-0 flex-sub text-black solid-left" data-modal="deliveryFlowDetail"
						@tap="hideModal">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'deliveryFlowDetail',
		emits: ['confirmFeedback'],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			trackingNumber: {
				type: String
			}
		},
		watch: {
			show: {
				handler(newVal) {
					if(newVal) {
						this.$nextTick(() => {
							this.getFLows()
						})
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				flowArr: []
			}
		},
		methods: {
			async getFLows() {
				const res = await this.$request.getDeliveryFlow(this.trackingNumber)
				this.flowArr = res.data.traces ? res.data.traces.reverse() : [];
			},
			hideModal(e) {
				this.$emit('close', e);
			}
		}
	}
</script>

<style>
</style>
