<template>
	<view class="cancelStockPages" :style="`backgroundImage:linear-gradient(180deg, ${$config('primaryColor')}, #F5F6F7 12%)`">
		<view class="cancelStockPages-body">
			<view class="head-info" v-if="info">
				<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>{{info.shelfName}}</view>
				</view>
				<view>
					<view class="label"><u-icon name="icon_position" custom-prefix="iscm-icon" size="32"></u-icon><text>客户地址</text></view>
					<view>{{info.shelfAddress}}</view>
				</view>
			</view>
			<view class="part-list">
				<!-- 配件列表 -->
				<partList title="配件列表" ref="partList" :list="partList" @allChecked="allCheckedCallback"></partList>
			</view>
		</view>
		<view class="cancelStockPages-footer">
			<view>
				<u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
			</view>
			<view>
				<u-button @click="submit" shape="circle" :custom-style="{background:$config('primaryColor')}" type="primary">确定退库</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { shelfRecallFindBySn, detailQueryCount, shelfRecallDetail, shelfRecallConfirm } from '@/api/shelfRecall.js'
	import partList from '../common/partList.vue'
	export default {
		components: {
			partList
		},
		data() {
			return {
				allChecked: false,
				recallBillSn: '',
				info:null,
				partList: []
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
		},
		onLoad(option) {
			this.recallBillSn = option.recallBillSn
			this.getDetail()
			this.getPartList()
		},
		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.info = res.data
					}
				})
			},
			// 查询配件列表
			getPartList(){
				shelfRecallDetail({recallBillSn:this.recallBillSn}).then(res => {
					if(res.status == 200){
						this.partList = res.data.data
					}
				})
			},
			// 确定退货
			submit(){
				const result =this.$refs.partList.getAllChecked()
				if(result.length){
					shelfRecallConfirm().then(res => {
						if(res.status == 200){
							uni.$emit("refreshBL")
							uni.navigateBack()
						}
						this.toashMsg(res.message)
					})
				}else{
					this.toashMsg("请选择配件！")
				}
			}
		}
	}
</script>

<style lang="less">
.cancelStockPages{
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	.cancelStockPages-body{
		padding: 0 30rpx;
		flex-grow: 1;
		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;
					}
				}
			}
			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{
		background-color: #fff;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>
