<template>
	<view class="modal-box">
		<view class="header_box">
			<view class="headerName u-flex">
				<text class="barBox"></text>
				<view class="shelfName u-line-1">{{ shelfName }}</view>
				<view class="screeningBox" @click="chooseShow = true">
					<text>滞销天数</text>
					<u-icon color="#666666" size="36" name="shaixuan" custom-prefix="iscm-icon"></u-icon>
				</view>
			</view>
			<view class="searchBox">
				<view class="searchBox_l">
					<u-search
						placeholder="请输入产品编码或产品名称搜索"
						@change="getSearchCon"
						@search="getSearchCon"
						@custom="getSearchCon"
						@clear="clearSearch"
						v-model="keyword"
						bg-color="#FFF"
						shape="round"
						:show-action="false"
					></u-search>
				</view>
				<view class="searchBox_r" @click="handleScanCode"><u-icon name="scan"></u-icon></view>
			</view>
		</view>
		<view class="backOrderCon">
			<scroll-view scroll-y class="scroll-view" v-if="recallBillList && recallBillList.length>0" >
				<u-checkbox-group :wrap="true"  @change="checkGroupChange">
					<view class="partList-list-box" v-for="(item,index) in recallBillList" :key="item.id">
						<view class="product flex align_center">
							<u-checkbox class="checkbox" v-model="item.isChecked" :name="item.id" size="40" shape="circle">
							<view class="flex align_center flex_1">
								<view class="pimgs">
									<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="pinfo">
									<view class="pname item-name">
										<text>{{item.shelfPlaceCode}}</text>
										{{item.productCode}}
									</view>
									<view class="productName u-line-2">
										{{item.productName}}
									</view>
									<view class="ptxt flex align_center">
										<view>
											最大库容
											<text class="pnums">{{item.maxQty}}</text>
										</view>
										<view>
											/货架库存
											<text class="pnums">{{item.qty}}</text>
										</view>
										<view>
											/滞销
											<text class="pnums">{{item.unsalableDays}}</text>
										</view>
									</view>
								</view>
							</view>
							</u-checkbox>
						</view>
						<view class="ptools flex align_center justify_between">
							<view class="ptools_l u-flex">
								<view v-if="item.replenishBillQty && item.replenishBillQty!=0">
									补货在途
									<text class="pnums">{{item.replenishBillQty}}</text>
								</view>
								<view v-if="item.recallBillQty && item.recallBillQty!=0">
									调回在途
									<text class="pnums">{{item.recallBillQty}}</text>
								</view>
							</view>
							<view class="pcurnums flex align_center">
								<text>调回数量</text>
								<view class="u-ninput"><u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="item.confirmQty" :min="0" :max="item.qty" @minus="minus" @plus="plus" @change="numberBoxChange"></u-number-box></view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</scroll-view>
			<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="200" :text="noDataText" img-width="120" v-else></u-empty>
		</view>
		<view class="backOrderFooter u-flex" :style="{zIndex:(detailFlag? 99999:11)}">
			<view class="checkBox">
				<u-checkbox-group><u-checkbox v-model="allChecked" shape="circle" @change="allCheckedChange">全选</u-checkbox></u-checkbox-group>
			</view>
			<view class="footerBox u-flex u-row-between">
				<view class="footerBox_m u-flex">
					<view class="middle_l">
						已选
						<text>{{chooseArr.length}}</text>
						款/
						<text>{{totalNum}}</text>
						件
					</view>
					<view class="middle_r" @click="seeDetail">
						<text>查看明细</text>
						<u-icon name="arrow-up" color="#999" size="28"></u-icon>
					</view>
				</view>
				<view class="footerBox_r"><u-button type="primary" shape="circle"  @click="addBackOrder">新增调回单</u-button></view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup v-model="chooseShow" mode="right" width="60%">
			<view class="choosePopup">
				<view class="chooseTit">滞销天数</view>
				<view class="chooseDay u-flex">
					<u-input v-model="queryParam.unsalableDaysBegin" input-align="center" placeholder="起始天数" type="number" />
					<text>至</text>
					<u-input v-model="queryParam.unsalableDaysEnd" input-align="center" placeholder="截止天数" type="number" />
				</view>
				<view class="butBox u-flex">
					<u-button hover-class="none" shape="circle" size="medium" @click="reset">重置</u-button>
					<u-button hover-class="none" :custom-style="customBtnStyle" size="medium" shape="circle" @click="handelFilter">查询</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 查看明细弹窗 -->
		<detailModal ref="detailPopup" @clearList='clearOneList' @clearAllList="clearAll" @changeNumRecount="recount" :detailShow="detailFlag" :chooseData="chooseArr"  @close="detailFlag=false"></detailModal>
	</view>
</template>

<script>
import { reportPage } from '@/api/vinLog';
import { controlQueryList,insert } from '@/api/shelf';
import detailModal from './detailModal'
export default {
	components: {
		detailModal
	},
	data() {
		return {
			shelfSn: '',
			shelfName: '',
			recallBillList:[],//回调单列表
			chooseArr:[],
			noDataText: '暂无调回单',
			totalNum: 0,
			detailFlag:false,//查看详情
			chooseShow: false,//滞销天数弹窗
			theme: '',
			customBtnStyle: {
				//  自定义按钮样式
				borderColor: this.$config('primaryColor'),
				backgroundColor: this.$config('primaryColor'),
				color: '#fff'
			},
			allChecked: false,
			keyword: '',//搜索
			queryParam: { //  查询条件
			  shelfSn:this.shelfSn,
			  productCode: undefined,
			  productName: undefined,
			  unsalableDaysBegin: undefined,
			  unsalableDaysEnd: undefined,
			  queryWord:undefined
			},
		};
	},
	onLoad(options) {
		this.theme = getApp().globalData.theme;
		this.shelfSn = options.shelfSn;
		this.shelfName = options.shelfName;
		let ajaxData = {
			shelfSn: options.shelfSn
		};
		this.loadData(ajaxData);
	},
	onBackPress(e) {
		if (this.sortShow) {
			this.sortShow = false;
			this.isSortFlag = 0;
			return true;
		}
	},
	methods: {
		// 获取列表
		loadData(params) {
			const _this = this;
			uni.showLoading({
				title: '加载中...'
			});
			controlQueryList(params).then(res => {
				if (res.status == 200) {
					res.data.forEach(item=>{
						item.isChecked= false
						item.confirmQty = item.qty
					})
					this.recallBillList=res.data;
				}
				uni.hideLoading()
			});
		},
		
		checkGroupChange(e){
			let newArr=[];
			e.forEach(item=>{
				this.recallBillList.map(info =>{
					if(item == info.id) {
						newArr.push(info);
					}
				})
			})
			this.chooseArr = newArr;
			let flag = this.recallBillList.every(con => con.isChecked )
			if(flag){
				this.allChecked = true
			}else{
				this.allChecked = false
			}
			this.calculateTotal()
		},
		// 全选
		allCheckedChange(e){
			 if(e.value){
				this.recallBillList.map(item=>{
					item.isChecked = true;
				})
				this.chooseArr = this.chooseArr.concat(this.recallBillList);
			 }else{
				 this.recallBillList.map(item=>{
				 	item.isChecked = false;
				 })
				 this.chooseArr = []
				 this.$refs.detailPopup.clearAllList();
			 }
			 this.calculateTotal()
		},
		// 计算选中总件数
		calculateTotal(){
			 this.totalNum = this.recallBillList.filter(item=>{
				 return item.isChecked
			 }).reduce((pre,cur)=>{
				 return pre + cur.confirmQty
			 },0)	
		},
		//查看选中详情
		seeDetail(){
			if(this.chooseArr.length == 0){
				uni.showToast({
					title:'请先选择调回单',
					icon:'none'
				})
			}else{
				this.detailFlag = true;
			}
		},
		// 详情删除其中一条选中数据
		clearOneList(id){
			let i = this.recallBillList.findIndex(val =>{
				return val.id == id;
			})
			this.recallBillList[i].isChecked = false
			this.calculateTotal();
		},
		clearAll(){
			this.recallBillList.map(item=>{
				item.isChecked = false;
			})
			this.allChecked =false;
			this.chooseArr = []
			this.calculateTotal();
		},
		//进步器change事件
		numberBoxChange(){
			this.calculateTotal();
		},
		minus(){
			this.calculateTotal();
		},
		plus(){
			this.calculateTotal();
		},
		// 详情改变重新计算总件数
		recount(){
			this.calculateTotal();
		},
		// 重置
		reset() {
			let ajaxData = {
				shelfSn:this.shelfSn,
				productCode: undefined,
				productName: undefined,
				unsalableDaysBegin: undefined,
				unsalableDaysEnd: undefined,
				queryWord:undefined
			};
			this.queryParam = ajaxData;
			this.loadData(this.queryParam);
		},
		handelFilter(){
			if(this.checkValueRange()){
				this.queryParam.shelfSn = this.shelfSn;
				this.loadData(this.queryParam);
			}	
		},
		// 搜索
		getSearchCon() {
			var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
			if (reg.test(this.keyword)) {
				//包含汉字
				this.queryParam.productName = this.keyword.trim()
			} else {
				this.queryParam.productCode=this.keyword.trim()
			}
			this.queryParam.shelfSn = this.shelfSn
			this.loadData(this.queryParam);
		},
		// 清空搜索内容
		clearSearch() {
			this.keyword = '';
			this.reset();
		},
		//扫码
		handleScanCode(){
			uni.scanCode({
				success: (res)=> {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					this.queryParam.queryWord = res.result;
				}
			});
			this.loadData(this.queryParam);
		},
		addBackOrder(){
			const arr = []
			const arrInd = []
			if(this.chooseArr.length == 0){
				uni.showToast({
					title:'请先选择调回单',
					icon:'none'
				})
				return;
			}
			this.chooseArr.forEach((item, index) => {
			  if (item.confirmQty) {
			    arr.push({
			      shelfSn: item.shelfSn,
			      shelfPlaceSn: item.shelfPlaceSn,
			      shelfPlaceCode: item.shelfPlaceCode,
			      productSn: item.productSn,
			      productCode: item.productCode,
			      productName: item.productName,
			      qty: item.confirmQty
			    })
			  } else {
			    arrInd.push(index + 1)
			  }
			})
			if (arrInd.length > 0) {
			  uni.showToast({
			  	title:'调回数量不能为空或0，请移除后提交',
				icon:'none'
			  })
			  return
			}
			uni.showLoading({
				title: '保存中...'
			});
			const params = {
			  shelfSn: this.shelfSn,
			  detailList: arr
			}
			insert(params).then(res => {
				uni.hideLoading()
				if (res.status == 200) {
					uni.showToast({
						title:res.message
					})
				}
				
			});
		},
		// 校验滞销天数数值范围
		checkValueRange () {
		  const isONull = this.queryParam.unsalableDaysBegin === null || this.queryParam.unsalableDaysBegin === undefined
		  const isOEmpty = this.queryParam.unsalableDaysBegin === ''
		  const isOZero = this.queryParam.unsalableDaysBegin === 0
		  const isTNull = this.queryParam.unsalableDaysEnd === null || this.queryParam.unsalableDaysEnd === undefined
		  const isTEmpty = this.queryParam.unsalableDaysEnd === ''
		  const isTZero = this.queryParam.unsalableDaysEnd === 0
		  //  第一个为空（可为null可为空字符）第二个不为空
		  //  第一个不为空第二个为空（可为null可为空字符）
		  //  第一个大于第二个
		  if ((isONull || isOEmpty) && (this.queryParam.unsalableDaysEnd || isTZero)) {
		    uni.showToast({
		    	title:'请输入正确的滞销天数查询范围！',
				icon:'none'
		    })
		    return false
		  }
		  if ((this.queryParam.unsalableDaysBegin || isOZero) && (isTNull || isTEmpty)) {
			uni.showToast({
				title:'请输入正确的滞销天数查询范围！',
				icon:'none'
			})
		    return false
		  }
		  if (this.queryParam.unsalableDaysBegin > this.queryParam.unsalableDaysEnd) {
		    uni.showToast({
		    	title:'请输入正确的滞销天数查询范围！',
		    	icon:'none'
		    })
		    return false
		  }
		  this.queryParam.unsalableDaysBegin = this.queryParam.unsalableDaysBegin > 999999999 ? 999999999 : this.queryParam.unsalableDaysBegin
		  this.queryParam.unsalableDaysEnd = this.queryParam.unsalableDaysEnd > 999999999 ? 999999999 : this.queryParam.unsalableDaysEnd
		  return true
		}
	}
};
</script>

<style lang="less" scoped>
.modal-box {
	background: #ffffff;
	padding: 20rpx;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	.header_box {
		width: 100%;
		height: 142rpx;
		padding: 0 20rpx 20rpx;
		.headerName {
			padding-bottom: 15rpx;
			color: #222;
			font-size: 30rpx;
			.barBox {
				display: block;
				height: 30rpx;
				width: 6rpx;
				background: #0485f6;
				margin-right: 10rpx;
				border-radius: 10rpx;
			}
			.shelfName {
				font-weight: bold;
				width: calc(100% - 166rpx);
			}
			.screeningBox {
				font-size: 26rpx;
				width: 150rpx;
				text-align: right;
				text {
					vertical-align: top;
				}
			}
		}
		.searchBox {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			border: 1rpx solid #e0e0e0;
			border-radius: 50rpx;
			box-sizing: border-box;
			.searchBox_l {
				width: 87%;
			}
			.searchBox_r {
				width: 13%;
				text-align: right;
				font-size: 46rpx;
				color: #999;
			}
		}
	}
	.backOrderCon {
		width: 100%;
		height: calc(100vh - 280rpx);
		.scroll-view{
			height: 100%;
		
		.partList-list-box {
			width: 700rpx;
			padding: 10px 0;
			border-bottom: 2rpx solid #f5f5f5;
			&:last-child {
				border: 0;
			}
			.product {
				flex-grow: 1;
				.checkbox {
					width: 60rpx;
				}
				.pinfo {
					flex-grow: 1;
					padding-left: 20rpx;
					.pname {
						font-size: 26rpx;
						color:#222;
						text {
							font-weight: normal;
							margin-right: 10rpx;
							padding: 0 10rpx;
							background: rgba(3, 54, 146, 0.15);
							border-radius: 30rpx;
							color: #033692;
							font-size: 24rpx;
						}
					}
					.productName{
						width: 100%;
						font-size: 26rpx;
						margin:6rpx 0;
					}
					.pno {
						background-color: rgba(3, 54, 146, 0.15);
						border-radius: 50rpx;
						padding: 0 20rpx;
						color: #033692;
						font-size: 24rpx;
						margin-right: 10rpx;
					}
					.ptxt {
						font-size: 24rpx;
						color: #999;
						.pnums {
							color: #222;
							padding: 0 4upx;
						}
					}
				}
			}
			.ptools {
				margin-top: 30rpx;
				margin-left: 60rpx;
				.ptools_l{
					font-size: 24rpx;
					color: #999;
					view{
						:nth-child(2)::before{
							content: '/';
						}
					}
					.pnums {
						color: #ff5500;
						padding: 0 4rpx;
					}
				}
				.pcurnums {
					> text {
						font-size: 24rpx;
						color: #999;
						margin-right: 20rpx;
					}
				}
				.u-ninput {
					border: 2rpx solid #eee;
					border-radius: 50rpx;
					padding: 0 6rpx;
				}
				/deep/ .u-icon-disabled {
					background: #fff !important;
				}
				/deep/ .u-number-input {
					margin: 0 0;
					border: 2rpx solid #eee;
					border-top: 0;
					border-bottom: 0;
				}
				/deep/ .u-icon-plus,
				/deep/ .u-icon-minus {
					border-radius: 50rpx;
				}
			}
		}
		}
	}
	.backOrderFooter {
		height: 98rpx;
		box-sizing: border-box;
		padding: 10rpx 0;
		vertical-align: top;
		position: relative;
		background-color: #fff;
		.checkBox {
			width: 20%;
		}
		.footerBox {
			width: 80%;
			.footerBox_m {
				.middle_l {
					text {
						color: #ff5500;
						margin: 0 6rpx;
					}
				}
				.middle_r {
					font-size: 24rpx;
					color: #999;
					margin-left: 10rpx;
				}
			}
			.footerBox_r {
				width: 200rpx;
				button {
					width: 100%;
					font-size: 26rpx;
				}
			}
		}
	}
	// 弹窗样式
	.choosePopup {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		.chooseTit {
			text-align: center;
		}
		.chooseDay {
			margin: 60rpx 0;
			.u-input {
				border-bottom: 1rpx solid #e0e0e0;
			}
		}
		.butBox {
			margin-top: 100rpx;
			.u-size-medium {
				padding: 0 60rpx !important;
			}
		}
	}
}
</style>
