<template>
	<view class="replenishment-putWarehousing-wrap">
		<u-navbar back-text="补货签收" :border-bottom="false" :background="{backgroundColor: $config('primaryColor')}" back-icon-color="#fff" :back-text-style="{ color: '#fff' }">
			<view slot='right' style="padding: 0 30upx;color: #ffffff;" @click="creatSalesOrder">
				<u-icon name="chuangjiandingdan" custom-prefix="iscm-icon"></u-icon>
				<text style="margin-left: 6rpx;">生成销售单</text>
			</view>
		</u-navbar>
		<view class="replenishment-putWarehousing-body" :style="`backgroundImage:linear-gradient(180deg, ${$config('primaryColor')}, #F5F6F7 12%)`">
			<view class="head-info" v-if="basicInfoData">
				<view class="states">
					<view>
						<u-icon name="icon_warehousing" custom-prefix="iscm-icon" size="48"></u-icon>
						<text>待签收</text>
					</view>
				</view>
				<!-- <view>
					<view class="label"><u-icon name="icon_delivery" custom-prefix="iscm-icon" size="32"></u-icon><text>配送方式</text></view>
					<view class="info-txt">{{basicInfoData.dispatchTypeDictValue || '--'}}</view>
				</view> -->
				<view>
					<view class="label"><u-icon name="ison_shelf" custom-prefix="iscm-icon" size="32"></u-icon><text>货架名称</text></view>
					<view class="info-txt">{{basicInfoData.shelfInfo&&basicInfoData.shelfInfo.shelfName || '--'}}</view>
				</view>
				<view>
					<view class="label"><u-icon name="xinxi" custom-prefix="iscm-icon" size="32"></u-icon><text>出库备注</text></view>
					<view class="info-txt">{{basicInfoData.remarks || '--'}}</view>
				</view>
			</view>
			<view class="part-list">
				<!-- 补货产品 -->
				<partList :list="partList" title="配件列表" model="view" fromPage="replenishmentSign" ref="partList" noDataText="暂无产品" @numberChange="numberChange"></partList>
			</view>
		</view>
		<view class="replenishment-putWarehousing-footer">
			<u-button @click="confirmModal=true" type="success" :loading="loading" :custom-style="customStyle" hover-class="none" shape="circle">确定签收（{{confirmQty}}/{{totalQty}}）</u-button>
		</view>
		<!-- 确认弹框 -->
		<common-modal :openModal="confirmModal" content="签收后数字货架的产品数量将增加，确认签收吗？" confirmText="确认签收" @confirm="modalConfirm" @close="confirmModal=false" />
		<!-- 生成销售单 -->
		<common-modal v-if="showModal" :showTitle="false" :openModal="showModal" @confirm="showModalConfirm" @close="showModal=false">
			<view style="font-size: 28upx;">
				<view style="padding: 10upx;margin: 20upx 0;" class="flex align_center justify_between">
					<view>产品总款数：<text style="color: red;">{{partList.length}}</text></view>
					<view>产品总件数：<text style="color: red;">{{totalNums}}</text></view>
				</view>
				<view v-if="salesOrderList.length">
					<view style="padding: 0 10upx 5upx;">此补货单已经存在对应的销售单？</view>
					<view style="padding: 0 10upx 20upx;">确认再次生成销售单吗？</view>
					<scroll-view :scroll-y="true" style="max-height: 18vh;">
						<view 
						v-for="item in salesOrderList" 
						:key="item.id"
						style="color: #00aaff;border-bottom: 1px solid #eee;padding: 10upx 0;" 
						class="flex align_center justify_between"
						@click="viewSales(item)"
						>
							<text>{{item.salesBillNo}}</text>
							<view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-else>
					<view style="padding: 0 10upx 20upx;">确认生成销售单？</view>
					<view>
						<view 
						v-for="item in salesOrderList" :key="item.id"
						style="color: #00aaff;border-bottom: 1px solid #eee;padding: 10upx 0;" 
						class="flex align_center justify_between">
							<text>{{item.orderNo}}</text>
							<view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</common-modal>
	</view>
</template>

<script>
	import commonModal from '@/pages/common/commonModal.vue'
	import { salesDetailBySn } from '@/api/sales'
	import { shelfReplenishDetail, shelfReplenishDetailList, shelfReplenishPutStock, queryRelationSalesBill, createSalesBill } from '@/api/shelfReplenish'
	import partList from '@/pages/common/partList.vue'
	export default {
		components: { partList, commonModal },
		data() {
			return {
				loading: false,
				replenishBillSn: '',
				basicInfoData:null,
				partList: [],
				confirmQty: 0,  // 实发数量之和
				totalQty: 0,  // 应发数量之和
				customStyle: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					background: this.$config('primaryColor')
				},
				confirmModal: false,
				showModal: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
		},
		onBackPress() {
			if(this.showModal){
				this.showModal = false
				return true
			}
		},
		onLoad(option) {
			this.replenishBillSn = option.sn
			this.getDetail()
			this.getPartList()
			this.getSalesOrder()
		},
		computed: {
			totalNums() {
				let ret = 0
				this.partList.map(item => {
					ret = ret + item.qty
				})
				return ret
			}
		},
		methods: {
			// 查询详情
			getDetail(){
				shelfReplenishDetail({ sn: this.replenishBillSn }).then(res => {
					if(res.status == 200){
						this.basicInfoData = res.data || null
					}else{
						this.basicInfoData = null
					}
				})
			},
			// 查询列表
			getPartList(){
				const _this = this
				this.showLoading()
				shelfReplenishDetailList({ replenishBillSn: this.replenishBillSn }).then(res => {
					uni.hideLoading()
					if(res.status == 200 && res.data){
						_this.totalQty = 0
						_this.confirmQty = 0
						res.data.map(item =>{
							item.putQty = item.qty ? Number(item.qty) : 0
							if(item.qty && Number(item.qty)){
								_this.totalQty += Number(item.qty)
							}
							if(item.putQty && Number(item.putQty)){
								_this.confirmQty += Number(item.putQty)
							}
						})
						this.partList = res.data || []
					}else{
						this.partList = []
					}
				})
			},
			// 确认签收 confirm
			modalConfirm(){
				const arr = []
				const retList = this.$refs.partList.getAllData()
				retList.map((item, index) => {
				  if (item.putQty || item.putQty == 0) {
				    arr.push({
						productSn: item.productSn,
						putQty: item.putQty,
						replenishBillDetailSn: item.replenishBillDetailSn,
						shelfPlaceSn: item.shelfPlaceSn,
						shelfPlaceCode: item.shelfPlaceCode,
						id: item.id
					})
				  }
				})
				const params = {
				  replenishBillSn: this.replenishBillSn,
				  detailList: arr
				}
				console.log(params)
				this.loading = true
				shelfReplenishPutStock(params).then(res => {
					if(res.status == 200){
						uni.$emit('refreshBL')
						uni.$emit("refreshBhList",'FINISH')
						uni.navigateBack()
					}
					this.toashMsg(res.message)
					this.loading = false
				})
			},
			// 数量 change
			numberChange(value, index){
				const _this = this
				this.confirmQty = 0
				let list = this.$refs.partList.getAllData()
				list.map(item => {
					if(item.putQty && Number(item.putQty)){
						_this.confirmQty += Number(item.putQty)
					}
				})
			},
			// 查询关联销售单
			getSalesOrder () {
			  queryRelationSalesBill({ replenishBillSn: this.replenishBillSn }).then(res => {
			    if (res.status == 200) {
			      this.salesOrderList = res.data
			    } else {
			      this.salesOrderList = []
			    }
			  })
			},
			// 生成销售单
			creatSalesOrder(){
				this.showModal = true
			},
			showModalConfirm(){
				this.showLoading("正在生成销售单...")
				createSalesBill({ replenishBillSn: this.replenishBillSn }).then(res => {
					if (res.status == 200) {
						this.getSalesOrder()
					}
					this.showModal = false
					this.toashMsg(res.message)
					uni.hideLoading()
				})
			},
			// 查看销售单
			viewSales(data){
				salesDetailBySn({ salesBillSn: data.salesBillSn }).then(res => {
				  if (res.data) {
				    uni.navigateTo({ url: '/pages/sales/edit?pageType=detail&data='+JSON.stringify(data) })
				  } else {
				    this.toashMsg('此销售单已被删除！')
				  }
				})
			}
		}
	}
</script>

<style lang="less">
page{
	height: 100vh;
}
.replenishment-putWarehousing-wrap{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding-bottom: 280upx;
	.replenishment-putWarehousing-body{
		padding: 0 30rpx;
		height: 100%;
		overflow: auto;
		> view{
			padding: 10rpx 25rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 25rpx;
			box-shadow: 2rpx 3rpx 5rpx #eee;
		}
		.head-info{
			.states{
				border: 0;
				padding: 20rpx 0;
				> view{
					color: #191919;
					text-align: center;
					font-size: 40rpx;
					text{
						margin-left: 20rpx;
					}
				}
			}
			.info-txt{
				word-break: break-word;
			}
			font-size: 30rpx;
			> view{
				display: flex;
				border-bottom: 2rpx solid #f5f5f5;
				padding: 20rpx 0;
				> view:last-child{
					flex-grow: 1;
					width: 80%;
				}
				&:last-child{
					border:0;
				}
			}
			.label{
				display: flex;
				align-items: center;
				width: 220rpx;
				height: 44rpx;
				color: #7C7D7E;
				text{
					margin-left: 10rpx;
				}
			}
		}
	}
	.replenishment-putWarehousing-footer{
		padding: 26upx 32upx 30upx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 3px 1px 7px #eee;
	}
}
</style>
