<template>
	<view class="parts-wrap">
		<w-navbar title="退件"></w-navbar>
		<view class="form">
			<view class="row">
				<view class="label">返件方式</view>
				<view class="u-flex u-row-between control">
					<view v-for="(item, index) in ways" :key="index">
						<view :class="['radio', {'active': index==curWay}]" @click="changeWay(index)">{{item}}</view>
					</view>
				</view>
			</view>
			<view class="row" v-show="isExpress">
				<view class="label">物流公司</view>
				<u-input v-model="expressCom" :custom-style="inputStyle" height="76" placeholder="请填写物流公司" />
			</view>
			<view class="row" v-show="isExpress">
				<view class="label">物流单号</view>
				<u-input v-model="expressNumber" :custom-style="inputStyle" height="76" placeholder="请填写物流单号" />
			</view>
		</view>
		<view class="bottom">
			<button class="submit-btn" @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parts: [],
				ways: ['快递', '其他'],
				curWay: 0,
				expressCom: '',
				expressNumber: '',
				inputStyle: {
					'background-color': '#F4F5F7',
					'padding': '0 20rpx',
					'border-radius': '12rpx',
				}
			}
		},
		onLoad() {
			getApp().trackPage("退返件页")
			this.receiveData()
		},
		computed: {
			isExpress() {
				return this.curWay == 0
			},
		},
		methods: {
			receiveData() {
				var pages = getCurrentPages();
				if(pages.length >= 2) {
					var prevPage = pages[pages.length - 2];  //上一个页面
					const parts = prevPage.$vm.selectedParts
					if(this.$u.test.isEmpty(parts)) {
						this.$u.route({type: 'back'})
					}
					this.parts = parts
				}
			},
			changeWay(index) {
				this.curWay = index
			},
			validateForm() {
				if(this.$u.test.isEmpty(this.parts)) {
					this.$u.toast('物料不能为空')
					return false
				}
				if(this.curWay == 0) {
					if(this.$u.test.isEmpty(this.expressCom)) {
						this.$u.toast('物流公司不能为空')
						return false
					}
					if(this.$u.test.isEmpty(this.expressNumber)) {
						this.$u.toast('物流单号不能为空')
						return false
					}
				}
				return true
			},
			submitForm() {
				if(!this.validateForm()) {
					return false
				}
				
				let parts = this.parts.map((item)=>{
					return {skuId: item.skuId, quantity: item.quantity}
				})
				let params = {
					parts: JSON.stringify(parts),
					expressCom: this.expressCom || '',
					expressNumber: this.expressNumber || ''
				}
				this.$u.api.returnParts(params).then((res) => {
					if(res.code == 200 && res.data) {
						this.$u.route({
							type: 'redirect',
							url: 'pages/parts/nodes',
							params: {
								type: 1,
								returnNo: res.data.batchNumber
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.parts-wrap {
	width: 750rpx;
	height: 100vh;
	overflow: auto;
	background-color: #FFFFFF;
	.form {
		padding: 46rpx 30rpx;
		.row {
			width: 454rpx;
			margin-bottom: 50rpx;
			.label {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				margin-bottom: 30rpx;
			}
			.control {
				.radio {
					text-align: center;
					width: 216rpx;
					height: 76rpx;
					background: #F4F5F7;
					border-radius: 12rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #333333;
					line-height: 76rpx;
				}
				.active {
					background: #2272FF;
					color: #FFFFFF;
				}
			}
		}
	}
	.bottom {
		position: absolute;
		left: 76rpx;
		right: 76rpx;
		bottom: 68rpx;
		.submit-btn {
			height: 104rpx;
			border-radius: 52rpx;
			background-color: #2272FF;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 600;
			line-height: 104rpx;
		}
	}
}
</style>
