<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 v-if="placeTab.length" 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">
			<scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
				<view class="partList-list-box" v-for="item in partList" :key="item.id">
					<view class="product" @click="toEdit(item)">
						<view class="flex align_center flex_1">
							<view class="pimgs">
								<text v-if="hasChecked(item)">已选</text>
								<u-image :src="item.productEntity&&item.productEntity.images?item.productEntity.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
							</view>
							<view class="pinfo">
								<view class="pname">
									<text>{{item.shelfPlaceCode}}</text>{{item.productEntity&&item.productEntity.code}}
								</view>
								<view class="ptxt flex align_center justify_between">
									<view>
										<text class="pcode">{{item.productEntity&&item.productEntity.productName}}</text>
									</view>
								</view>
								<view class="item-detail">
									<view>
										可用库存：
										<text class="item-detail-text">{{item.currQty}}</text>
										{{item.productEntity&&item.productEntity.unit}}
									</view>
									<view>
										冻结库存：
										<text class="item-detail-text">{{item.freezeQty}}</text>
										{{item.productEntity&&item.productEntity.unit}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="partList&&partList.length==0">
					<u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50"></u-empty>
				</view>
				<view style="padding: 20upx;" v-if="total>pageSize || status=='loading'">
					<u-loadmore :status="status" />
				</view>
			</scroll-view>
		</view>
		<!-- 底部栏 -->
		<view class="footer-bar flex align_center">
			<view class="f-left" :style="{background:orderTotal?$config('primaryColor'):''}" @click="openCart">
				<u-icon name="order" size="45"></u-icon>
				<u-badge type="error" size="mini" :offset="[-10,-10]" :count="orderTotal"></u-badge>
			</view>
			<view class="f-mid">
				<view v-if="detail">
					盘盈总数：<text>{{detail.totalProfitQty}}</text>
					盘亏总数：<text>{{detail.totalLossQty}}</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>
		<!-- 已选配件 购物车 -->
		<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 v-if="detail">
							盈亏总数量：
							<text>
								{{detail.totalProfitLossQty}}
							</text>
							盈亏总金额：
							<text>
								￥{{detail.totalProfitLossCost}}
							</text>
						</view>
					</view>
				</div>
				<div class="cpb_cart-list">
					<u-swipe-action 
					:show="item.show" 
					:btn-width="120"
					:index="index" 
					@click="delDetail"
					v-for="(item, index) in chooseList" 
					:key="item.id" 
					:options="options"
					>
					<view class="nav-right-item flex">
						<view class="uni-col-2">
							<u-image :src="item.product&&item.product.images?item.product.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="100" height="100" border-radius="30"></u-image>
						</view>
						<view class="item-info uni-col-10">
							<view class="item-name">
								<text>{{item.shelfPlaceCode}}</text>
								{{item.product.productName}}
							</view>
							<view class="item-detail">
								<view class="item-detail-info align_center flex justify_between">
									<view>
										{{item.productCode}}
									</view>
									<view class="flex justify_end">
										<text class="item-detail-text">
											可用：{{item.stockQty?item.stockQty:0}} {{item.product&&item.product.unit}}
										</text>
										<text class="item-detail-text">
											冻结：{{item.freezeQty?item.freezeQty:0}} {{item.product&&item.product.unit}}
										</text>
									</view>
								</view>
							</view>
							<view class="item-detail">
								<view class="item-detail-info">
									<view class="flex justify_between">
										<view></view>
										 <view class="item-detail-text">
										 	实际可用：
										 	<u-number-box 
											v-model="item.checkQty" 
											@minus="cartChangeNums" 
											@plus="cartChangeNums" 
											@blur="cartChangeNums"
											:index="'cart_'+item.id" 
											:max="999999"></u-number-box>
										 </view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action>
				</div>
			</div>
		</div>
		<!-- 编辑弹框 -->
		<editModal v-if="editModal" :openModal="editModal" :infoData="tempData" @close="editModal=false" @addProduct="addProduct"></editModal>
		<!-- 筛选项 -->
		<u-popup v-model="showTab" mode="right" width="70%">
			<view class="tabBox flex flex_column">
				<view class="tabs">
					<view>
						<view :class="'available'==curType?'active':''" @click="curType=curType=='available'?'':'available'">有可用库存的产品</view>
						<view :class="'blocked'==curType?'active':''" @click="curType=curType=='blocked'?'':'blocked'">有冻结库存的产品</view>
					</view>
					<view class="flex">
						<view :class="item==curTab?'active':''" v-for="item in placeTab" :key="item" @click="curTab=curTab==item?'':item">{{item}}层</view>
					</view>
				</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="clearSearch">查询</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getShelfProductList,getProductPlace } from '@/api/shelf'
	import { 
		stockCheckDetailQueryList, 
		stockCheckDetailDelete, 
		stockCheckSave, 
		stockCheckBySn, 
		stockCheckDetailSave,
		deleteByStockCheckSn
	} from '@/api/stockCheck'
	import editModal from './editModal'
	import { clzConfirm } from '@/libs/tools'
	export default {
		components: {
			editModal,
		},
		data() {
			return {
				queryWord: '',
				nowData:null,
				stockCheckSn: null,
				detail:null,
				pageNo:1,
				pageSize: 20,
				total: 0, // 列表总数
				noDataText: '暂无产品',
				status: 'loading',
				partList: [],
				showTab: false,
				placeTab: [],
				curTab: '',
				curType: '',
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff'
				},
				orderTotal: 0,
				showCart: false,
				chooseList: [],
				editModal: false,
				tempData: null,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				uni.navigateTo({
					url: '/pages/stockCheck/checkRecord?shelfSn='+this.nowData.shelfSn
				})
			}
		},
		onBackPress(e) {
		  if(this.showTab||this.editModal||this.showCart) {  
			this.showTab = false;
			this.editModal = false;
			this.showCart = false;
			return true;  
		  } 
		},
		onLoad(opts) {
			this.nowData = JSON.parse(decodeURIComponent(opts.data));
			this.stockCheckSn = this.nowData.stockCheckSn
			this.getpartList()
			this.getShelfPlace()
			
			if(this.stockCheckSn){
				// 获取盘点单明细
				this.getDetail()
				// 获取盘点明细列表
				this.getChooseList()
			}
			
			// 重置盘点单
			uni.$on("resetStockCheck",()=>{
				this.resetStockCheck()
			})
		},
		onUnload() {
			uni.$off("resetStockCheck")
		},
		methods: {
			// 重置盘点单
			resetStockCheck(){
				this.chooseList = []
				this.orderTotal = 0
				this.stockCheckSn = null
				this.detail = null
				this.tempData = null
				this.queryWord = ''
				this.showCart = false
				this.handleClear()
			},
			// 获取盘点明细列表
			getChooseList(){
				stockCheckDetailQueryList({
					stockCheckSn: this.stockCheckSn
				}).then(res => {
					this.chooseList = res.data || []
					this.orderTotal = this.chooseList.length
				})
			},
			// 详细
			getDetail(){
				stockCheckBySn({stockCheckSn: this.stockCheckSn}).then(res => {
					this.detail = res.data || null
				})
			},
			//添加产品
			toEdit(item){
				const data = this.hasChecked(item)
				console.log(data)
				// 修改
				if(data){
					data.productEntity = data.product
					data.currQty = data.stockQty
					this.tempData = data
				}else{
					// 添加
					item.checkQty = item.currQty
					this.tempData = item
				}
				this.editModal = true
			},
			// 添加产品明细
			addProduct(data){
				const _this = this
				this.editModal = false
				// 是否第一次添加产品
				if(this.orderTotal==0){
					clzConfirm({
					  title: '提示',
					  content: '开始盘点后，不能再使用与出入库有关的功能，确认开始盘点吗？',
					  success (ret) {
						if (ret.confirm || ret.index == 0) {
							// 先创建盘点单
							_this.creatOrder(data)
						}
					  }
					})
				}else{
					uni.showLoading({
						title:"正在保存.."
					})
					this.saveProduct(data)
				}
			},
			// 创建盘点单
			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
						 this.saveProduct(data)
					 }else{
						 uni.hideLoading()
					 }
				})
			},
			// 添加产品
			saveProduct(data){
				stockCheckDetailSave({
					stockCheckSn: this.detail.stockCheckSn,
					stockCheckNo: this.detail.stockCheckNo,
					...data
				}).then(res => {
					if(res.status == 200){
						this.getDetail()
						this.getChooseList()
						uni.showToast({
							icon:'none',
							title: res.message
						})
					}
					setTimeout(()=>{
						uni.hideLoading()
					},1000)
				})
			},
			// 打开购物车
			openCart(){
				if(this.orderTotal){
					this.showCart = !this.showCart
				}else{
					uni.showToast({
						icon: 'none',
						title: '请先添加产品'
					})
				}
			},
			// 清空购物车
			clearDetail(){
				const _this = this
				clzConfirm({
				  title: '提示',
				  content: '确认将所有产品移出盘点单吗？',
				  success (ret) {
					if (ret.confirm || ret.index == 0) {
						uni.showLoading({
							title:"正在删除.."
						})
						deleteByStockCheckSn({ stockCheckSn: _this.stockCheckSn }).then(res => {
						  if (res.status == 200) {
							   _this.showCart = false
							   _this.getDetail()
							   _this.getChooseList()
						  }
						  uni.hideLoading()
						})
					}
				  }
				})
			},
			// 修改数量
			cartChangeNums(v){
				console.log(v,this.showCart)
				const data = this.chooseList.find(item => item.id == v.index.split('_')[1])
				uni.showLoading({
					title:"正在保存.."
				})
				this.saveProduct(data)
			},
			// 删除盘点详细
			delDetail(a,b){
				if(b==0){
					const data = this.chooseList[a]
					stockCheckDetailDelete({stockCheckDetailSn: data.stockCheckDetailSn}).then(res=>{
						if(res.status == 200){
							this.chooseList.splice(a,1)
							this.orderTotal = this.chooseList.length 
							// 删除最后一个后刷新列表
							if(this.orderTotal == 0){
								this.showCart = false
								this.getChooseList()
							}
							this.getDetail()
						}
					})
				}
			},
			// 是否已选
			hasChecked(data){
				return this.chooseList.find(item => item.shelfPlaceCode == data.shelfPlaceCode && item.productSn == data.productSn)
			},
			// 获取货位号
			getShelfPlace(flag){
				getProductPlace({ shelfSn: this.nowData.shelfSn }).then(res => {
				  if (res.status == 200) {
					for(let a in res.data){
						this.placeTab.push(a)
					}
					// 排序
					this.placeTab.sort(function(a,b){ return (a+'').localeCompare(b+'');});
					if(!flag){
					  this.curTab = ''
					}
				  } else {
				    this.placeTab = []
				  }
				})
			},
			handleClear(){
				this.curTab = ''
				this.curType = ''
				this.clearSearch()
			},
			clearSearch(){
				this.queryWord = ''
				this.changeSearch()
			},
			changeSearch(){
				this.pageNo = 1
				this.partList = []
				this.getpartList()
			},
			// 获取数字货架列表
			getpartList(){
				const _this = this
				let params = {
				    pageNo: this.pageNo,
				    pageSize: this.pageSize,
					shelfSn: this.nowData.shelfSn,
					queryWord: this.queryWord,
					shelfPlaceCodeHead: this.curTab,
					currQtyFlag: this.curType=='available' ? 1 : '',
					freezeQtyFlag: this.curType=='blocked' ? 1 : '',
				}
				_this.status = 'loading'
				getShelfProductList(params).then(res => {
					uni.hideLoading()
					if(res.status == 200){
						let list = res.data.list
						console.log(list)
						if (list && list.length){
							// 分页 拼接数据
							if (_this.pageNo != 1) {
								_this.partList = _this.partList ? _this.partList.concat(list) : list
							} else {
								_this.partList = list
							}
							this.total = res.data.count
							if (_this.partList.length == res.data.count) {
								_this.status = 'nomore'
							} else {
								_this.status = 'loadmore'
							}
						} else {
							_this.partList = list || []
							this.total = 0
							_this.status = 'nomore'
						}
						_this.noDataText = '暂无匹配产品'
					}else{
						_this.status = 'loadmore'
						_this.partList = []
						_this.total = 0
						_this.noDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
					}
					this.showTab = false
				})
			},
			// 加载更多
			onreachBottom () {
				if(this.partList.length < this.total ){
					this.pageNo++
					this.getpartList()
				}else{
					this.status = "nomore"
				}
			},
			// 提交盘点单
			submitOrder(){
				if(this.chooseList.length){
					uni.navigateTo({
						url: '/pages/stockCheck/submitStockCheck?stockCheckSn='+this.stockCheckSn+'&type=submit'
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请先添加产品'
					})
				}
			},
			// 扫描
			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){
				const params = {
					pageNo: 1,
					pageSize:1,
					shelfSn: this.nowData.shelfSn
				}
				// 二维码
				if(data.scanType == 'QRCODE'){
					const ret = data.scanValue.split("&")
					params.queryWord = ret[1] // 产品编码
				}else{
					params.qrCode = data.scanValue
				}
				getShelfProductList(params).then(res => {
					console.log(res)
					if(res.status == 200){
						if(res.data&&res.data.list.length){
							this.toEdit(res.data.list[0])
						}else{
							uni.showToast({
								icon: "none",
								title: "产品不属于此货架，请重新扫描",
								duration: 5000
							})
						}
					}
				})
			}
		}
	}
</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.5rem;
		flex-grow: 1;
		.scroll-view{
			height: calc(100vh - 260rpx);
			box-sizing: border-box;
		}
		.partList-list-box{
			padding: 20rpx 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
			&:last-child{
				border:0;
			}
			.product{
				flex-grow: 1;
				&:active{
					opacity: 0.6;
					background-color: #f8f8f8;
				}
				.pimgs{
					position: relative;
					border:2rpx solid #eee;
					border-radius: 15rpx;
					padding: 5rpx;
					> text{
						position: absolute;
						left: 0;
						bottom:0;
						z-index: 500;
						width: 100%;
						text-align: center;
						background: rgba(255, 0, 0, 0.6);
						color: #fff;
						font-size: 20upx;
					}
				}
				.item-detail{
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #9DA8B5;
					font-size: 26upx;
					.item-detail-text{
						font-size: 26upx;
						color: #333;
					}
				}
				.pinfo{
					flex-grow: 1;
					padding-left: 20rpx;
					.pname{
						font-size: 28rpx;
						color: #191919;
						text{
							font-weight: normal;
							margin-right: 6rpx;
							padding: 0 10rpx;
							background: rgba(3, 54, 146, 0.15);
							border-radius: 100rpx;
							color: #033692;
							font-size: 24rpx;
						}
					}
					.ptxt{
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						margin-top: 10upx;
						.pnums{
							color: #222;
						}
					}
				}
			}
		} 
	}
	.footer-bar{
		background-color: #f8f8f8;
		padding: 20upx;
		.f-left{
			background-color: #d8d8d8;
			padding: 15upx;
			border-radius: 100upx;
			color: #fff;
			position: relative;
		}
		.active{
			background-color: #0485F6;
		}
		.f-mid{
			flex-grow: 1;
			text{
				margin-right: 15upx;
				&:first-child{
					color: #00cb00;
				}
				&:last-child{
					color: red;
				}
			}
			padding: 0 15upx;
			font-size: 0.8rem;
			color: #666;
		}
		.f-btns{
			button{
				width: 200upx;
			}
		}
	}
	// 筛选
	.tabBox{
		height: 100vh;
		.tabs{
			flex-grow: 1;
			overflow: auto;
			padding: 20rpx;
			> view{
				flex-wrap: wrap;
				justify-content: space-between;
				> view{
					width: 45%;
					border: 1rpx solid #eee;
					padding: 15rpx;
					border-radius: 50rpx;
					text-align: center;
					margin-bottom: 15rpx;
				}
				.active{
					border:0;
					background-color: #0485F6;
					color: #fff;
				}
				&:first-child{
					> view{
						width: 100%;
					}
				}
			}
		}
		.btns{
			display: flex;
			padding: 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;
			}
			.item-name{
				font-size: 30rpx;
				text{
					background: rgba(3, 54, 146, 0.15);
					color: #1c588a;
					border-radius: 1em;
					font-size: 0.8em;
					padding: 0 0.5em;
					margin-right: 10upx;
				}
			}
			.item-info{
				border-bottom:2rpx solid #eee;
				flex-grow: 1;
				padding-left: 0.2em;
			}
			.item-detail{
				.item-detail-info{
					padding: 10upx 0 4upx;
					font-size: 24upx;
					> view{
						padding-bottom: 20rpx;
						align-items: center;
						.item-detail-text{
							color: #999;
							margin-left: 20upx;
						}
					}
				}
			}
		}
	}
}
</style>
