<template>
	<view class="content flex flex_column">
		<u-navbar back-text="新增调回单" :border-bottom="false" :background="{backgroundColor: $config('primaryColor')}" back-icon-color="#fff" :back-text-style="{ color: '#fff' }">
			<template v-slot:right>
				<view style="padding: 0 30upx;color: #ffffff;" v-if="recallBillList.length" @click="toChooseProduct">
					<u-icon name="chuangjiandingdan" custom-prefix="iscm-icon"></u-icon>
					<text style="margin-left: 6rpx;">选择产品</text>
				</view>
			</template>
		</u-navbar>
		<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="backOrderCon">
			<view v-if="recallBillList && recallBillList.length>0">
				<view class="partList-list-box" v-for="(item,index) in recallBillList" :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">
									<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>
					</view>
					<view class="ptools flex align_center u-row-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">
								{{item.replenishBillQty && item.replenishBillQty!=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" bg-color="#fff" :input-height="60" v-model="item.confirmQty" :min="item.recallBillQty?item.qty - item.recallBillQty>0 ?1 :0 :1" :max="item.recallBillQty?item.qty - item.recallBillQty>0 ?item.qty - item.recallBillQty :0 :item.qty"></u-number-box></view>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<image :src="`/static/${$config('themePath')}/def_no_data@3x.png`"></image>
				<view class="nodataTip">
					暂无产品,请点击 
					<text @click="toChooseProduct">选择产品</text>
				</view>
			</view>
		</view>	
		<view class="backOrderFooter u-flex" :style="{zIndex:(detailFlag? 99999:11)}">
			<view class="footerBox u-flex u-row-between">
				<view class="footerBox_m u-flex">
					<view class="middle_l">
						已选
						<text>{{totalCategory}}</text>
						款/<text>{{totalQty}}</text>件
					</view>
					<view class="middle_r" @click="clearList" v-if="recallBillList && recallBillList.length>0">
						清空列表
					</view>
				</view>
				<view class="footerBox_r"><u-button size="medium" @click="addBackOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >新增调回单</u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
import { reportPage } from '@/api/vinLog';
import { controlQueryList,insert } from '@/api/shelf';
import productList from './productList.vue'
import { clzConfirm } from '@/libs/tools'
export default {
	components: {
		productList
	},
	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:undefined,
			  productCode: undefined,
			  productName: undefined,
			  unsalableDaysBegin: undefined,
			  unsalableDaysEnd: undefined,
			  queryWord:undefined
			},
		};
	},
	onLoad(options) {
		const _this = this
		_this.theme = getApp({ allowDefault: true }).globalData.theme;
		_this.shelfSn = options.shelfSn;
		_this.shelfName = options.shelfName;
		_this.recallBillList=_this.$store.state.vuex_shuntBackList || []
		uni.$on("chooseBackProduct",function(data){
			_this.recallBillList = _this.recallBillList.concat(data).sort(function(a,b){
				return (a.shelfPlaceCode+'').localeCompare(b.shelfPlaceCode+'');
			});
		})
	},
	onBackPress(e) {
		if (this.sortShow && e.from == "backbutton") {
			this.chooseShow = false;
			this.detailPopup = false;
			return true;
		}
	},
	computed: {
		totalCategory () {
		  return this.recallBillList.length
		},
		totalQty () {
		  let ret = 0
		  this.recallBillList.map(item => {
		    ret = ret + item.confirmQty
		  })
		  return ret
		},
		chooseKey(){
			let ret = []
			this.recallBillList.map(item => {
			  ret.push(item.id)
			})
			return ret
		},
		
	},
	methods: {
		toChooseProduct(){
			let nowData={
				shelfSn:this.shelfSn,
				shelfName:this.shelfName,
				chooseKey :this.chooseKey
			}
			uni.navigateTo({
				url: "/pages/shuntBackManage/chooseProduct?data="+encodeURIComponent(JSON.stringify(nowData))
			})
		},
		//清空列表
		clearList(){
			const _this = this
			clzConfirm({
			  title: '提示',
			  content: '确认要清空列表吗?',
			  success (ret) {
				if (ret.confirm || ret.index == 0) {
					_this.clearChoose()
				}
			  }
			})
		},
		clearChoose(){
			this.recallBillList = []
		},
		//删除调回单列表
		delDetail(item,i){
			const index = this.recallBillList.findIndex(k => k.id == item.id)
			this.recallBillList.splice(index,1)
			// 全部清空
			if(this.recallBillList.length==0){
				this.clearChoose()
			}
		},
		addBackOrder(){
			const arr = []
			const arrInd = []
			if(this.recallBillList.length == 0){
				uni.showToast({
					title:'请先选择调回产品',
					icon:'none'
				})
				return;
			}
			this.recallBillList.forEach((item, index) => {
			  if (item.confirmQty * 1>0) {
			    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 => {
				if (res.status == 200) {
					uni.showToast({
						title:res.message
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/shuntBackManage/cancellingStocks?sn='+res.data
						})
					},800)
				}
				uni.hideLoading()
			});
		},
		// 校验滞销天数数值范围
		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" scoped>
.content {
	background: #ffffff;
	width: 100%;
	height: 100vh;
		.headerName {
			padding:20rpx 20rpx 16rpx;
			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% - 16rpx);
			}
			.screeningBox {
				font-size: 26rpx;
				width: 150rpx;
				text-align: right;
				text {
					vertical-align: top;
				}
			}
		
	}
	.backOrderCon {
		width: 100%;
		flex-grow:1;
		overflow: auto; 
		.partList-list-box {
			width: 100%;
			padding: 10px 20rpx;
			box-sizing: border-box;
			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;
				}
				::v-deep .u-icon-disabled {
					background: #fff !important;
				}
				::v-deep .u-number-input {
					margin: 0 0;
					border: 2rpx solid #eee;
					border-top: 0;
					border-bottom: 0;
				}
				::v-deep .u-icon-plus,
				::v-deep .u-icon-minus {
					border-radius: 50rpx;
				}
			}
		}
		.nodata{
			text-align: center;
			image{
				width: 180rpx;
				height: 180rpx;
				margin-top: 200rpx;
			}
			.nodataTip{
				text{
					color: #00aaff;
					margin-left: 10rpx;
					margin-top: 20rpx;
				}
			}
		}

	}
	.backOrderFooter {
		height: 98rpx;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		position: relative;
		background-color: #f8f8f8;
		.footerBox {
			width: 100%;
			.footerBox_m {
				.middle_l {
					text {
						color: red;
						margin: 0 6rpx;
					}
				}
				.middle_r {
					font-size: 24rpx;
					color: #999;
					margin-left: 10rpx;
					color: red;
				}
			}
			.footerBox_r {
				width: 200rpx;
				button {
					width: 100%;
					font-size: 26rpx;
				}
			}
		}
	}
}
</style>