<template>
	<view class="sales_return">
		<view class="goods_box">
			<view v-for="(item, goodsIdx) in goods" :key="item.id" class="goods_con">
				<view class="flexS">
					<image :src="item.img" class="goods_img"></image>
					<view class="goods_info">
						<view class="goods_name">{{ item.name }}</view>
						<view class="one_year">3条装</view>
						<view class="flexB">
							<view class="total">
								<text>¥</text>
								<text>{{ item.price }}</text>
							</view>
							<text>X {{ item | refundNum }}套</text>
						</view>
					</view>
				</view>
				<view class="goods_intr flexB">
					<view>规格</view>
					<view>尺码</view>
					<view>购买数量</view>
					<view class="modified">退货数量</view>
				</view>
				<view class="goods_size flexB" v-for="(temp, skuIdx) in item.newSku" :key="temp.id">
					<view>{{ temp.type }}</view>
					<view>{{ temp.size }}</view>
					<view>{{ temp.num }}</view>
					<view class="modified flexC">
						<text class="iconfont iconxianxingtubiaozhizuomoban-02" @click="minus(goodsIdx, skuIdx)"></text>
						<input type="number" :style="{ color: temp.quitNum > 0 ? '#FB231F' : '#999' }"
							v-model="temp.quitNum" class="num" @input="getVal($event, goodsIdx, skuIdx, temp.num)" />
						<text class="iconfont iconxianxingtubiaozhizuomoban-01"
							@click="plus(goodsIdx, skuIdx, temp.num)"></text>
					</view>
				</view>
			</view>
			<view class="noData" v-if="goods.length == 0">
				<image src="../../static/imgs/default/no_record.png" class="default"></image>
				<view>--暂无可退货数据--</view>
			</view>
		</view>
		<view class="sure flexC" @click="confirm" v-if="goods.length > 0">确认</view>
	</view>
</template>

<script>
	import {
		refundOrderInfo
	} from '../../apis/shop.js';
	export default {
		data() {
			return {
				goods: '', //商品信息
				order_no: '' //订单编号
			};
		},
		onLoad(ops) {
			this.order_no = ops.order_no;
			this.getOrder(ops.order_no);
		},
		filters: {
			refundNum(data) {
				let refundNum = 0;
				data.newSku.map(i => {
					refundNum += i.num;
				});
				return refundNum;
			}
		},
		methods: {
			/*获取订单信息*/
			getOrder(order_no) {
				refundOrderInfo({
					order_no
				}).then(res => {
					if (res.code == 200) {
						this.order_no = res.data.order_no;
						let list = res.data.products;
						let arr = [];
						for (let key in list) {
							let sku = list[key].sku;
							list[key].newSku = [];
							for (let item in sku) {
								if (list[key].id == sku[item].goods_id) {
									sku[item].quitNum = 0;
									list[key].newSku.push(sku[item]);
								}
							}
							arr.push(list[key]);
						}
						this.goods = arr;
					} else {
						uni.showModal({
							content: res.msg || '获取订单信息失败',
							showCancel: false
						});
					}
				});
			},
			//获取添加的数量
			getVal(e, goodsIdx, skuIdx, num) {
				let curNum = Number(e.detail.value);
				if (curNum > num) {
					uni.showToast({
						title: '超出已购买数量',
						icon: 'none'
					});
					this.goods[goodsIdx].newSku[skuIdx].quitNum = 0;
					return false;
				}
				this.goods[goodsIdx].newSku[skuIdx].quitNum = Number(e.detail.value);
			},
			plus(goodsIdx, skuIdx, num) {
				if (this.goods[goodsIdx].newSku[skuIdx].quitNum == num) {
					uni.showToast({
						title: '超出已购买数量',
						icon: 'none'
					});
					return false;
				}
				this.goods[goodsIdx].newSku[skuIdx].quitNum++;
			},
			minus(goodsIdx, skuIdx) {
				if (this.goods[goodsIdx].newSku[skuIdx].quitNum == 0) {
					uni.showToast({
						title: '没有可减的啦~',
						icon: 'none'
					});
					return false;
				}
				this.goods[goodsIdx].newSku[skuIdx].quitNum--;
			},
			/*确认退货*/
			confirm() {
				let list = this.goods;
				let arr = [];
				list.map(i => {
					i.newSku.map(j => {
						if (j.quitNum > 0) {
							arr.push(j);
						}
					});
				});
				//判断是否有选中的尺码
				if (arr.length == 0) {
					uni.showModal({
						content: '请选择退货数量',
						showCancel: false
					});
					return false;
				}
				uni.setStorageSync('goodsInfo', this.goods);
				uni.navigateTo({
					url: '../sales-return/sales-return?order_no=' + this.order_no
				});
			}
		}
	};
</script>
<style>
	page {
		width: 100%;
		min-height: 100%;
		background: #f9f9fb;
	}
</style>
<style lang="scss" scoped>
	.sales_return {
		position: relative;
		padding-bottom: 150rpx;

		.goods_box {
			.goods_con {
				width: 690rpx;
				margin: 0 auto;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				border-radius: 24rpx;
				background: #fff;
				margin-top: 30rpx;

				.goods_img {
					width: 180rpx;
					height: 144rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.goods_info {
					.goods_name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.one_year {
						width: 200rpx;
						margin: 10rpx 0;
						box-sizing: border-box;
					}
				}

				.goods_intr {
					width: 100%;
					padding: 15rpx 0;
					margin-top: 15rpx;
					border-bottom: 2rpx solid #eeeeee;

					view {
						width: 20%;
						font-size: 28rpx;
						color: #999;
						text-align: center;
					}

					.modified {
						width: 30%;
					}
				}

				.goods_size {
					padding: 15rpx 0;
					font-size: 32rpx;
					font-weight: bold;

					view {
						width: 15%;
						text-align: center;
					}

					.modified {
						width: 30%;

						.iconfont {
							font-size: 55rpx;
							color: #999;
						}

						.num {
							min-width: 60rpx;
							text-align: center;
							color: #999;
							font-size: 36rpx;
						}
					}
				}
			}
		}

		.sure {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background: $base-line-bg;
			color: #fff;
			font-size: 32rpx;
		}
	}
</style>
