<template>
	<!-- 查看物流 -->
	<view class="page">
		<Loadlogo v-if="!loadlogo" />
		<view v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="header m-btm20">
				<view class="goods_detail dis-flex m-btm20 padding-box-all b-f">
					<view class="goods_image" :style="'background-image:url('+loggDataDetail.goods_logo+')'"></view>
					<view class="goods_text dis-flex flex-dir-column flex-x-between flex-box" >
						<view class="f-28 col-3 m-btm20">{{loggDataDetail.goods_name}}</view>
						<view class="col-9 f-24" v-if="!!loggDataDetail.spec">规格:{{loggDataDetail.spec}}</view>
						<view class="col-9 f-24">数量：{{loggDataDetail.num}}件</view>
					</view>
				</view>
				<view class="loggDataDetail-info m-btm20 padding-box-all b-f">
					<view class="f-24 col-9 m-btm20">快递公司:<text class="col-3 m-left10">{{loggDataDetail.express_name}}</text></view>
					<view class="f-24 col-9">物流单号:<text class="col-3 m-left10">{{loggDataDetail.express_no}}</text> <text style="float: right;color: #4D8CF4;" @click="copy(loggDataDetail.express_no)">点击复制</text></view>
				</view>
			</view>
			<block v-if="loggDataDetail.is_have===1">
				<view class="logis bor-radius-10 b-f m-btm20">
					<view class="p-right-30">
						<view class="logis-list p-top-bom-40">
							<view class="loggis-section">
								<view v-for="(items,index) in loggDataDetail.list" :key="index">
									<view class="loggis-move">
										<view class="dis-flex flex-y-center">
											<block v-if="index===0">
												<view class="Icon-bg">
													<view class="icon-line iconfont icon-check col-f"></view>
												</view>
											</block>
											<block v-else>
												<view class="circle-seg"></view>
											</block>
											<view class="flex-box ">
												<view class="f-24 m-btm10" :class="index===0?'col-3':'col-9'">{{items.AcceptStation}}</view>
												<view class="f-24" :class="index===0?'col-3':'col-9'">{{items.AcceptTime}}</view>
											</view>
										</view>
									</view>
									<view class="logg-dotted" v-if="loggDataDetail.list.length>0&&index<loggDataDetail.list.length-1"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import App from "@/common/js/app.js";
	import Loadlogo from '@/components/template/loadlogo.vue'
	export default {
		data() {
			return {
				order_id: null,
				table_id: null,
				loggDataList: [], // 物流信息列表
				goodsData: [], // 商品信息列表
				loadlogo: false,
				loggDataDetail: {}
			}
		},
		components: {
			Loadlogo
		},
		computed: {

		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getlogDetail(options.order_id,options.table_id)
			this.order_id = options.order_id;
			this.table_id = options.table_id;
		},
		onShow() {

		},
		mounted() {
			
		},
		methods: {
			// 点击复制物流单号
			copy(value){
				//#ifdef H5
					App.clipboard(value); //复制到剪贴板
				//#endif
				uni.setClipboardData({ 
						data: value
				});
				//#ifdef H5
				uni.showToast({
					title:'内容已复制'
				})
				//#endif
			},
			//获取物流数据
			getlogDetail(order_id, table) {
				let _this = this;
				App._post_form('&p=Pay&do=getLogisticsInfo', {
					id: order_id,
					table
				}, (result) => {
					if (result.errno === 0) {
						_this.setData({
							loggDataDetail: result.data
						})
					}
				}, false, () => {
					_this.loadlogo = true;
				});
			}
		}
	}
</script>

<style>
	/**
	 * 头部
	 */
	page {
		background-color: #F9F9F9;
	}

	/* 	.header {
		padding: 46upx 30upx 40upx;
	} */

	.goods_detail .goods_image {
		margin-right: 28upx;
		width: 170upx;
		height: 170upx;
		border-radius: 6upx;
		background-repeat: no-repeat;
		background-size: 170upx 170upx;
		background-position: center;
	}

	/**
	 * 订单物流
	 */
	.logis-title {
		border-bottom: 1px solid #F0F0F0;
	}

	.logis-list .logis-date {
		word-wrap: break-word;
		word-break: normal;
	}

	.Icon-bg {
		width: 30upx;
		height: 30upx;
		line-height: 30upx;
		border-radius: 50%;
		background: #FF4444;
		text-align: center;
		margin: 0 34upx;
		position: relative;
		z-index: 5;
	}

	.icon-line {
		font-size: 28upx !important;
	}

	.loggis-move .address {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.logis-list-header::after {
		content: " ";
		position: relative;
		left: 7%;
		width: 2upx;
		height: 120upx;
		border-left: 1px solid #EEEEEE;
		margin: -46upx 0;
	}

	.pd-left {
		padding-left: 6%;
	}

	.logg-dotted {
		position: relative;
		left: 7%;
		width: 2upx;
		height: 120upx;
		border-left: 1px solid #EEEEEE;
		margin: -46upx 0;
	}

	.circle-seg {
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background: #F0F0F0;
		margin: 0 42upx;
		position: relative;
		z-index: 2;
	}

	.Icon-bg-presen {
		background-color: #FFD940;
		color: #333333 !important;
	}
</style>
