<template>
	<view :data-theme="theme" class="record-box">
		<!-- #ifndef APP-PLUS || MP -->
		<nav-bar navTitle='发货记录'></nav-bar>
		<!-- #endif -->
		<view class="mp-bg"></view>
		<view class="product-box">
			<view class="acea-row productInfo-box">
				<view class="acea-row productInfo-item" v-for="(item,index) in productInfo" :key="index">
					<span class="num">x{{item.num}}</span>
					<image class="wrapper-img" :src="item.image" mode=""></image>
					<view class="acea-row row-column-between ml20">
						<view class="line1 line1-width f-s-28">
							{{item.productName}}
						</view>
						<view class="f-s-24 color-999">
							{{item.sku}}
						</view>
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="item acea-row row-between">
					<view>发货方式</view>
					<view>{{deliveryInfo.deliveryType=='merchant'?'商家送货':'无需发货'}}</view>
				</view>
				<view class="item acea-row row-between" v-if="deliveryInfo.deliveryType=='noNeed'">
					<view>发货备注</view>
					<view class="text-width wrap-normal">{{deliveryInfo.deliveryMark}}</view>
				</view>
				<view class="item acea-row row-between" v-if="deliveryInfo.deliveryType=='merchant'">
					<view>配送人员</view>
					<view>{{deliveryInfo.deliveryCarrier}}</view>
				</view>
				<view class="item acea-row row-between" v-if="deliveryInfo.deliveryType=='merchant'">
					<view>手机号码</view>
					<view>{{deliveryInfo.carrierPhone}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import navBar from '@/components/navBar';
	import {
		orderInvoiceListInfo
	} from '@/api/order.js';
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	export default{
		components: {
			navBar,
		},
		data(){
			return{
				theme: app.globalData.theme,
				productInfo:[],
				deliveryInfo:{}
			}
		},
		onShow() {
			let that = this;
			that.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: that.bgColor,
			});
		},
		onLoad(options) {
			this.getInfo(options.orderNo,options.index)
		},
		methods:{
			getInfo(orderNo,index){
				orderInvoiceListInfo(orderNo).then(res=>{
					this.deliveryInfo=res.data.invoiceList[index]
					this.productInfo=res.data.invoiceList[index]['detailList']
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	/* 让文本在达到容器宽度时自动换行 */
	.wrap-normal {
		align-items: center;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	}
	.mp-bg {
		top: 0;
		position: fixed;
		left: 0;
		/* #ifdef H5 */
		top: 74rpx;
		/* #endif */
		width: 100%;
		height: 120rpx;
		@include index-gradient(theme);
		padding: 30rpx 30rpx 0 30rpx;
		z-index: 99;
	}
	.color-999{
		color: #999;
	}
	.f-s-28{
		font-size: 28rpx;
	}
	.record-box{
		overflow: hidden;
		.product-box{
			padding: 0 24rpx;
			/* #ifdef H5 */
			margin-top: 20rpx;
			/* #endif */
			/* #ifndef H5 */
			margin-top: 50rpx;
			/* #endif */
			.productInfo-box{
				position: relative;
				z-index: 999;
				padding: 24rpx;
				border-radius: 14rpx;
				background: #fff;
				.productInfo-item{
					position: relative;
					padding: 10rpx 0;
					.wrapper-img{
						width: 130rpx;
						height: 130rpx;
					}
					.line1-width{
						width: 450rpx;
					}
					.num{
						position: absolute;
						right: -40rpx;
						top: 10rpx;
						color: #999;
					}
				}
			}
		}
		.info-box{
			padding:24rpx;
			margin-top: 24rpx;
			background: #fff;
			border-radius: 14rpx;
			.text-width{
				width: 400rpx;
				text-align: right;
			}
			.item{
				padding: 20rpx 0;
			}
		}
		.footer{
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 24rpx;
			background: #fff;
			.update{
				background: #2A7EFB;
				width: 150rpx;
				height: 60rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
				text-align: center;
				color: #fff;
			}
		}
	}
</style>