<template>
	<view class="content flex flex_column">
		<view class="searchBar">
			<view class="p-title flex align_center">
				<text></text>
				<view class="shelfName">
					<view>{{nowData.shelfName}}</view>
				</view>
				<view class="btns" @click="showTab = true">筛选<u-icon size="20" name="arrow-down"></u-icon></view>
			</view>
			<view class="search flex align_center">
				<view class="input">
					<u-search 
					v-model="queryWord" 
					@custom="getpartList" 
					@search="getpartList" 
					@clear="clearSearch" 
					@input="$u.debounce(changeSearch, 800)"
					bg-color="#fff" 
					:show-action="false"
					placeholder="请输入产品编码或名称搜索"></u-search>
				</view>
				<view class="icon" @click="toScan">
					<u-icon name="scan"></u-icon>
				</view>
			</view>
		</view>
		<view class="check-list">
			<productList ref="productList" noDataText="暂无产品" @updateNums="updateNums" @allChecked="allCheckedCallback"></productList>
		</view>
		<!-- 底部栏 -->
		<view class="footer-bar flex align_center">
			<view class="f-left">
				<u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
			</view>
			<view class="f-mid" @click="openCart">
				<view>
					已选<text>{{totalCategory}}</text>款/<text>{{totalQty}}</text>件
				</view>
				<view>
					查看明细 <u-icon name="arrow-up"></u-icon>
				</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>
		<!-- 已选配件 购物车 -->
		<div class="cpb_cart-mask" v-if="showCart">
			<div class="cpb_cart-box">
				<div class="cpb_close flex align-center justify_center" @click="showCart=false">
					<u-icon name="close"></u-icon>
				</div>
				<div class="cpb_cart-tit">
					<view>已选配件</view>
					<view class="cpb_heji flex align_center justify_between">
						<text @click="clearDetail">清空列表</text>
					</view>
				</div>
				<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-11 flex">
							<view class="uni-col-2">
								<u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
							</view>
							<view class="item-info uni-col-9">
								<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" 
										@minus="cartChangeNums" 
										@plus="cartChangeNums" 
										@blur="cartChangeNums"
										:index="'cart_'+item.id" 
										:min="1"
										:max="999999"></u-number-box>
									 </view>
								</view>
							</view>
						</view>
					</view>
				</view>
				</div>
			</div>
		</div>
		<!-- 筛选项 -->
		<u-popup v-model="showTab" mode="right" width="70%">
			<view class="tabBox flex flex_column">
				<view class="tabs">
					<u-checkbox-group wrap @change="checkboxGroupChange">
						<u-checkbox 
							v-model="item.checked" 
							v-for="(item, index) in queryKeys" :key="index" 
							:name="item.code"
						>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="btns">
					<u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button>
					<u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="changeSearch">查询</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { queryProductListForReplenish } from '@/api/shelf'
	import { saveMainAndDetail } from '@/api/shelfReplenish'
	import productList from './productList.vue'
	import { clzConfirm } from '@/libs/tools'
	export default {
		components: {
			productList
		},
		data() {
			return {
				queryWord: '',
				nowData:null,
				detail:null,
				pageNo:1,
				pageSize: 20,
				total: 0, // 列表总数
				noDataText: '暂无产品',
				status: 'loading',
				partList: [],
				allChecked: false,
				showTab: false,
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff'
				},
				orderTotal: 0,
				showCart: false,
				chooseList: [],
				tempData: null,
				queryKeys: [
					{
						name: '库存充足',
						code: 'stockEnough',
						checked: false
					},
					{
						name: '部分缺货',
						code: 'portionStockout',
						checked: false
					},
					{
						name: '全部缺货',
						code: 'allStockout',
						checked: false
					}
				],
				stockStateList:[]
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				uni.navigateTo({
					url: '/pages/stockCheck/checkRecord?shelfSn='+this.nowData.shelfSn
				})
			}
		},
		onBackPress(e) {
		  if(this.showTab||this.showCart) {  
			this.showTab = false;
			this.showCart = false;
			return true;  
		  } 
		},
		onLoad(opts) {
			this.nowData = JSON.parse(decodeURIComponent(opts.data));
			this.getpartList()
		},
		computed: {
			totalCategory () {
			  return this.chooseList.length
			},
			totalQty () {
			  let ret = 0
			  this.chooseList.map(item => {
			    ret = ret + item.replenishQty
			  })
			  return ret
			}
		},
		methods: {
			checkboxGroupChange(e) {
				console.log(e);
				this.stockStateList = e
			},
			// 全选
			allCheckeChange(e){
				this.$refs.productList.allSelect(e.value)
				this.chooseList = this.$refs.productList.getAllChecked()
				if(!e.value){
					this.showCart = false
				}
			},
			allCheckedCallback(val){
				this.allChecked = val
				this.chooseList = this.$refs.productList.getAllChecked()
			},
			// 创建补货单
			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()
					 }
				})
			},
			// 打开购物车
			openCart(){
				if(this.totalCategory){
					this.chooseList = this.$refs.productList.getAllChecked()
					this.showCart = !this.showCart
				}else{
					uni.showToast({
						icon: 'none',
						title: '请先添加产品'
					})
				}
			},
			// 删除购物车产品
			delDetail(item,i){
				console.log(item.id,i)
				this.$refs.productList.setChecked(item.id,false)
				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 = []
				this.showCart = false
				this.allChecked = false
				if(this.$refs.productList){
					this.$refs.productList.allSelect(false)
				}
			},
			updateNums(){
				this.chooseList = this.$refs.productList.getAllChecked()
			},
			// 修改数量
			cartChangeNums(v){
				this.$refs.productList.changeNums(v.index.split('_')[1],v.value)
				this.chooseList.splice()
			},
			clearSearch(){
				this.queryWord = ''
				this.changeSearch()
			},
			handleClear(){
				this.stockStateList = []
				this.queryKeys.map(item => item.checked = false)
				this.changeSearch()
			},
			changeSearch(){
				this.pageNo = 1
				this.partList = []
				this.getpartList()
			},
			// 获取数字货架列表
			getpartList(){
				const _this = this
				let params = {
					shelfSn: this.nowData.shelfSn,
					queryWord: this.queryWord,
					stockStateList: this.stockStateList
				}
				_this.clearChoose()
				_this.partList = []
				_this.$refs.productList && _this.$refs.productList.setData(_this.partList)
				_this.status = 'loading'
				uni.showLoading({
					mask:true,
					title:"正在加载..."
				})
				queryProductListForReplenish(params).then(res => {
					if(res.status == 200){
						let list = res.data
						if (list && list.length){
							_this.partList = list
						} else {
							_this.partList = list || []
						}
					}else{
						_this.partList = []
					}
					this.showTab = false
					this.$refs.productList.setData(_this.partList)
					setTimeout(()=>{
						uni.hideLoading()
					},this.partList.length*40)
				})
			},
			// 提交
			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()
			  })
			},
			// 扫描
			toScan(){
				this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
				this.mpaasScanModule.scan(
				{
					"scanMode":"Customized",
					"scanStyle":{
						"scanFrameSizePlus":{"width":250,"height":250},
						"scanFrameSize":200,
						"scanLight":"visible",
						"scanText":"对准条形码/二维码进行识别",
						"scanTitle":"扫码搜索货位产品",
					}
				},
				(result) => {
					if(result.scanStatus == 1){
						this.scanResult(result)
					}
				})
			},
			// 扫描结果
			scanResult(data){
				// 二维码
				if(data.scanType == 'QRCODE'){
					const ret = data.scanValue.split("&")
					this.queryWord = ret[1] // 产品编码
				}else{
					this.queryWord = data.scanValue
				}
				this.stockStateList = []
				this.getpartList()
			}
		}
	}
</script>

<style lang="less">
.content{
	height: 100vh;
	width: 100%;
	background: #fff;
	.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;
			}
		}
		.search{
			margin-top: 15upx;
			padding: 0.1rem;
			border-radius: 50rpx;
			border:1rpx solid #eee;
			.input{
				flex-grow: 1;
				padding: 4rpx;
			}
			.icon{
				width: 13%;
				text-align: center;
				font-size: 46rpx;
				color: #999;
			}
		}
	}
	.check-list{
		padding: 0 0.8rem;
		flex-grow: 1;
		overflow: auto; 
	 }
	.footer-bar{
		background-color: #f8f8f8;
		padding: 20upx;
		.f-left{
			color: #fff;
		}
		.active{
			background-color: #0485F6;
		}
		.f-mid{
			flex-grow: 1;
			color: #666;
			> view{
				padding: 0 5upx;
				&:first-child{
					text{
						color: red;
					}
				}
				&:last-child{
					font-size: 0.8rem;
				}
			}
		}
		.f-btns{
			button{
				width: 200upx;
			}
		}
	}
	// 筛选
	.tabBox{
		height: 100vh;
		.tabs{
			overflow: auto;
			padding: 20rpx;
			> view{
				flex-wrap: wrap;
				justify-content: space-between;
				> view{
					width: 98%;
					border: 1rpx solid #eee;
					padding: 15rpx;
					border-radius: 50rpx;
					text-align: center;
					margin-bottom: 15rpx;
					/deep/ .u-checkbox__label{
						flex-grow: 1;
					}
				}
				&:first-child{
					> view{
						width: 100%;
					}
				}
			}
		}
		.btns{
			display: flex;
			padding: 40upx 20upx 20upx;
			justify-content: space-between;
			.handle-btn {
				font-size: 28upx;
			}
		}
	}
	
	// 购物车
	.cpb_cart-mask{
		position: fixed;
		width: 100%;
		background: rgba(0,0,0,0.5);
		z-index: 900;
		bottom: 100rpx;
		top: 0;
	}
	.cpb_cart-box{
		background-color: #fff;
		position: absolute;
		width: 100%;
		z-index: 1000;
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
		max-height: 70vh;
		display: flex;
		flex-direction: column;
		.cpb_close{
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			width: 70rpx;
			height: 70rpx;
			font-size: 32rpx;
			color: #999;
		}
		.cpb_cart-tit{
			text-align: center;
			padding: 20rpx;
			font-size: 32rpx;
			border-bottom: 2rpx solid #eee;
			.cpb_heji{
				padding-top: 20rpx;
				font-size: 26upx;
				> text{
					color: #00aaff;
				}
				> view{
					color: #999;
					> text{
						color: #333;
						&:first-child{
							margin-right: 20upx;
						}
					}
				}
			}
		}
		.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: 26rpx;
				text{
					background: rgba(3, 54, 146, 0.15);
					color: #1c588a;
					border-radius: 1em;
					font-size: 0.8em;
					padding: 0 0.5em;
					margin-right: 10upx;
				}
				margin-top: 10upx;
			}
			.item-info{
				flex-grow: 1;
				padding-left: 0.8em;
			}
			.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>
