<template>
	<view class="replenishment-outWarehousing-wrap" :style="`backgroundImage:linear-gradient(180deg, ${$config('primaryColor')}, #F5F6F7 12%)`">
		<view class="replenishment-outWarehousing-body">
			<view class="head-info" v-if="basicInfoData">
				<view class="states">
					<view>
						<u-icon name="icon_out" custom-prefix="iscm-icon" size="48"></u-icon>
						<text>待出库</text>
					</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="icon_position" custom-prefix="iscm-icon" size="32"></u-icon><text>客户地址</text></view>
					<view class="info-txt">{{basicInfoData.customerAddr}}</view>
				</view>
			</view>
			<view class="part-list">
				<!-- 配件列表 -->
				<partList :list="partList" title="配件列表" model="view" fromPage="replenishmentOut" ref="partList" noDataText="暂无配件"></partList>
			</view>
		</view>
		<view class="replenishment-outWarehousing-footer">
			<u-button class="button" @click="printModal=true" :custom-style="customDefalutStyle" hover-class="none" shape="circle">打印标签</u-button>
			<u-button class="button" @click="goSendOutGoods" :loading="loading" type="success" :custom-style="customStyle" hover-class="none" shape="circle">发货出库</u-button>
		</view>
		<!-- 打印贴签 -->
		<print-sticker-modal :openModal="printModal" @confirm="modalPrint" @close="printModal=false" />
	</view>
</template>

<script>
	import printStickerModal from './printStickerModal.vue'
	import { shelfReplenishDetail, shelfReplenishDetailList } from '@/api/shelfReplenish'
	import partList from '@/pages/common/partList.vue'
	export default {
		components: { partList, printStickerModal },
		data() {
			return {
				loading: false,
				replenishBillSn: '',
				basicInfoData:null,
				partList: [],
				customStyle: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					background: this.$config('primaryColor')
				},
				customDefalutStyle: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					color: this.$config('primaryColor'),
					background: '#fff'
				},
				printModal: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
		},
		onLoad(option) {
			this.replenishBillSn = option.sn
			this.getDetail()
			this.getPartList()
		},
		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
				shelfReplenishDetailList({ replenishBillSn: this.replenishBillSn }).then(res => {
					if(res.status == 200 && res.data){
						res.data.map(item =>{
							item.confirmQty = item.confirmQty ? Number(item.confirmQty) : 0
						})
						this.partList = res.data || []
					}else{
						this.partList = []
					}
				})
			},
			// 打印贴签 confirm
			modalPrint(type){
				this.printModal = false
				if(type == 'manual'){  // 手动打印
					uni.navigateTo({ url: "/pages/replenishmentManage/manualPrint?sn="+this.replenishBillSn })
				}else if(type == 'scan'){  // 扫码打印
					uni.navigateTo({ url: "/pages/replenishmentManage/scanCodePrint?sn="+this.replenishBillSn })
				}
			},
			// 发货出库
			goSendOutGoods(){
				uni.navigateTo({ url: "/pages/replenishmentManage/sendOutGoods?sn="+this.replenishBillSn+'&shelfSn='+this.basicInfoData.shelfSn })
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100vh;
	}
.replenishment-outWarehousing-wrap{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding-bottom: 136upx;
	.replenishment-outWarehousing-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-outWarehousing-footer{
		padding: 26upx 32upx 30upx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 3px 1px 7px #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.button{
			width: 45%;
		}
	}
}
</style>
