<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>
						<u-number-box class="num-v" v-model="item.confirmQty" @change="handlerChange" :min="0" :max="item.qty" color="#000"></u-number-box>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="replenishment-confirm-footer">
			<u-button @click="confirmModal=true" 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" />
	</view>
</template>

<script>
	import commonModal from '@/pages/common/commonModal.vue'
	import { shelfReplenishDetailList, shelfReplenishDetailStock, shelfReplenishConfirm } from '@/api/shelfReplenish'
	export default {
		components: { commonModal },
		data() {
			return {
				listdata: [],
				theme: '',
				customStyle: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					background: '#0485F6'
				},
				confirmQty: 0,  // 实发数量之合
				totalQty: 0,  // 应发数量之合
				confirmModal: false,
				replenishBillSn: ''
			}
		},
		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
						})
					}
				})
				const params = {
					replenishBillSn: this.replenishBillSn,
					detailList: arr
				}
				// 校验产品库存是否足够
				shelfReplenishDetailStock(params).then(res => {
					if (res.status == 200) {
						// if (res.data && res.data.length > 0) {
							// this.stockList = res.data
							// this.validateType = 'confirm'
							// this.paramsData = params
							// this.openStockModal = true
						// } else {
							this.confirmFun(params)
						// }
					}
				})
			},
			// 提交确认
			confirmFun (params) {
				shelfReplenishConfirm(params).then(res => {
					if (res.status == 200) {
						uni.showToast({icon: 'none', title: '确认补货成功'})
						uni.$emit('refreshBL')
						uni.navigateTo({ url: "/pages/replenishmentManage/replenishmentList" })
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #fff;
	}
	.replenishment-confirm-wrap{
		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{
							
						}
					}
				}
			}
		}
		.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>
