<template>
	<view class="container">
		<uni-card :title="shopData.shopName == null ?'暂无':shopData.shopName" thumbnail="/static/images/dingdan/dd0.png">
			<view class="uni-body" v-if="shopData.shopAddress != null">{{shopData.shopAddress}} </view>
		</uni-card>

		<view class="tui-order-item boxbg">
			<view class="content-box">
				<view class="shop-box" style="border-top:5px solid #eee;" v-for="(item,index) in list" :key="index">
					<view class="shop-name" style="position: relative;">
						<img :src="item.productPicture" alt="暂无图片"
							style="width: 140rpx;height: 140rpx;margin: 30rpx 0 0 30rpx;" v-if="item.productPicture">
						<view class="noPic" v-else>暂无图片</view>	
						<view class="shop-productName">
							<view style="color:#FF5809;">{{item.productName}} （{{item.productSn == null ? '暂无':item.productSn}}）</view>
							<view>
								单价:{{item.discountAmount == null ? '暂无':item.discountAmount}} 
								数量:{{item.productCount == null ? '暂无':item.productCount}} 
								总价:{{(item.productCount * item.discountAmount) == null ?'暂无':(item.productCount * item.discountAmount)}}
							</view>
							<view v-if="item.supplierName !=undefined">供应商：{{item.supplierName == null ? '暂无':item.supplierName}}</view>
						</view>
					</view>
					<view class="shop-type">
						<view class="shop-collapse" v-if="item1.productCount != 0"  v-for="(item1,index1) in item.stockLogList1" :key='index1'>
							<text>{{item1.attributeList | sliceMsg}}</text>
							<text>数量：{{item1.productCount}}</text>
							<!-- <u-number-box integer v-if="isReturn" :max="item1.productCount - " :min="0" -->
							<u-number-box integer v-if="isReturn && item1.maxNum != 0" :max="item1.maxNum" :min="0"
								v-model="item1.returnCount"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="tui-goods-info">
				<view class="tui-price-flex tui-size32 tui-pbtm20">
					<view class="tui-flex-shrink">总金额</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ sales.totalAmount == null ?'暂无':sales.totalAmount }}</view>
					</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">实收金额</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ sales.realAmount == null ?'暂无':sales.realAmount }}</view>
					</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">已收金额</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ sales.alreadyEarn == null ?'暂无':sales.alreadyEarn }}</view>
					</view>
				</view>
				
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">其他费用</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ sales.otherExpense == null ?'暂无':sales.otherExpense}}</view>
					</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">备注</view>
					<view class="tui-goods-price">
						<view class="tui-price-large">{{ sales.remark == null ?'暂无':sales.remark}}</view>
					</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">欠款</view>
					<view class="tui-goods-price tui-primary-color">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ sales.noEarn == null ?'暂无':sales.noEarn}}</view>
					</view>
				</view>
				<view class="tui-price-flex tui-size32" v-if="isReturn">
					<view class="tui-flex-shrink">退货金额</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<input type="digit" style="width: 150rpx;text-align: right;border-bottom: 1px solid #eee;" v-model='returnAmount' @input="getReturnA">
						<!-- <view class="tui-price-large">{{ returnAmount}}</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="tui-order-info boxbg" v-if="isgys">
			<view class="tui-order-title">
				退款历史
			</view>
			<view class="tui-order-content">
				<u-collapse :value="[shopList[0].saleId]">
					<u-collapse-item v-for="(item,index) in shopList" :key="index" :title="item.productName"
						:name="item.saleId">
						<view class="u-collapse-content" v-for="(val, index2) in item.stockLogList1" :key="index2">
							{{ val.attributeList.substr(1).substring(0,val.attributeList.substr(1).length-1).replace(/\"/g, "")  }}
							* {{val.productCount}}
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<view class="tui-order-info boxbg">
			<view class="tui-order-title">
				回款历史
			</view>
			<view class="tui-order-content" style="border-bottom: 1px solid #E0E0E0;" v-for="(item,index) in collection" :key="index">	
				<view class="tui-order-flex">
					<view class="tui-item-title">回款金额:</view>
					<view class="tui-item-content">{{ item.amount }}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">操作人:</view>
					<view class="tui-item-content">{{ item.createByName }}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">操作时间:</view>
					<view class="tui-item-content">{{ item.createTime }}</view>
				</view>
			</view>
		</view>
		<view class="tui-order-info boxbg" v-if="isgys">
			<view class="tui-order-title">
				物流信息
			</view>
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单号:</view>
					<view class="tui-item-content">{{ sales.id }}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">物流单:</view>
					<image show-menu-by-longpress
						:src="orderXd.orderPicture"
						@tap="showImage"></image>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">创建时间:</view>
					<view class="tui-item-content">{{ sales.createTime }}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">配送方式:</view>
					<view class="tui-item-content">
						{{ sales.transportType == 0 ?  '物流' : sales.transportType == 1 ?  '快递' : sales.transportType == 2 ?  '自送' : sales.transportType == 3 ?  '拼包':'厢货'   }}
					</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">配送公司:</view>
					<view class="tui-item-content">
						{{ sales.companyName == null ?'暂无':sales.companyName}}
					</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">配送人员:</view>
					<view class="tui-item-content">
						{{orderXd.worker.workerName == null ?'暂无':orderXd.worker.workerName}}
					</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">配送状态:</view>
					<view class="tui-item-content">
						{{sales.status == '0' ?'待抢单' :sales.status == '2' ?'作废' :sales.status == '1' ?'待取货' :sales.status == '3' ?'待送达' :sales.status == '4' ?'已完成' :sales.status == '5' ?'下游客户待退货' :sales.status == '00' ?'退货待抢单' :sales.status == '01' ?'退货待取货' :sales.status == '03' ?'退货待送达' :sales.status == '04' ?'待确认退货' :sales.status == '6' ?'待配货':sales.status == '8' ?'待物流上门':sales.status == '9' ?'已完成' :'挂单'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/components/kk-printer/utils/util.js';
	export default {
		data() {
			return {
				orderByWorkerCandidates: [],
				orderByWorker: '',
				bufferData: '',
				show: false,
				popupShow: false,
				sales: {},
				order: {},
				list: [],
				isReturn: false,
				orderByWorkerList: [],
				inventoryList: [],
				shopList: [],
				editNoPrice: false,
				newEarn: 0,
				qrcodeData: '',
				isgys: true,
				isReturnPrice: 1,
				type: '',
				orderXd:[],
				collection:[],
				lbgName:[],
				returnAmount:0,
				shopData:[]
			}
		},
		filters: {
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name += newObj[as] + '/'
					}
				}
				return name;
			}
		},
		onShow(){
			this.lbgName = JSON.parse(JSON.stringify(this.lbgName))
		},
		onLoad(option) {
			this.tui.request("/app/sale/get/" + option.id, "GET", null, false, false).then((res) => {
				if (res.code == 200 && res.result != null && res.result != undefined) {
					this.sales = res.result.sale
					this.list = res.result.saleDetailDTOList
					for (var i = 0; i < this.list.length; i++) {
						for (var m = 0; m < this.list[i].stockLogList1.length; m++) {
							if (this.list[i].productCount == null) {
								this.list[i].productCount = this.list[i].stockLogList1[m].productCount
							} else {
								this.list[i].productCount += this.list[i].stockLogList1[m].productCount
							}
						}
					}
					this.order = res.result.customer
					this.orderXd = res.result.orderXd
					this.shopData = res.result.shop
					this.getReturnOrder(option.id)
					this.collectionList(option.id)
				} else {
					this.tui.toast(res.message)
				}
			}).catch((res) => {})
		},
		methods: {
			//回款历史
			collectionList(id){
				this.tui.request('/app/dealingRecord/getDealingsRecordList','post', {
					orderId:id
				},false,true).then(res => {
					this.collection = res.result
				}).catch(res => {});
			},
			//退款接口
			getReturnOrder(id) {
				let that = this;
				this.tui.request("/app/return/list", "post", {
					remark: 3,
					saleId: id
				}, false, false).then((res) => {
					if (res.code == 200 && res.result != null && res.result != undefined) {
						if (res.result != '') {
							this.inventoryList = res.result
							let returnDat = new Map();
							this.inventoryList.forEach(item => {
								this.tui.request("/app/return/get/" + item.id, "GET", null, false, false)
									.then((res) => {
										if (res.code == 200 && res.result != null && res.result !=
											undefined) {
											that.returnList.push(res.result)
											that.shopList.push(...res.result.saleDetailDTOList);
											var data = res.result.saleDetailDTOList
											for (let i = 0; i < data.length; i++) {
												for (let m = 0; m < data[i].stockLogList1
													.length; m++) {
													if (returnDat.has(data[i].productId + '-' + data[i]
															.stockLogList1[m].attributeList) == true) {
														returnDat.set(data[i].productId + '-' + data[i]
															.stockLogList1[m].attributeList,
															returnDat.get(data[i].productId + '-' +
																data[i].stockLogList1[m]
																.attributeList) + data[i]
															.stockLogList1[m].productCount)
													} else {
														returnDat.set(data[i].productId + '-' + data[i]
															.stockLogList1[m].attributeList, data[
																i].stockLogList1[m].productCount)
													}
												}
											}
											this.zReturnNum = 0
											this.$nextTick(()=>{
												for (let i = 0; i < that.list.length; i++) {
													for (let z = 0; z < that.list[i].stockLogList1.length; z++) {
														
														that.zReturnNum += that.list[i].stockLogList1[z].productCount
														if (returnDat.has(that.list[i].productId + '-' + that.list[i].stockLogList1[z].attributeList) == true) {
															that.list[i].stockLogList1[z].maxNum = that.list[i].stockLogList1[z].productCount -
																returnDat.get(that.list[i].productId + '-' + that.list[i].stockLogList1[z].attributeList)
														}else{
															that.list[i].stockLogList1[z].maxNum = that.list[i].stockLogList1[z]
																.productCount
														}
													}
												}
												
											})
											
											returnDat.forEach(function(value, key) {
												that.zReturnNum -= value
											})
											
										}
									}).catch((res) => {})
							})
						} else {
							for (let i = 0; i < that.list.length; i++) {
								for (let z = 0; z < that.list[i].stockLogList1.length; z++) {
									that.list[i].stockLogList1[z].maxNum = that.list[i].stockLogList1[z]
										.productCount
								}
							}
						}
					} else {
						this.tui.toast(res.message)
					}
				})
				
			},
			//点击图片放大
			showImage() {
				uni.previewImage({
					urls: [this.orderXd.orderPicture],
					current: this.orderXd.orderPicture
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.btn-wrap {
		width: 164rpx;
		height: 80rpx;
		border-radius: 16upx;
		border: 2upx solid $u-primary;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		padding-bottom: 118rpx;

		.boxbg {
			background-color: #fff;
			margin: 30upx;
			padding: 20upx;
			border-radius: 10upx;
			box-shadow: 0px 1px 10px 2px #e2e2e2;
		}

		.tui-order-item {
			.u-collapse-content {
				display: flex;
				justify-content: space-between;
				line-height: 30px;
			}

			.tui-goods-item {
				width: 100%;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.tui-goods-img {
					width: 180rpx;
					height: 180rpx;
					display: block;
					flex-shrink: 0;
				}

				.tui-goods-center {
					flex: 1;
					padding: 20rpx 8rpx;
					box-sizing: border-box;

					.tui-goods {
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						line-height: 32rpx;
					}

					.tui-goods-name {
						font-weight: 700;
						max-width: 310rpx;
						font-size: 26rpx;
					}

					.tui-goods-attr {
						font-size: 22rpx;
						color: #888888;
						padding-top: 20rpx;
					}

				}

				.tui-price-right {
					text-align: right;
					font-size: 26upx;
					font-weight: 700;
					line-height: 30rpx;
					padding-top: 160rpx;
				}
			}

			.tui-goods-info {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background: #fff;
				line-height: 26px;

				.tui-price-flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.tui-size32 {
					font-size: 32rpx;
					font-weight: 500;
				}

				.tui-size-24 {
					font-size: 24rpx;
				}

				.tui-price-large {
					font-size: 32rpx;

					.lineText {
						text-decoration: line-through;
						font-size: 12px;
						color: #888;
					}
				}

				.tui-flex-shrink {
					flex-shrink: 0;
				}

				.tui-goods-price {
					width: 100%;
					display: flex;
					align-items: flex-end;
					justify-content: flex-end;
					font-size: 24rpx;
				}

				.tui-primary-color {
					color: #EB0909;
				}

				.tui-pbtm20 {
					padding-bottom: 20rpx;
				}

			}
		}

		.tui-order-info {
			margin-top: 20rpx;
		}
	}






	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}









	.tui-size24 {
		padding-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #888;
	}




	.tui-order-title {
		position: relative;
		font-size: 28upx;
		line-height: 28upx;
		padding-left: 16upx;
		box-sizing: border-box;
	}

	.tui-order-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-left: 8upx solid $u-primary;
		height: 120%;
		border-radius: 4upx;
	}

	.tui-order-content {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-order-flex {
		display: flex;
		padding-top: 18rpx;
	}

	.tui-order-flex:first-child {
		padding-top: 0
	}

	.tui-item-title {
		width: 132rpx;
		flex-shrink: 0;
	}

	.tui-item-content {
		color: #666;
		line-height: 32rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-btn-mr {
		width:130rpx;
		height: 60rpx;
		background: #088FEB;
		color: #fff;
		border-radius: 10px;
		line-height: 60rpx;
		text-align: center;
		margin-right: 30rpx;
	}

	.tui-contact {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.tui-contact image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}
	.content-box {
		width: 100%;
		height: auto;
		background: #fff;
		margin-bottom: 20rpx;
	
	}
	.shop-box {
		width: 95%;
		margin: 0 auto;
	}
	.shop-name {
		width: 100%;
		height: 200rpx;
		line-height: 80rpx;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
	}
	.shop-productName {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
	}
	
	.shop-productName view {
		height: 55rpx;
	}
	.shop-collapse {
		display: flex;
		height: 80rpx;
		font-size: 26rpx;
		line-height: 80rpx;
	}
	
	.shop-collapse text {
		flex: 1;
		text-align: center;
		padding-right: 40rpx;
		border-right: 1px solid #eee;
	}
	.noPic{
		border-radius: 10px;
		width: 140rpx;
		height: 140rpx;
		margin: 30rpx 0 0 30rpx;
		text-align: center;
		line-height: 140rpx;
		color: #777;
		background: #eee;
	}
</style>