<template>
    <view>
        <!-- 物流状态 start -->
        <view class="state" v-if="logistic.length > 0">
            <view class="take">
                <view class="take-name">收件人：{{express.courier_name}}<text>{{express.mobile}}</text></view>
                <view class="take-address">收货地址：{{express.full_address}}</view>
            </view>
            <view class="list">
                <view v-for="(item, index) in logistic" :key="index" class="list-label">
					<view class="list-status">{{item.status}}</view>
                    <view class="list-text">{{item.context}}</view>
                    <view class="list-time">{{item.time}}</view>
                </view>
            </view>
        </view>
        <view class="pack-center" v-else>
            <image src="../../static/icons/store_logistic.png" mode="aspectFill"></image>
            <view>{{message}} </view>
        </view>
    </view>
</template>

<script>
    import { deliverLogistic } from '@/apis/interfaces/store'
    export default {
        data() {
        	return {
        		message : '',
				express	: {},
                logistic: []
        	}
        },
        created() {
            deliverLogistic(this.$Route.query.id).then(res=>{
				this.express  = res.express
				this.logistic = res.logistics
            }).catch(err => {
                this.message = err.message
			})
        },
        methods: {
        	
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #f6f6f6;
    }
    
    // 物流状态
    .state {
        margin-top: $margin;
        .take {
            background: white;
			padding: $padding;
			.take-name{
				font-weight: bold;
				font-size: $title-size + 4;
				text{
					font-weight: normal;
					padding-left: 10rpx;
				}
			}
        }
		.list{
			padding: $padding;
			margin-top: $margin;
			background: white;
			.list-label{
				position: relative;
				padding-left: 50rpx;
				padding-bottom: $padding;
				&::before{
					position: absolute;
					content: " ";
					left: 0;
					top: 16rpx;
					background: $border-color;
					height: 25rpx;
					width: 25rpx;
					border:solid 5rpx rgba($color: white, $alpha: 1);
					box-sizing: border-box;
					border-radius: 50%;
					z-index: 1;
				}
				&::after{
					width: 2rpx;
					background: $border-color;
					content: " ";
					position: absolute;
					height: 100%;
					top: 30rpx;
					left: 12rpx;
				}
				&:first-child::before{
					background: $mian-color;
					border:solid 5rpx rgba($color: white, $alpha: .5);
				}
				&:last-child::after{
					display: none;
				}
				.list-status{
					line-height: 50rpx;
					font-weight: bold;
					font-size: $title-size;
				}
				.list-text{
					color: $text-gray;
				}
				.list-time{
					color: $text-gray-m;
					font-size: $title-size-sm;
				}
			}
		}
    }
    
    // 暂无订单
    .pack-center {
        text-align: center;
        font-size: $title-size-sm;
        color: $text-gray;
        padding-top: 50%;
        image {
            width: $uni-img-size-lg * 2;
            height:$uni-img-size-lg * 2;
            margin: 0 auto $margin;
        }
    }
</style>
