<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}} <text style="margin-left: 15px;">规格：{{item.varieties}}</text></view>
						<view class="describe">税率：{{item.taxRate}} <text style="margin-left: 15px;">订单商品数量：{{item.count}}</text></view>
						<view class="flex-box">
							<text class="branchNumber">发货数量: </text>
							<step-price width="55" height="32" :value="item.updateCount" @reduce="number=> onNumberChange(number, index)" @plus="number=> onNumberChange(number, index)" @input="number=> onNumberChange(number, index)"></step-price>
						</view>
						<view class="flex-box">
							<text class="branchNumber">单价: </text>
							<step-price width="55" height="32" :value="item.updatOfferPrice" @reduce="number=> onPriceChange(number, index)" @plus="number=> onPriceChange(number, index)" @input="number=> onPriceChange(number, index)"></step-price>
						</view>
						<view class="flex-box" style="line-height: 36px;">
							<text class="branchNumber">金额: </text>
							<text style="color: #B60001;"><text style="font-size: 12px;">￥</text>{{ item.updateAmount }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

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

<script>
import { getOrderDetailByDelivery, saveAccountStatement } from '@/config/api.js'
import stepPrice from '../../components/step-price/step-price.vue';
let receivingId = '';
export default {
	name: 'receivingDetail',
	components: {
		stepPrice
	},
	data() {
		return {
			orderInfo: {},
			goodList: []
		}
	},
	methods: {
		async getRecordDetail() {
			let {content} = await getOrderDetailByDelivery({id: receivingId})
			this.orderInfo = {...content.orderVo}

			let list = content.orderVo.orderDetailVos.map(item=> {
				return {
					...item,
					"updateCount": item.tempReceiveCount,
					"updatOfferPrice": item.offerPrice,
					"updateAmount": item.tempAmount
				}
			})
			// list.forEach(row=> {
			// 	let sendBranchNumber = row.sendBranchNumber.split(',')
			// 	let sendGoodsCount = row.sendGoodsCount.split(',')
			// 	let receiveGoodsCount = row.receiveGoodsCount.split(',')
			// 	row['receiveData'] = []
			// 	sendGoodsCount.forEach((item, index)=> {
			// 		row['receiveData'].push({
			// 			branchNumber: sendBranchNumber[index],
			// 			sendCount: item,
			// 			receiveCount: receiveGoodsCount[index]
			// 		})
			// 	})
			// })
			this.goodList = list;
		},
		onNumberChange(count, index) {
			this.goodList[index].updateCount = count
			this.goodList[index].updateAmount = parseFloat((this.goodList[index].updatOfferPrice * count).toFixed(2))
		},
		onPriceChange(price, index) {
			this.goodList[index].updatOfferPrice = price
			this.goodList[index].updateAmount = parseFloat((this.goodList[index].updateCount * price).toFixed(2))
		},
		submitReceiving() {
			const productInfo = this.goodList.map(item=> {
				return {
					...item,
					"sendGoodsCountOldNew": item.tempReceiveCount + '/' + item.updateCount,
					'offerPriceChangeOldNew': item.offerPrice + '/' + item.updatOfferPrice,
					'amountChangeOldNew': item.tempAmount + '/' + item.updateAmount
				}
			})
			saveAccountStatement({
				orderId: this.orderInfo.id,
				deliveryNoticeId: receivingId,
				productInfo: JSON.stringify(productInfo)
			}).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;
			}
			.flex-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

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

.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>
