<template>
	<view class="content flex flex_column">
		<u-navbar back-text="待补货产品" :border-bottom="false">
			<view slot='right' style="padding: 0 30upx;" v-if="chooseList.length" @click="toChooseProduct">
				<u-icon name="chuangjiandingdan" custom-prefix="iscm-icon"></u-icon>
				<text style="margin-left: 6rpx;">选择产品</text>
			</view>
		</u-navbar>
		<view class="searchBar">
			<view class="p-title flex align_center">
				<text></text>
				<view class="shelfName">
					<view>{{nowData.shelfName}}</view>
				</view>
			</view>
		</view>
		<!-- 已选配件 购物车 -->
		<div class="cpb_cart-box">
			<div class="cpb_cart-list">
				<view 
				v-for="(item, index) in chooseList" 
				:key="'cpb_'+item.id" 
				>
				<view class="nav-right-item flex align_center">
					<view class="uni-col-1" @click="delDetail(item,index)">
						<u-icon name="close-circle" color="#999" size="35"></u-icon>
					</view>
					<view class="uni-col-9 flex">
						<view class="item-imgs">
							<u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image>
						</view>
						<view class="item-info">
							<view class="item-name">
								<text>{{item.shelfPlaceCode}}</text>
								{{item.productCode}}
							</view>
							<view class="item-name">
								{{item.productName}}
							</view>
							<view class="item-detail">
								<view class="item-detail-info align_center flex justify_between">
									<view></view>
									<view class="flex justify_end">
										<view class="item-detail-text">
										最大库容:<text class="pnums">{{item.maxQty||0}}</text>
										货架库存:<text class="pnums">{{item.qty||0}}</text>
										门店库存:<text class="pnums">{{item.qplsStockQty||0}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="nav-right-item">
					<view class="item-detail">
						<view class="item-detail-info">
							<view class="flex justify_between">
								<view class="item-detail-text flex">
									<view v-if="item.replenishBillQty">补货在途:<text class="pnums1">{{item.replenishBillQty||0}}</text></view>
									<view v-if="item.recallBillQty">调回在途:<text class="pnums1">{{item.recallBillQty||0}}</text></view>
								</view>
								 <view class="item-detail-text">
									补货数量:
									<u-number-box 
									v-model="item.replenishQty" 
									:index="'cart_'+item.id" 
									:min="1"
									@change="numsChange(item)"
									:max="999999"></u-number-box>
								 </view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="chooseList.length==0">
				<view class="nodata">
					暂无产品,请点击 
					<view>
						<text @click="toChooseProduct">选择产品</text>
					</view>
				</view>
			</view>
			</div>
		</div>
		<!-- 底部栏 -->
		<view class="footer-bar flex align_center justify_between">
			<view class="f-left flex align_center">
				<view>
					已选<text>{{totalCategory}}</text>款/<text>{{totalQty}}</text>件
				</view>
				<view v-if="chooseList.length" style="padding-left: 20upx;">
					<text @click="clearDetail">清空列表</text>
				</view>
			</view>
			<view class="f-btns">
				<u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >创建补货单</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryProductListForReplenish } from '@/api/shelf'
	import { saveMainAndDetail } from '@/api/shelfReplenish'
	import { clzConfirm } from '@/libs/tools'
	export default {
		data() {
			return {
				nowData:null,
				detail:null,
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff'
				},
				chooseList: [],
				tempData: null,
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				this.toChooseProduct()
			}
		},
		onLoad(opts) {
			const _this = this
			this.nowData = JSON.parse(decodeURIComponent(opts.data));
			uni.$on("chooseDbhProduct",function(data){
				_this.chooseList = _this.chooseList.concat(data).sort(function(a,b){
					return (a.shelfPlaceCode+'').localeCompare(b.shelfPlaceCode+'');
				});
			})
		},
		computed: {
			totalCategory () {
			  return this.chooseList.length
			},
			totalQty () {
			  let ret = 0
			  this.chooseList.map(item => {
			    ret = ret + item.replenishQty
			  })
			  return ret
			},
			chooseKey(){
				let ret = []
				this.chooseList.map(item => {
				  ret.push(item.id)
				})
				return ret
			}
		},
		methods: {
			toChooseProduct(){
				this.nowData.chooseKey = this.chooseKey
				uni.navigateTo({
					url: "/pages/soldOut/chooseProduct?data="+encodeURIComponent(JSON.stringify(this.nowData))
				})
			},
			// 创建补货单
			creatOrder(data){
				uni.showLoading({
					title:"正在保存.."
				})
				stockCheckSave({
					 shelfSn: this.nowData.shelfSn,
					 totalCategory: this.nowData.totalCategory,
					 totalStockQty: this.nowData.totalStockQty,
					 totalFreezeQty: this.nowData.totalFreezeQty
				}).then(res => {
					 if(res.status == 200){
						 this.detail = res.data || null
						 this.stockCheckSn = res.data.stockCheckSn
					 }else{
						 uni.hideLoading()
					 }
				})
			},
			numsChange(item){
				this.chooseList.splice()
			},
			// 删除购物车产品
			delDetail(item,i){
				console.log(item.id,i)
				const index = this.chooseList.findIndex(k => k.id == item.id)
				this.chooseList.splice(index,1)
				// 全部清空
				if(this.chooseList.length==0){
					this.clearChoose()
				}
			},
			// 空列表
			clearDetail(){
				const _this = this
				clzConfirm({
				  title: '提示',
				  content: '确认要清空列表吗?',
				  success (ret) {
					if (ret.confirm || ret.index == 0) {
						_this.clearChoose()
					}
				  }
				})
			},
			// 清空已选数据
			clearChoose(){
				this.chooseList = []
			},
			// 提交
			submitOrder(){
				if(this.totalCategory){
					this.handleSave()
				}else{
					uni.showToast({
						icon: 'none',
						title: '请先添加产品'
					})
				}
			},
			handleSave () {
			  const data = this.chooseList
			  const dataList = []
			  data.map(item => {
			    dataList.push({
			      shelfPlaceSn: item.shelfPlaceSn,
			      shelfPlaceCode: item.shelfPlaceCode,
			      productSn: item.productSn,
			      productCode: item.productCode,
			      qty: item.replenishQty
			    })
			  })
			  this.showLoading("正在提交...")
			  // 开始提交
			  saveMainAndDetail({
			    shelfSn: this.nowData.shelfSn,
			    dealerSn: this.nowData.dealerSn,
			    detailList: dataList
			  }).then(res => {
			    if (res.status == 200) {
			      this.toashMsg(res.message)
				  uni.redirectTo({ url: "/pages/replenishmentManage/outWarehousing?sn="+res.data.replenishBillSn })
			    }
				uni.hideLoading()
			  })
			},
		}
	}
</script>

<style lang="less">
.content{
	height: 100vh;
	width: 100%;
	background: #fff;
	.footer-bar{
		background-color: #f8f8f8;
		padding: 20upx;
		.active{
			background-color: #0485F6;
		}
		.f-left{
			color: #666;
			flex-grow: 1;
			> view{
				text{
					color: red;
					margin: 0 5rpx;
				}
			}
		}
		.f-btns{
			button{
				width: 200upx;
			}
		}
	}
	.nodata{
		padding: 100rpx 50rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		color: #999;
		> view{
			position: relative;
			text{
				color: #00aaff;
				margin-left: 10rpx;
			}
		}
	}

	.searchBar{
		padding: 0 0.8rem 0.3rem;
		.p-title{
			padding: 0 15rpx;
			display: flex;
			align-items: center;
			color: #222;
			font-size: 30rpx;
			> text{
					display: block;
					height: 30rpx;
					width: 6rpx;
					background: #0485F6;
					margin-right: 10rpx;
					border-radius: 10rpx;
				}
			.shelfName{
				flex-grow: 1;
				font-weight: bold;
				width: 80%;
				> view{
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.btns{
				width:100rpx;
				text-align: right;
				font-size: 28rpx;
				color: #0485F6;
			}
		}
	}
	// 购物车
	.cpb_cart-box{
		flex-grow: 1;
		width: 100%;
		overflow: auto;
		.cpb_cart-list{
			padding: 20rpx 0;
			overflow: auto;
			flex-grow: 1;
			> view{
				margin-bottom: 20rpx;
			}
			.nav-right-item{
				padding: 0 30upx;
				&:last-child{
					border-bottom:2rpx solid #eee;
				}
			}
			.item-name{
				font-size: 28rpx;
				text{
					background: rgba(3, 54, 146, 0.15);
					color: #1c588a;
					border-radius: 1em;
					font-size: 26rpx;
					padding: 0 0.5em;
					margin-right: 10upx;
				}
				margin-top: 10upx;
			}
			.item-info{
				padding-left: 0.8em;
				flex-grow: 1;
			}
			.item-detail{
				.item-detail-info{
					padding: 10upx 0 4upx;
					font-size: 24upx;
					.pnums{
						margin-right: 10rpx;
						color: #333;
					}
					.pnums1{
						margin-right: 10rpx;
						color: red;
					}
					> view{
						padding-bottom: 10rpx;
						align-items: center;
						.item-detail-text{
							color: #999;
							margin-left: 20upx;
						}
					}
				}
			}
		}
	}
}
</style>