<template>
	<view class="content flex flex_column">
		<view class="product-list flex" v-if="placeTab.length">
			<scroll-view scroll-y class="leftTabs">
				<view class="tabbox">
					<view v-for="item in placeTab" :key="item" :class="curTab==item?'active':''" @click="curTab = item">{{item}}层</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="rightCons" v-if="shelfPlaceList">
				<view 
				class="partList-list-box" 
				v-for="item in shelfPlaceList[curTab]" 
				:key="item.shelfCartSn"
				>
					<view class="flex align_center flex_1" @click="editRow(item)">
						<view class="pimgs">
							<u-image :src="item.product&&item.product.images?item.product.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image>
						</view>
						<view class="pinfo">
							<view class="ptxt">
								<text>{{item.shelfPlaceCode}}</text>
								{{item.productCode}}
							</view>
							<view class="pname">
								{{item.product.productName}}
							</view>
						</view>
					</view>
					<view class="ptools flex align_center justify_between">
						<view></view>
						<view class="pcurnums flex align_center">
							<view class="u-ninput">
								<u-number-box :long-press="false" :index="item.id" :input-height="60" @blur="updateNums" @plus="updateNums" @minus="updateNums" color="#000" bg-color="#fff" v-model="item.qty" :min="0"></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="product-list" v-else>
			<view style="padding: 200upx 0 0;">
				<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" text="暂无货位产品,请录入" img-width="150" mode="list"></u-empty>
			</view>
			<view style="text-align: center;margin-top: 50upx;" v-if="!loading">
				<u-button @click="showLayer=true" type='primary' shape="circle" size="medium">点击录入产品</u-button>
			</view>
		</view>
		<view class="footer-bar flex align_center justify_between" v-if="placeTab.length">
			<view class="heji flex align_center" @click="showPop=!showPop">
				所有层合计款数:<text>{{totalKs}}</text>;数量:<text>{{totalNums}}</text>;
				<u-icon name="arrow-up"></u-icon>
			</view>
			<view class="btns">
				<u-button @click="showLayer=true" type='primary' shape="circle" size="medium">继续录入产品</u-button>
			</view>
		</view>
		
		<!-- 合计弹框 -->
		<u-popup mode="bottom" closeable v-model="showPop" :z-index="100">
			<view class="heji-content">
				<view style="color: red;margin-top: -35rpx;margin-bottom: 15rpx;">
					<text @click="showDelLay=true"><u-icon name="trash"></u-icon>批量删除</text>
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;">
					<view class="heji-con-list">
						<view class="flex align_center" v-for="item in countData" :key="item.shelfTierCode">
							<view>{{item.shelfTierCode}}层</view>
							<view class="flex align_center">
								<text>款数:{{item.category}}</text>
								<text>数量:{{item.qty}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 选中层 -->
		<u-popup mode="center" width="80%" :mask-close-able="false" closeable @close="curLayer=''" v-model="showLayer" border-radius="15">
			<view class="layer-content">
				 <view class="tits">请选择产品的货架层号</view>
				 <view class="tagbox flex">
				 	<view>
				 		<view class="tag" :class="curLayer==item?'active':''" v-for="item in layerList" :key="item" @click="curLayer=curLayer==item?'':item">
				 			{{item}}层
				 		</view>
				 	</view>
				 </view>
				 <view class="newbtn flex justify_between" v-if="curLayer">
				 	<u-button shape="circle" @click="searchProduct()" size="medium">按产品编码搜索</u-button>
				 	<u-button @click="scanProduct()" type='primary' shape="circle" size="medium">扫描条形码匹配</u-button>
				 </view>
			</view>
		</u-popup>
		<!-- 选择层删除 -->
		<u-popup mode="center" width="80%" :duration="0" :mask-close-able="false" closeable @close="delLayer=[]" v-model="showDelLay" border-radius="15">
			<view class="layer-content">
				 <view class="tits">
					 <view>请选择需要删除的层</view>
					 <view>删除后,该层所有已录入的产品都会删除</view>
				 </view>
				 <view class="tagbox flex">
				 	<view>
				 		<view class="tag" :class="delLayer.indexOf(item)>=0?'active':''" v-for="item in countData" :key="item.shelfTierCode" @click="chooseDelLay(item)">
				 			{{item.shelfTierCode}}层
				 		</view>
				 	</view>
				 </view>
				 <view class="newbtn flex justify_between">
				 	<u-button shape="circle" @click="showDelLay=false" size="medium">取消</u-button>
				 	<u-button type='primary' @click="confirmDel" shape="circle" size="medium">确定删除</u-button>
				 </view>
			</view>
		</u-popup>
		<!-- 上架确认 -->
		<choose-type-modal v-if="chooseModal" :totalKs="totalKs" :totalNums="totalNums" :openModal="chooseModal" @confirm="confirmPut" @close="chooseModal = false" />
		<printStickerModal v-if="showPrintModal" :layer="curTab" :openModal="showPrintModal" @confirm="confirmPrint" @close="showPrintModal = false"></printStickerModal>
	</view>
</template>

<script>
	import { clzConfirm, numberToFixed } from '@/libs/tools';
	import {queryMapList, queryCountList, shelfCartSave, shelfCartDelete, queryEmptyCostList, shelfCartConfirm,deleteBatch} from '@/api/shelfCart.js'
	import chooseTypeModal from './chooseTypeModal'
	import printStickerModal from './printStickerModal'
	export default {
		components: {
			chooseTypeModal,
			printStickerModal
		},
		data() {
			return {
				loading: false,
				showPop: false,
				chooseModal: false,
				showPrintModal: false,
				shelfSn: '',
				shelfName: '',
				shelfPlaceList: null,
				placeTab: [],
				curTab: '',
				totalKs: 0,
				totalNums: 0,
				countData: [],
				layerList: [],
				showLayer: false,
				showDelLay: false,
				curLayer: '',
				delLayer: []
			}
		},
		onShow() {
			this.curLayer = ''
			this.pageInit()
		},
		onLoad(opts) {
			this.layerList = 'A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z'.split('、');
			this.shelfSn = opts.shelfSn
			this.shelfName = opts.shelfName
			this.customerSn = opts.customerSn
			uni.$on("setCostOk",()=>{
				this.chooseModal = true
			})
		},
		onBackPress(e) {
			console.log(e)
			if(e.from == "backbutton"){
				if(this.showLayer || this.showDelLay||this.chooseModal||this.showPrintModal){
					this.showLayer = false
					this.showDelLay = false
					this.chooseModal = false
					this.showPrintModal = false
					return true
				}
				if(this.showPop){
					this.showPop = false
					return true
				}
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			if(this.placeTab.length){
				// 上架入库
				if(e.index == 0){
					this.toPutaway()
				}
				// 打印贴签
				if(e.index == 1){
					this.showPrintModal = true
				}
			}else{
				uni.showToast({
					icon: 'none',
					title: '还未录入产品,不能操作',
					duration: 4000
				})
			}
		},
		methods: {
			pageInit(flag){
				this.placeTab = []
				this.shelfPlaceList = null
				this.countData = []
				this.getList(flag)
				this.getCount()
			},
			scanProduct(){
				this.showLayer = false
				uni.navigateTo({
					url: "/pages/batchShelves/scanProduct?shelfSn="+this.shelfSn+'&layer='+this.curLayer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn+'&from=cartList'
				})
			},
			searchProduct(){
				this.showLayer = false
				uni.navigateTo({
					url: "/pages/batchShelves/searchProduct?shelfSn="+this.shelfSn+'&layer='+this.curLayer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn+'&from=cartList'
				})
			},
			// 上架入库
			toPutaway(){
				uni.showLoading({
					title: '正在查询...',
					mask: true
				})
				queryEmptyCostList({shelfSn: this.shelfSn}).then(res => {
					console.log(res)
					uni.hideLoading()
					if(res.data&&res.data.length){
						this.$store.state.vuex_tempData = res.data
						// 去设置价格
						uni.navigateTo({
							url: "/pages/batchShelves/setProductCost?shelfSn="+this.shelfSn+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn
						})
					}else{
						this.chooseModal = true
					}
				})
			},
			//确认上架
			confirmPut(data){
				uni.showLoading({
					mask: true,
					title: '正在上架...'
				})
				shelfCartConfirm({
					shelfSn: this.shelfSn,
					...data
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					if(res.status == 200){
						uni.navigateBack()
					}
				})
			},
			// 打印
			confirmPrint(type){
				this.showPrintModal = false
				const shelfInfo = {
					shelfSn: this.shelfSn,
					shelfName: this.shelfName,
					layer: this.curTab
				}
				// 打印当前层
				if(type == 'manual'){
					const list = this.shelfPlaceList[this.curTab]
					this.$store.state.vuex_tempPrintList = list
					if(shelfInfo&&list.length){
						uni.navigateTo({
							url: "/pages/batchShelves/batchPrint/batchPrint?type=manual&data="+encodeURIComponent(JSON.stringify(shelfInfo)) 
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '没有可打印的产品',
							duration: 5000
						})
					}
				}else{
					// 搜索打印
					this.$store.state.vuex_tempPrintList = this.shelfPlaceList
					uni.navigateTo({
						url: "/pages/batchShelves/batchPrint/batchPrint?type=search&data="+encodeURIComponent(JSON.stringify(shelfInfo)) 
					})
				}
			},
			// 编辑
			editRow(item){
				this.$store.state.vuex_tempData = item
				uni.navigateTo({
					url: "/pages/batchShelves/editShelfHw?shelfSn="+this.shelfSn+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn
				})
			},
			// 获取产品列表
			getList(flag){
				uni.showLoading({
					mask: true,
					title: '正在加载...'
				})
				this.loading = true
				queryMapList({ shelfSn: this.shelfSn }).then(res => {
				  console.log(res.data)
				  uni.hideLoading()
				  this.loading = false
				  if (res.status == 200 && res.data) {
				    this.shelfPlaceList = JSON.stringify(res.data) == '{}' ? null : res.data
					// 获取层
					for(let a in res.data){
						this.placeTab.push(a)
					}
					this.placeTab.sort(function(a,b){ return (a+'').localeCompare(b+'');});
					console.log(this.placeTab)
					
					if(!this.curTab&&this.placeTab.length){
					  this.curTab = this.placeTab[0]
					}else{
						if(!this.shelfPlaceList[this.curTab]){
							this.curTab = this.placeTab[0]
						}
					}
					if(this.placeTab.length == 0){
						this.shelfPlaceList = null
						this.curTab = ''
					}
				  } else {
				    this.shelfPlaceList = null
					this.placeTab = []
					this.curTab = ''
				  }
				})
			},
			// 获取统计数据
			getCount(){
				this.totalKs = 0
				this.totalNums = 0
				queryCountList({shelfSn: this.shelfSn}).then(res => {
					if(res.status == 200){
						this.countData = res.data
						// 计算合计
						this.countData.map(item => {
							this.totalKs += item.category||0
							this.totalNums += item.qty||0
						})
						if(res.data.length==0){
							this.showPop = false
						}
					}
				})
			},
			// 删除
			shelfCartDelete(row){
				const _this = this
				clzConfirm({
				  title: '提示',
				  content: '确认删除此货位和产品吗?',
				  success (ret) {
						if (ret.confirm || ret.index == 0) {
							uni.showLoading({
								mask: true,
								title: '正在删除...'
							})
							shelfCartDelete({ shelfCartSn: row.shelfCartSn }).then(res => {
							  if (res.status == 200) {
								  _this.toashMsg(res.message)
								  _this.pageInit(true)
							  }
							  uni.hideLoading()
							})
						}else{
							_this.pageInit(true)
						}
				  }
				})
			},
			// 批量删除选择
			chooseDelLay(val){
				const i = this.delLayer.findIndex(item => item == val)
				if(i>=0){
					this.delLayer.splice(i,1)
				}else{
					this.delLayer.push(val)
				}
			},
			//确定批量删除
			confirmDel(){
				console.log(this.delLayer)
				if(this.delLayer.length){
					let delLayerArr = [];
					this.delLayer.map(item=>{
						delLayerArr.push(item.shelfTierCode);
					})
					uni.showLoading({
						mask: true,
						title: '正在删除...'
					})
					this.showDelLay =false
					deleteBatch({ shelfSn: this.shelfSn, shelfTierCodeList:delLayerArr }).then(res => {
					  if (res.status == 200) {
						  this.toashMsg(res.message)
						  this.pageInit(true)
					  }
					   uni.hideLoading()
					})
					
				}else{
					this.toashMsg("请选择层号")
				}
			},
			// 修改数量
			updateNums(e){
				console.log(e)
				const row = this.shelfPlaceList[this.curTab].find(item => item.id == e.index)
				const nums = e.value
				
				// 如果小于1,提示是否删除
				if(nums<1){
					this.shelfCartDelete(row)
					return
				}
				// 继续修改数量
				uni.showLoading({
					mask: true,
					title: '正在保存...'
				})
				const params = {
					shelfSn: row.shelfSn,
					shelfName: this.shelfName,
					shelfTierCode: row.shelfTierCode,
					shelfPlaceSn: row.shelfPlaceSn||undefined,
					shelfPlaceCode: row.shelfPlaceCode,
					productSn: row.productSn,
					productCode: row.productCode,
					qty: nums,
					price: row.price,
					cost: row.terminalPrice,
					shelfCartSn: row.shelfCartSn
				}
				console.log(params)
				shelfCartSave(params).then(res => {
					if(res.status == 200){
						this.toashMsg(res.message)
						this.getCount()
					}
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="less">
	.content{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		.product-list{
			flex-grow: 1;
			.leftTabs{
				width: 20%;
				height: calc(100vh - 110rpx);
				.tabbox{
					> view{
						padding: 0.8rem 0.5rem;
						border-left: 0.2rem solid #f8f8f8;
						text-align: center;
					}
					.active{
						border-color: rgb(47, 126, 209);
						background-color: #fff;
						color: rgb(47, 126, 209);
					}
				}
			}
			.rightCons{
				width: 80%;
				background-color: #fff;
				position: relative;
				padding: 0 20upx;
				height: calc(100vh - 110rpx);
				.partList-list-box{
					padding: 10px 0;
					border-bottom: 2rpx solid #f5f5f5;
					.pinfo{
						flex-grow: 1;
						padding-left: 20rpx;
						.ptxt{
							color: #666;
							font-size: 26rpx;
							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;
							}
							margin-bottom: 15upx;
						}
						.pname{
							color: #666;
							font-size: 30rpx;
							font-weight: bold;
						}
					}
					.ptools{
						color: #666;
						font-size: 26rpx;
						margin-top: 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;
						}
					}
				}
			}
		}
		.footer-bar{
			padding: 20rpx;
			position: relative;
			z-index: 200;
			background-color: #fff;
			.heji{
				flex-grow: 1;
				color: #999;
				text{
					color: #333;
				}
				font-size: 26rpx;
				padding-right: 30upx;
			}
			.btns{
				button{
					width: 200rpx;
					background-color: rgb(51, 95, 182);
					color: #fff;
				}
			}
		}
		.heji-content{
			padding: 60upx 30upx 100upx;
		}
		.heji-con-list{
			> view{
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #eee;
				padding: 18rpx 0;
				> view{
					&:first-child{
						font-weight: normal;
						padding: 4rpx 15rpx;
						background: rgba(3, 54, 146, 0.15);
						border-radius: 10rpx;
						color: #033692;
						font-size: 24rpx;
						margin-right: 30upx;
					}
					&:last-child{
						flex-grow: 1;
						text{
							margin-right: 20upx;
						}
					}
				}
			}
		}
		
		.layer-content{
			padding: 30upx;
			.tits{
				padding: 10upx 0 20upx;
				text-align: center;
			}
			.tagbox{
				flex-grow: 1;
				> view{
					margin: 0 auto;
					overflow: hidden;
					width: 100%;
					.tag{
						width: 16%;
						background-color: #fff;
						border:1rpx solid #aeaeae;
						box-shadow: 2rpx 4rpx 6rpx #eee;
						border-radius: 15rpx;
						text-align: center;
						padding: 10rpx 0;
						float: left;
						margin: 10rpx 2%;
					}
					.active{
						background-color: #55aaff;
						border-color: #55aaff;
						color: #fff;
					}
				}
			}
			.newbtn{
				padding: 40upx 0 10upx;
				button{
					width: 45%;
				}
			}
		}
	}
</style>