<template>
	<view class="container">
		<view class="message-box">
			<view class="title-box">
				<text class="message">订单信息</text>
			</view>
			<uni-list class="custom-uni-list">
				<uni-list-item title="买家名称" :rightText="orderInfo.buyerName"></uni-list-item>
				<uni-list-item title="买家编码" :rightText="orderInfo.buyerCode"></uni-list-item>
				<uni-list-item title="卖方名称" :rightText="orderInfo.sellerName"></uni-list-item>
				<uni-list-item title="卖家编码" :rightText="orderInfo.sellerCode"></uni-list-item>
				<uni-list-item title="订单类型" :rightText="orderInfo.creditFacilitiesTypeName"></uni-list-item>
				<uni-list-item title="配送方式" :rightText="orderInfo.receiveTypeName"></uni-list-item>
			</uni-list>
			<view class="title-box">
				<text class="message">商品信息</text>
			</view>
			<view class="content-box">
				<view class="product-box" v-for="(item, index) in goodList" :key="item.id">
					<view class="content">
						<view class="name">{{item.productName}}</view>
						<view class="describe">商品编码：{{item.productCode}} 规格：{{item.varieties}}</view>
						<view>
							<view class="box">
								<view class="flex-box">
									<text class="branchNumber">发货数量: {{item.tempSendCount}}</text>
									<view class="receving">
										<text class="branchNumber">本次出库数量：</text>
										<step-price width="55" height="32" :value="item.issueGoodsCount" @reduce="number=> onNumberChange(number, index)" @plus="number=> onNumberChange(number, index)" @input="number=> onNumberChange(number, index)"></step-price>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="upload-box">
			<!-- <view class="upload-title">司机信息</view> -->
			<uni-list class="custom-uni-list">
				<uni-list-item title="接收人" :rightText="orderInfo.customerReceiveInfo.receivePerson"></uni-list-item>
				<uni-list-item title="联系电话" :rightText="orderInfo.customerReceiveInfo.receivePersonPhone"></uni-list-item>
				<uni-list-item title="发货日期" :rightText="orderInfo.deliveryDate"></uni-list-item>
				<uni-list-item title="收货地址" :rightText="orderInfo.customerReceiveInfo.warehouseAddress"></uni-list-item>

				<uni-list-item title="车号" :rightText="billLading.carNumber"></uni-list-item>
				<uni-list-item title="司机名称" :rightText="billLading.billLadingPerson"></uni-list-item>
				<uni-list-item title="司机电话" :rightText="billLading.phone"></uni-list-item>
				<uni-list-item title="身份证" :rightText="billLading.cardId"></uni-list-item>
				<uni-list-item title="提货日期" :rightText="billLading.ladingDate"></uni-list-item>
				<uni-list-item title="仓库" :rightText="orderInfo.deliverWarehouseName"></uni-list-item>
			</uni-list>
		</view>

		<view class="btn-box">
			<button class="btn" @click="submitReceiving">确认出库</button>
		</view>
	</view>
</template>

<script>
import { getOrderDetailByDelivery, updateReceiveCount, uploadFile, receiveGoods, getPageCarrier } from '@/config/api.js'
import stepPrice from '../../components/step-price/step-price.vue';
let receivingId = '';
export default {
	name: 'receivingDetail',
	components: {
		stepPrice
	},
	data() {
		return {
			orderInfo: {},
			billLading: {},
			deliveryInfo: {},
			goodList: [],
			
			driverForm: {
				carNumber: '',
				billLadingPerson: '',
				phone: '',
				cardId: '',
				ladingDate: ''
			}
		}
	},
	methods: {
		async getRecordDetail() {
			let {content} = await getOrderDetailByDelivery({id: receivingId})
			this.orderInfo = {...content.orderVo}
			this.billLading = {...content.billLading}
			this.deliveryInfo = {...content.deliveryNotice}

			let list = content.orderVo.orderDetailVos;
			this.goodList = list;
		},
		uploadImage(path) {
			return new Promise((resolve, reject)=> {
				uploadFile({
					filePath: path,
					name: 'file',
					formData: {                                  //其他需要携带的参数
						'modelType': 'default'
					}
				}).then(({content})=> {
					resolve(content)
				}).catch(err=> {
					reject(err)
				})
			})
		},
		async onNumberChange(count, index) {
			await updateReceiveCount({
				deliveryNoticeId: this.deliveryInfo.id,
				orderDetailId: this.goodList[index].id,
				issueGoodsCount: count
			},{custom: {load: false}})
		},
		submitReceiving() {
			receiveGoods({
				takeType: 1,
				deliveryStatus: 0,
				id: receivingId,
			}).then(res=> {
				setTimeout(()=> {
					uni.showToast({
						title: '出库成功！',
						icon: 'none'
					});
					setTimeout(()=> {
						uni.navigateBack({
							delta: 2
						});
					}, 1500)
				}, 30)
			})
		}
	},
	onLoad(options) {
		receivingId = options.id
		this.getRecordDetail()
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #fff;
	min-height: 100vh;
	padding-bottom: 150rpx;
}
.title-box {
	height: 84rpx;
	padding-left: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.message {
		font-size: 16px;
		color: #99A0AF;
	}
}

.content-box {
	padding: 0 15px;

	.product-box {
		// display: flex;
		padding: 20rpx 0;
		// border-bottom: 1rpx solid #D5E2F3;

		// &:first-of-type {
		// 	border-top: 1rpx solid #D5E2F3;
		// }
		border-top: 1rpx solid #D5E2F3;
		&:not(:last-of-type) {
			border-bottom: 1rpx solid #D5E2F3;
		}

		.content {
			// flex: auto;
			// display: flex;
			// justify-content: space-between;
			// margin-left: 18rpx;

			.name {
				font-size: 28rpx;
				color: #191A23;
				// line-height: 1;
			}

			.describe {
				font-size: 12px;
				color: #99A0AF;
				// line-height: 1;
				margin-top: 10rpx;
			}

			.box {
				margin-top: 10rpx;

				.branchNumber {
					font-size: 28rpx;
					color: #99A0AF;
				}

				.flex-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.receving {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
}

.upload-box {
	border-top: 20rpx solid #F5F5F6;
	padding: 12px 15px 0;
	margin-top: 20rpx;

	.upload-title {
		font-size: 14px;
		color: #191A23;;
	}

	.upload {
		margin-top: 12px;
	}
}

.btn-box {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 8;
	background: #fff;
	padding: 40rpx 30rpx;

	.btn {
		background-color: #DE0000;
		font-size: 14px;
		color: #FFFFFF;
		&::after {
			border-radius: 0;
			border: 0; 
		}
		&.carrier {
			background-color: #1AAD19;
		}
	}
}
.carrier-chose {
	padding: 10px 15px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.delete-text {
		color: #1677FF;
	}
}
.carrier-table-box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	box-sizing: border-box;
	&.header {
		height: 40px;
		background-color: #f5f5f5;
	}
	&.list {
		min-height: 36px;
		border-bottom: 1rpx solid #f5f5f5;
	}
}
</style>
