<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="screeningBox" @click="chooseShow = true">
					<text>滞销天数</text>
					<u-icon color="#0485F6" size="30" name="shaixuan" custom-prefix="iscm-icon"></u-icon>
				</view>
			</view>
			<view class="search flex align_center">
				<view class="input">
					<u-search 
					v-model="keyword" 
					@input="$u.debounce(getSearchCon, 800)"
					@search="getSearchCon"
					@custom="getSearchCon"
					@clear="clearSearch"
					bg-color="#fff" 
					:show-action="false"
					placeholder="请输入产品编码或名称搜索"></u-search>
				</view>
				<view class="icon" @click="handleScanCode">
					<u-icon name="scan"></u-icon>
				</view>
			</view>
		</view>
		<view class="check-list">
			<productList ref="productList" noDataText="暂无产品" @allChecked="allCheckedCallback"></productList>
		</view>
		<!-- 底部栏 -->
		<view class="footer-bar flex align_center" v-if="partList.length">
			<view class="f-left">
				<u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
			</view>
			<view class="f-mid" @click="isDetailShow=!isDetailShow">
				<view>
					已选<text>{{totalCategory}}</text>款产品
				</view>
				<view v-if="!isDetailShow">
					查看明细 <u-icon name="arrow-up"></u-icon>
				</view>
				<view v-else>
					关闭明细 <u-icon name="arrow-down"></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>
		<!-- 滞销天数弹窗 -->
		<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>
		<!-- 详情弹窗 -->
		<u-popup v-model="isDetailShow" mode="bottom" :duration="0" height="800" border-radius="25" :closeable="true">
				<view class="head">
					已选产品
					<text @click="clearChoose">清空列表</text>
				</view>
				<scroll-view scroll-y class="scroll-view" v-if="chooseList.length>0">
					<view class="partList-list-box" v-for="(item,index) in chooseList" :key="item.id">
						<view class="product flex align_center">
							<view class="uni-col-1" @click="delDetail(item,index)">
								<u-icon name="close-circle" color="#ff5500" size="35"></u-icon>
							</view>
							<view class="flex flex_1">
								<view class="pimgs">
									<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="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 justify_end">
										<view>
											最大库容
											<text class="pnums">{{item.maxQty}}</text>
										</view>
										<view>
											/货架库存
											<text class="pnums">{{item.qty}}</text>
										</view>
										<view>
											/滞销
											<text class="pnums">{{!item.unsalableDays || (item.unsalableDays&&item.unsalableDays) == 0 ?'--天':item.unsalableDays}}</text>
										</view>
									</view>
								</view>
							</view>
							</u-checkbox>
						</view>
						<view class="ptools flex align_center">
							<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">
									{{item.replenishBillQty && item.replenishBillQty!=0 ? '/':''}}调回在途
									<text class="pnums">{{item.recallBillQty}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view style="margin-top:100rpx;" v-else>
					<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" text="暂无选中产品"></u-empty>
				</view>
			</u-popup>
	</view>
</template>

<script>
	
	import { reportPage } from '@/api/vinLog';
	import productList from './productList.vue'
	import { controlQueryList,insert } from '@/api/shelf';
	export default {
		components: {
			productList
		},
		data() {
			return {
				nowData:null,
				keyword:'',
				noDataText: '暂无产品',
				partList: [],
				allChecked: false,
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff'
				},
				isDetailShow:false,//详情弹窗显示
				chooseList: [],
				chooseShow:false,
				queryParam: { //  查询条件
				  shelfSn:undefined,
				  productCode: undefined,
				  productName: undefined,
				  unsalableDaysBegin: undefined,
				  unsalableDaysEnd: undefined,
				  queryWord:undefined
				}
			}
		},
		onBackPress(e) {
		  if((this.chooseShow || this.isDetailShow) && e.from == "backbutton") {  
			this.chooseShow = false;
			this.isDetailShow= false
			return true;  
		  } 
		},
		onLoad(opts) {
			this.nowData = JSON.parse(decodeURIComponent(opts.data));
			let ajaxData = {
				shelfSn: this.nowData.shelfSn
			};
			this.loadData(ajaxData);
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
		},
		computed: {
			totalCategory () {
			  return this.chooseList.length
			},
		},
		methods: {
			// 单击全选
			allCheckeChange(e){
				this.$refs.productList.allSelect(e.value)
				const list = this.$refs.productList.getAllData()
				list.map(item => {
					this.allCheckedCallback(true,item)
				})
				if(!e.value && this.showCart){
					this.showCart = false
				}
			},
			// 选中事件
			allCheckedCallback(isAllChecked,row){
				console.log(isAllChecked,row)
				const has = this.chooseList.findIndex(k => k.id == row.id)
				// 在已选列表中
				if(has>=0){
					// 取消选中
					if(!row.checked){
						this.chooseList.splice(has,1)
					}
				}else{
					// 不在已选列表中，添加
					if(row.checked){
						this.chooseList.push(row)
					}
				}
				// 是否全选
				this.allChecked = isAllChecked
			},
			// 清空已选数据
			clearChoose(){
				this.chooseList = []
				this.allChecked = false
				if(this.$refs.productList){
					this.$refs.productList.allSelect(false)
				}
			},
			
			clearSearch(){
				// 重置
				this.keyword = ''
				this.changeSearch()
			},
			changeSearch(){
				let ajaxData = {
					shelfSn:this.nowData.shelfSn,
					productCode: undefined,
					productName: undefined,
					unsalableDaysBegin: undefined,
					unsalableDaysEnd: undefined,
					queryWord:undefined
				};
				this.queryParam = ajaxData;
				this.partList = []
				this.loadData(ajaxData)
			},
			// 重置
			reset() {
				let ajaxData = {
					shelfSn:this.nowData.shelfSn,
					productCode: undefined,
					productName: undefined,
					unsalableDaysBegin: undefined,
					unsalableDaysEnd: undefined,
					queryWord:undefined
				};
				this.queryParam = ajaxData;
				this.loadData(ajaxData);
			},
			handelFilter(){
				if(this.checkValueRange()){
					this.queryParam.shelfSn = this.nowData.shelfSn;
					this.chooseShow =false;
					this.loadData(this.queryParam);
				}	
			},
			// 获取数字货架列表
			loadData(params) {
				const _this = this;
				uni.showLoading({
					mask:true,
					title:"正在加载..."
				})
				if(!this.keyword){
					params.queryWord = undefined
				}
				controlQueryList(params).then(res => {
					if (res.status == 200) {
						res.data.forEach(item=>{
							item.isChecked= false
							if(item.recallBillQty){
								item.confirmQty = item.qty - item.recallBillQty>0 ?item.qty - item.recallBillQty: 0;
							}else{
								item.confirmQty = item.qty
							}
						})
						_this.partList=res.data;
					}else{
						_this.partList =[]
					}
					//过滤之前选过的值
					if(_this.nowData.chooseKey && _this.nowData.chooseKey.length >0){
						_this.partList = _this.partList.filter(item => {
							const row = _this.nowData.chooseKey.findIndex(k => k == item.id)
							return !(row>=0)
						})
					}
					// 已选
					_this.partList.map(item => {
						const row = _this.chooseList.find(k => k.id == item.id)
						item.checked = !!row
					})
					this.$refs.productList.setData(_this.partList)
					setTimeout(()=>{
						uni.hideLoading()
					},_this.partList.length*30)
				});
			},
			// 提交
			submitOrder(){
				if(this.totalCategory){
					if(this.nowData.chooseKey && this.nowData.chooseKey.length>0){
						uni.$emit("chooseBackProduct",this.chooseList)
						uni.navigateBack()
					}else{
						this.$store.commit('setShuntBackList',this.chooseList);
						uni.redirectTo({
							url:'/pages/shuntBackManage/addBackOrder?shelfSn='+ this.nowData.shelfSn+'&shelfName='+this.nowData.shelfName
						})
					}
				}else{
					uni.showToast({
						icon: 'none',
						title: '请选择产品'
					})
				}
			},
			// 扫描
			handleScanCode(){
				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.queryParam.queryWord = ret[1] // 产品编码
					this.keyword= ret[1]
				}else{
					this.queryParam.queryWord = data.scanValue;
					this.keyword= data.scanValue
				}
				this.queryParam.shelfSn = this.nowData.shelfSn
				this.loadData(this.queryParam);
			},
			delDetail(con,pot){
				this.$refs.productList.setChecked(con.id,false)
				this.chooseList.splice(pot,1);
				this.allChecked = false
				// 全部清空
				if(this.chooseList.length==0){
					this.clearChoose()
				}
			},
			// 搜索
			getSearchCon() {
				var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
				if(!this.queryParam.queryWord){
					if (reg.test(this.keyword)) {
						//包含汉字
						this.queryParam.productName = this.keyword.trim()
					} else {
						this.queryParam.productCode=this.keyword.trim()
					}
				}
				this.queryParam.shelfSn = this.nowData.shelfSn
				this.loadData(this.queryParam);
			},
			// 校验滞销天数数值范围
			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*1 > this.queryParam.unsalableDaysEnd *1) {
			    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">
.content{
	height: 100vh;
	width: 100%;
	background: #fff;
	.searchBar{
		padding: 0.5rem 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: 74%;
				> view{
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.screeningBox {
				font-size: 26rpx;
				width: 150rpx;
				text-align: right;
				color: #0485F6;
				text {
					vertical-align: top;
				}
			}
			.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;
		flex-basis: 0;
	 }
	.footer-bar{
		background-color: #f8f8f8;
		padding: 20upx;
		position: relative;
		z-index: 99999;
		.f-left{
			color: #fff;
		}
		.active{
			background-color: #0485F6;
		}
		.f-mid{
			flex-grow: 1;
			color: #666;
			font-size: 0.8rem;
			> view{
				padding: 0 5upx;
				&:first-child{
					text{
						color: red;
					}
				}
				&:last-child{
					font-size: 0.8rem;
					color: #0485F6;
				}
			}
		}
		.f-btns{
			button{
				width: 200upx;
			}
		}
	}
	//滞销天数弹窗样式
	.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;
			}
		}
	}
	// 详情页弹窗样式
	.head{
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			padding:30rpx 20rpx;
			background: #f8f8f8;
			position: relative;
			font-weight: bold;
			text{
				position: absolute;
				top:30rpx ;
				left:20rpx;
				color:red;
				font-weight: normal;
			}
		}
		.scroll-view{
			height: 584rpx;
			.partList-list-box {
				width: 700rpx;
				margin:0 auto;
				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: 30rpx;
							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: 28rpx;
							color: #999;
							.pnums {
								color: #222;
								padding: 0 4upx;
							}
						}
					}
				}
				.ptools {
					margin-top: 10rpx;
					margin-left: 60rpx;
					.ptools_l{
						font-size: 26rpx;
						color: #999;
						view{
							:nth-child(2)::before{
								content: '/';
							}
						}
						.pnums {
							color: #ff5500;
							padding: 0 4rpx;
						}
					}
					.pcurnums {
						> text {
							font-size: 24rpx;
							color: #999;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
}
</style>
