<template>
	<view class="replenishment-confirm-wrap">
		<scroll-view scroll-y class="replenishment-confirm-cont">
			<view class="replenishment-confirm-main" v-for="(item,index) in listdata" :key="item.id">
				<u-image class="item-pic" :src="item.product&&item.product.productMsg?item.product.productMsg:`../../static/${theme}/def_img@2x.png`" width="64px" height="64px"></u-image>
				<view class="item-con">
					<view class="item-name">{{item.product&&item.product.name?item.product.name:'--'}}</view>
					<view class="item-code">{{item.product&&item.product.code?item.product.code:'--'}}</view>
					<view class="item-num">
						<view class="num-t">x {{item.qty||item.qty==0?item.qty:'--'}} {{item.product&&item.product.unit?item.product.unit:'--'}}</view>
						<view class="num-v">
							<u-number-box color="#000" bg-color="#fff" v-model="item.confirmQty" @change="handlerChange" :min="0" :max="999999"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="240" :text="noDataText" img-width="120" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
		</scroll-view>
		<view class="replenishment-confirm-footer" v-if="listdata.length>0">
			<u-button @click="confirmModal=true" :loading="loading" type="success" :custom-style="customStyle" hover-class="none" shape="circle">确定补货（{{confirmQty}}/{{totalQty}}）</u-button>
		</view>
		<!-- 确认弹框 -->
		<common-modal :openModal="confirmModal" content="确认对该数字货架进行补货吗？" confirmText="确认补货" @confirm="modalConfirm" @close="confirmModal=false" />
		<!-- 库存不足 弹框 -->
		<stock-modal :openModal="stockModal" :list="stockList" :params="paramsData" @confirm="modalStock" @close="stockModal=false" />
	</view>
</template>

<script>
	import commonModal from '@/pages/common/commonModal.vue'
	import stockModal from './stockModal.vue'
	import { shelfReplenishDetailList, shelfReplenishDetailStock, shelfReplenishConfirm } from '@/api/shelfReplenish'
	export default {
		components: { commonModal, stockModal },
		data() {
			return {
				loading: false,
				listdata: [],
				status: 'loadmore',
				noDataText: '暂无数据',
				theme: '',
				customStyle: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					background: this.$config('primaryColor')
				},
				confirmQty: 0,  // 实发数量之和
				totalQty: 0,  // 应发数量之和
				replenishBillSn: '',
				confirmModal: false,
				stockModal: false,
				stockList: [],
				paramsData: null
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
		},
		onLoad(options){
			this.theme = getApp().globalData.theme
			this.replenishBillSn = options.sn
			this.getRow()
		},
		methods:{
			// 查询列表
			getRow () {
				const _this = this
				shelfReplenishDetailList({ replenishBillSn: this.replenishBillSn }).then(res => {
					if (res.status == 200) {
						_this.totalQty = 0
						_this.confirmQty = 0
						res.data.map(item =>{
							item.confirmQty = item.qty || 0
							if(item.qty && Number(item.qty)){
								_this.totalQty += Number(item.qty)
							}
							if(item.confirmQty && Number(item.confirmQty)){
								_this.confirmQty += Number(item.confirmQty)
							}
						})
						this.listdata = res.data || []
					} else {
						this.listdata = []
					}
				})
			},
			handlerChange(value, index){
				const _this = this
				this.confirmQty = 0
				this.listdata.map(item => {
					if(item.confirmQty && Number(item.confirmQty)){
						_this.confirmQty += Number(item.confirmQty)
					}
				})
			},
			// 确认补货 confirm
			modalConfirm(){
				const arr = []
				this.listdata.map((item, index) => {
					if (item.confirmQty || item.confirmQty == 0) {
						arr.push({
							productSn: item.productSn,
							confirmQty: item.confirmQty,
							replenishBillDetailSn: item.replenishBillDetailSn,
							id: item.id
						})
					}
				})
				const params = {
					shelfSn: this.listdata[0].shelfSn,
					replenishBillSn: this.replenishBillSn,
					replenishBillNo: this.listdata[0].replenishBillNo,
					detailList: arr
				}
				// this.loading = true
				// 校验产品库存是否足够
				// shelfReplenishDetailStock(params).then(res => {
				// 	if (res.status == 200) {
				// 		if (res.data && res.data.length > 0) {
				// 			this.stockList = res.data || []
				// 			this.paramsData = params
				// 			this.confirmModal = false
				// 			this.stockModal = true
				// 			this.loading = false
				// 		} else {
				// 			this.confirmModal = false
				// 			this.confirmFun(params)
				// 		}
				// 	}
				// })
				
				this.confirmModal = false
				this.confirmFun(params)
			},
			// 提交确认
			confirmFun (params) {
				this.loading = true
				shelfReplenishConfirm(params).then(res => {
					this.loading = false
					if (res.status == 200) {
						this.toashMsg(res.message)
						uni.$emit('refreshBL')
						uni.$emit("refreshBhList",'WAIT_OUT_STOCK')
						uni.navigateBack()
					}else{
						this.toashMsg(res.message)
					}
				})
			},
			// 库存不足  confirm
			modalStock(params){
				this.stockModal = false
				this.loading = true
				this.confirmFun(params)
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
	}
	.replenishment-confirm-wrap{
		background-color: #fff;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding-bottom: 136upx;
		.replenishment-confirm-cont{
			width: 100%;
			height: 100%;
			overflow: auto;
			.replenishment-confirm-main{
				display: flex;
				justify-content: space-between;
				margin: 0 32upx;
				padding: 30upx 0;
				border-bottom: 1px solid #E5E5E5;
				.item-pic{
					flex-shrink: 0;
					margin-right: 20upx;
				}
				.item-con{
					flex-grow: 1;
					.item-name{
						color: #191919;
						font-size: 30upx;
						font-weight: bold;
					}
					.item-code{
						color: #999999;
						font-size: 26upx;
					}
					.item-num{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.num-t{
							color: #707070;
							font-size: 26upx;
						}
						.num-v{
							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;
						}
					}
				}
			}
		}
		.replenishment-confirm-footer{
			padding: 26upx 32upx 30upx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-shadow: 3px 1px 7px #eee;
		}
	}
</style>
