<template>
	<view class="">
		<view class="header">
			<!-- 顶部导航栏 -->
			<z-nav-bar title="物流详情" bgColor="red"></z-nav-bar>
			<u-tabs active-color="#2979ff" inactive-color="#606266" bar-height="6" bar-width="40" v-if="deliverList"
				name="name" :list="deliverList" :is-scroll="false" :current="current" @change="tabchange"></u-tabs>
			<view class="deliverCntent">
				<view class="" v-for="(list, index1) in deliverDetails" :key="index1">
					<view v-show="index1 == current">
					<view class="kuaidiItem">{{list.ShipperName}}{{list.LogisticCode}}</view>
					<view class="item" v-for="(item, index) in list.Traces">
						<view class="flexbox">

							<view class="img_icon "></view>
							<view class="wuliu">
								<view class="time">{{item.AcceptTime}}</view>
								<view class="content">{{item.AcceptStation}}</view>
							</view>
						</view>
					</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-loading color="red" :show="loading"></u-loading> -->
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	// import Loading from '../../'
	import {
		mapState
	} from 'vuex';
	import loginVue from '../user/login.vue';
	export default {
		data() {
			return {
				loading: false,
				orderId: null,
				deliverDetails: [{
					Traces: []
				}],
				current: 0,
				deliverList: [{
					name: null
				}],
				deliverDetailsLength: null
			}
		},
		onLoad(e) {
			this.orderId = e.objId
		},
		onShow() {
			this.getdeliverDetails()
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			tabchange(item) {
				console.log(item)
				this.current = item.index
			},
			// 获取物流
			getdeliverDetails() {
				uni.showLoading()
				this.$http
					.post(`/book/buyorder/queryFMS?orderId=${this.orderId}`)
					.then(res => {
						// console.log(res, '物流信息')
						if (res && res.code === 0) {
							uni.hideLoading()
							this.deliverDetails = res.rntStr
							//console.log(res.rntStr)
							res.rntStr.forEach((item, index) => {
								item.Traces = item.Traces.reverse()
								//	console.log(item)
								this.deliverList[index].name = item.ShipperName
							})
						}
					})
			},



		}
	}
</script>
<style>
	.item:first-child::before {
		background-color: #6fca78 !important
	}
</style>
<style lang="scss" scoped>
	.u-tabs {
		background: #fff
	}

	.xiangqing {
		overflow: hidden;

		img {
			display: block;
			max-width: 100%;
		}
	}

	.kuaidiItem {
		padding: 10px;
		color: #666
	}

	.deliverCntent {
		.img_icon {
			border-left: 2px solid #eee;
		}
		line-height:20px;
		padding: 32rpx;
		position: relative;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-top: 1px solid #eee;
		font-size: 24rpx;
		color:#777;
		.item {
			padding-left: 10px;
			position: relative;
		}	

		.item:before {
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius: 100%;
			background: #eee;
			left: 6px;
			top: 0;
			content: "";
			position: absolute;
		}

		.time {
			color: #888;
			font-size: 14px;
			margin-bottom: 5px
		}

		.content {
			padding-bottom: 14px;
		}
	}

	.flexbox {
		display: flex;
	}

	.img_icon {
		padding-right: 5px;
	}

	.moreBtnF {
		align-items: center;
		padding: 30rpx;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		background-color: rgba(255, 255, 255, .9);
	}
</style>
