<template>
	<view class="">
		<view class="head">
			<u-steps :current='lingd' totalWidth="900rpx" iconSize="12" direction="column" activeColor="#21BBF3"
				inactiveColor="#BFBFBF">
				<view class="" v-for="(item,index) in list" :key="index">
					<u-steps-item :title="item.action_time" :desc="item.order_status_name+':'+item.action">
					</u-steps-item>

				</view>
			</u-steps>

		</view>
		<view class="head" v-if="orderStatus=='已发货'||orderStatus == '已收货'||orderStatus == '已完成'">
			<view class="title">
				物流信息
			</view>
			<view class="PackageItem" v-for="(item,index) in PackageList" :key="index">
				<view class="tip">
					快递公司：{{item.express_company_name}}
				</view>
				<view class="tip">
					快递单号：{{item.delivery_no}}
				</view>
				<u-steps :current="item.trace.list?item.trace.list.length-1:0" totalWidth="900rpx" iconSize="12"
					direction="column" activeColor="rgb(254,106,0)" inactiveColor="#BFBFBF" v-if="item.trace.list">
					<view class="" v-for="(item,index) in item.trace.list" :key="index">
						<u-steps-item :title="item.datetime" :desc="item.remark">
						</u-steps-item>
					</view>

				</u-steps>
				<view class="" v-else>
					{{item.trace.reason}}

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import eventBus from '@/common/js/bus.js'
	export default {
		data() {
			return {
				member_id: '',
				order_id: '',
				list: [],
				PackageList: [],
				lingd: '',
				orderStatus:'',
			};
		},
		onLoad() {
			console.log(this.list, '测试');
			eventBus.$on('record', (data) => {
				console.log(data, '操作日志');
				this.order_id = data.order_id
				this.list = data.data
				this.lingd = data.data.length - 1
				this.member_id = data.member_id
				this.orderStatus = data.orderStatus
				// this.$api.sendRequest({
				// 	url:'/api/salasmanorder/getOrderGoodsOutlogList',
				// 	data:{
				// 		order_id:data.order_id,
				// 		member_id:data.member_id
				// 	},
				// 	success:res=>{
				// 		console.log(res,'操作记录');
				// 	}
				// })
				console.log(data.orderStatus);
				if ((data.orderStatus == "已发货")||(data.orderStatus == "已收货")||(data.orderStatus == "已完成")) {
					this.getPackage()
				}

			})

		},
		onUnload() {
			console.log('离开了');
			eventBus.$off('record')
		},
		methods: {
			getPackage() {
				this.$api.sendRequest({
					url: '/api/salasmanorder/package',
					data: {
						order_id: this.order_id,
						member_id: this.member_id
					},
					success: res => {
						this.PackageList = res.data;
						console.log(res, '物流信息');
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.head {

		width: 702rpx;
		// height: 784rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
		margin: 0 auto 20rpx;
		margin-top: 24rpx;
		padding: 32rpx;

		.title {
			border-bottom: 1rpx #ddd solid;
			padding-bottom: 20rpx;
		}

		.PackageItem {
			padding: 20rpx 0;

			.tip {
				color: black;
				opacity: 0.7;
			}
		}
	}
</style>