<template>
	<view class="cancelStockPages" :style="`backgroundImage:linear-gradient(180deg, ${$config('primaryColor')}, #F5F6F7 12%)`">
		<view class="cancelStockPages-body">
			<view class="head-info" v-if="basicInfoData">
				<view class="states">
					<view>
						<u-icon name="icon_withdrawal" 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 title="配件列表" fromPage="recall" ref="partList" :list="partList" @allChecked="allCheckedCallback"></partList> -->
				<partList title="配件列表" fromPage="recall" ref="partList" model="view" :list="partList"></partList>
			</view>
		</view>
		<view class="cancelStockPages-footer">
			<u-button @click="submit" shape="circle" :custom-style="{background:$config('primaryColor')}" type="primary">确定退库</u-button>
		</view>
		<!-- 确认弹框 -->
		<common-modal :openModal="confirmModal" content="此操作将会扣减数字货架的库存，确认退库吗？" confirmText="确认退库" @confirm="modalConfirm" @close="confirmModal=false" />
		<!-- 生成销售退货单弹窗 -->
		<common-modal :showTitle="false" :openModal="refundModal" @confirm="refundModalConfirm" @close="refundModal=false">
			<view style="font-size: 28upx;">
				<view style="padding: 10upx;" class="flex align_center justify_between" v-if="basicInfoData">
					<view>产品总款数：<text style="color: red;">{{basicInfoData.totalCategory}}</text></view>
					<view>产品总件数：<text style="color: red;">{{basicInfoData.totalQty}}</text></view>
				</view>
				<view v-if="salesOrderList.length">
					<view style="padding: 0 10upx 10upx;">此调回单已经存在对应的销售退货单？</view>
					<view style="padding: 0 10upx 20upx;">确认再次生成销售退货单吗？</view>
					<scroll-view scroll-y="true" style="height: 200rpx;">
						<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.salesReturnNo}}</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 partList from '@/pages/common/partList.vue'
	import { shelfRecallFindBySn, shelfRecallDetail, shelfRecallConfirm,generateSaleReturnBill } from '@/api/shelfRecall.js'
	export default {
		components: { commonModal, partList },
		data() {
			return {
				allChecked: false,
				recallBillSn: '',
				basicInfoData: null,
				partList: [],
				confirmModal: false,
				refundModal:false,
				salesOrderList:[]
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
		},
		onLoad(option) {
			this.recallBillSn = option.sn
			this.getDetail()
			this.getPartList()
		},
		onNavigationBarButtonTap(){
			this.refundModal = true;
		},
		methods: {
			// 全选
			// allCheckeChange(e){
			// 	this.$refs.partList.allSelect(e.value)
			// },
			// allCheckedCallback(val){
			// 	this.allChecked = val
			// },
			// 查询详情
			getDetail(){
				shelfRecallFindBySn({sn: this.recallBillSn}).then(res => {
					if(res.status == 200){
						this.basicInfoData = res.data || null
						this.salesOrderList = res.data.salesReturnBillList ? res.data.salesReturnBillList:[];
					}else{
						this.basicInfoData = null
					}
				})
			},
			// 查询配件列表
			getPartList(){
				shelfRecallDetail({ recallBillSn: this.recallBillSn }).then(res => {
					if(res.status == 200 && res.data){
						res.data.map(item =>{
							item.confirmQty = item.qty ? Number(item.qty) : 0
						})
						this.partList = res.data || []
						console.log(res.data)
					}else{
						this.partList = []
					}
				})
			},
			// 确定退货
			submit(){
				this.confirmModal = true
				// const result =this.$refs.partList.getAllChecked()
				// if(result.length){
				// 	this.confirmModal = true
				// }else{
				// 	this.toashMsg("请选择配件！")
				// }
			},
			// 确认退库 confirm
			modalConfirm(){
				const result =this.$refs.partList.getAllData()
				const arr = []
				result.map((item, index) => {
					if (item.confirmQty || item.confirmQty == 0) {
						arr.push({
							productSn: item.productSn,
							confirmQty: item.confirmQty,
							recallBillDetailSn: item.recallBillDetailSn
						})
					}
				})
				const params = {
					shelfSn: this.partList[0].shelfSn,
					recallBillSn: this.recallBillSn,
					recallBillNo: this.partList[0].recallBillNo,
					detailList: arr
				}
				shelfRecallConfirm(params).then(res => {
					if(res.status == 200){
						uni.$emit("refreshBL")
						uni.navigateBack()
					}
					this.toashMsg(res.message)
				})
			},
			// 生成销售退货单
			refundModalConfirm(){
				generateSaleReturnBill({ recallBillSn: this.recallBillSn }).then(res => {
				  if (res.status == 200) {
				   uni.showToast({
				   	title:res.message
				   })
				   this.getDetail();
				   setTimeout(()=>{
						this.refundModal = false 
				   },800)
				  }else{
					  uni.showToast({
					  	title:res.message,
						icon:'none'
					  }) 
				  }
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100vh;
	}
.cancelStockPages{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding-bottom: 136upx;
	.cancelStockPages-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;
				}
			}
		}
	}
	.cancelStockPages-footer{
		padding: 20upx 32upx 26upx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 3px 1px 7px #eee;
		.button{
			width: 100%;
		}
	}
}
</style>
