<template>
	<view class="return_info">
		<view class="goods_info">
			<view class="title">退款商品</view>
			<view v-for="(item, index) in goods" :key="item.id" class="goods_con">
				<view class="flexB">
					<view class="flexS">
						<image :src="item.img" class="goods_img"></image>
						<view>
							<text class="goods_name">{{ item.name }}</text>
							<view class="flexB goods_det">
								<text>数量：{{ refundSub(item) }}套</text>
								<text>金额：¥ {{ refSubtotal(item) }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="goods_size">
					<view class="size_box flexB" v-for="temp in item.newSku" :key="temp.id">
						<text>{{ temp.type }}</text>
						<text>{{ temp.size }}</text>
						<text>{{ temp.price }}</text>
						<text>X{{ temp.quitNum }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="return_box">
			<view class="title">退款信息</view>
			<view class="return_con">
				<view class="flexB return_item">
					<view>
						<text>退款数量</text>
						<!-- <text class="star">*</text> -->
					</view>
					<view class="refund_num">{{ refundNum }}套</view>
				</view>
				<view class="flexB return_item">
					<view>
						<text>退款金额</text>
						<!-- <text class="star">*</text> -->
					</view>
					<view class="total">
						<text>¥</text>
						<text class="price">{{ refundPrice }}</text>
					</view>
				</view>
				<view class="flexB return_item">
					<view>
						<text>退货方式</text>
						<!-- <text class="star">*</text> -->
					</view>
					<view>自行寄回</view>
				</view>
				<view class="flexB return_item">
					<view>
						<text>退货原因</text>
						<text class="star">*</text>
					</view>
					<view class="choose" @click="isPaid = true">
						<text>{{ reason ? reason : '请选择' }}</text>
						<text class="iconfont iconiconfontjiantou2" v-if="!reason"></text>
					</view>
				</view>

				<view class="supple_box">
					<textarea v-model="reason_all" placeholder="补充描述，有助于商家更好的处理售后问题" @input="reasonInput"
						maxlength="200" placeholder-style="color:#ccc" />
					<view class="num flexE">{{ num }}/200</view>
					<u-upload ref="uUpload" :action="action" :show-tips="false" max-count="4" width="130" height="130"
						name="img" :header="header" @on-success="onSuccess" @on-remove="onRemove"
						@on-error="uploadError"></u-upload>
				</view>
			</view>
		</view>
		<view class="sure flexC" @click="submit">提交审核</view>
		<u-popup v-model="isPaid" mode="bottom" width="550rpx" border-radius="40" height="600rpx">
			<view class="cancel_box">
				<view class="cancel_title">
					<view>申请退货原因</view>
					<text class="iconfont iconguanbi" @click="isPaid = false"></text>
				</view>
				<view class="cancel_hint">请先和店家联系，商量好后再取消。</view>
				<view v-for="(item, idx) in reasonList" :key="item.id" class="flexB reason_item"
					@click="Checked(item, idx)">
					<view>{{ item.text }}</view>
					<text class="iconfont iconxuanzhong" v-if="item.isChecked"></text>
					<text class="iconfont iconweixuanzhong" v-else></text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		submitRefund
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				goods: '',
				action: `${this.$config.redirect_uri}/api/store/upload_refund_order_img`, //上传图片路径
				header: {
					Authorization: 'Bearer ' + uni.getStorageSync('token')
				},
				num: 0,
				reasonList: [{
						id: 1,
						text: '质量问题',
						isChecked: false
					},
					{
						id: 2,
						text: '不愿意穿了',
						isChecked: false
					},
					{
						id: 3,
						text: '价格太贵',
						isChecked: false
					},
					{
						id: 4,
						text: '穿的没有讲的好',
						isChecked: false
					}
				],
				isPaid: false,
				reason: '',
				reason_all: '', //备注描述
				imgs: [],
				origin_order_no: ''
			};
		},
		computed: {
			//退货总数量
			refundNum() {
				let refundNum = 0;
				let list = this.goods;
				if (list) {
					list.map(i => {
						i.newSku.map(j => {
							refundNum += j.quitNum;
						});
					});
				}
				return refundNum;
			},
			//退货总金额
			refundPrice() {
				let refundPrice = 0;
				let list = this.goods;
				if (list) {
					list.map(i => {
						i.newSku.map(j => {
							refundPrice += j.quitNum * j.price;
						});
					});
				}
				return refundPrice;
			}
		},
		onLoad(ops) {
			this.origin_order_no = ops.order_no;
			//去掉未被选中的尺码
			let list = uni.getStorageSync('goodsInfo');
			let newArr = [];
			for (let i = 0; i < list.length; i++) {
				list[i].newSku = list[i].newSku.filter(j => {
					return j.quitNum > 0;
				});
				if (list[i].newSku.length > 0) {
					newArr.push(list[i]);
				}
			}
			this.goods = newArr;
		},
		methods: {
			//退货小计件数
			refundSub(item) {
				let subNum = 0;
				if (item) {
					item.newSku.map(i => {
						subNum += i.quitNum;
					});
				}
				return subNum;
			},
			refSubtotal(item) {
				let refSubtotal = 0;
				if (item) {
					item.newSku.map(i => {
						refSubtotal += i.quitNum * i.price;
					});
				}
				return refSubtotal;
			},
			//获取上传的图片
			onSuccess(data, index, lists) {
				this.imgs.push(data.data);
			},
			//删除已上传的图片
			onRemove(index, lists) {
				this.imgs.splice(index, 1);
			},
			//上传图片失败
			uploadError(res) {
				uni.showModal({
					content: '上传图片失败，请重试',
					showCancel: false
				})
			},
			//选择取消订单原因
			Checked(item, idx) {
				let list = this.reasonList;
				list.map((i, index) => {
					if (index == idx) {
						this.reason = i.text;
						i.isChecked = true;
					} else {
						i.isChecked = false;
					}
				});
				this.isPaid = false;
			},
			//获取文本框字数
			reasonInput(e) {
				this.num = e.detail.value.length;
				if (this.num == 200) {
					uni.showToast({
						title: '已超过200字',
						icon: 'none'
					});
				}
			},
			//提交审核
			submit() {
				if (!this.reason) {
					uni.showModal({
						content: '请选择退货原因',
						showCancel: false
					});
					return false;
				}
				let list = this.goods;
				//获取选中的尺码id和数量
				let sku = [];
				let k = 0;
				for (var i in list) {
					for (var j in list[i].sku) {
						sku[k] = [list[i].sku[j].id, list[i].sku[j].quitNum];
						k++;
					}
				}
				uni.showLoading({
					title: '提交中...'
				})
				submitRefund({
					reason_all: this.reason_all,
					reason: this.reason,
					img: this.imgs,
					sku,
					origin_order_no: this.origin_order_no
				}).then(res => {
					if (res.code == 200) {
						uni.removeStorageSync('goodsInfo');
						uni.showModal({
							content: '退货申请已提交！',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.reLaunch({
										url: '../order-manage/order-manage'
									});
								}
							}
						});
					} else {
						uni.showModal({
							content: res.data || '申请退货失败！',
							showCancel: false
						});
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	};
</script>
<style>
	page {
		width: 100%;
		min-height: 100%;
		background: #f9f9fb;
	}
</style>
<style lang="scss" scoped>
	.return_info {
		position: relative;
		padding-bottom: 150rpx;

		.return_box,
		.goods_info {
			width: 690rpx;
			margin: 30rpx auto 0;
			padding: 30rpx 30rpx;
			background: #fff;
			border-radius: 24rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				padding: 0 0 20rpx 0;
			}

		}

		.return_box {
			.return_con {
				.star {
					color: $base-color;
					font-size: 30rpx;
				}

				.return_item {
					margin-top: 15rpx;

					.choose {
						text {
							color: #999;
						}

						.iconfont {
							font-size: 30rpx;
							vertical-align: -3rpx;
							margin-left: 5rpx;
						}
					}

					.refund_num {
						font-size: 30rpx;
						font-weight: bold;
						color: $base-color;
					}
				}
			}
		}

		//取消弹窗样式
		.cancel_box {
			position: relative;

			.cancel_title {
				font-size: 40rpx;
				padding: 30rpx 0;
				text-align: center;

				text {
					position: absolute;
					top: 32rpx;
					right: 30rpx;
					font-size: 50rpx;
					color: #999;
				}
			}

			.cancel_hint {
				width: 100%;
				text-align: center;
				background: #fff4f3;
				border-top: 1rpx solid $base-color;
				border-bottom: 1rpx solid $base-color;
				font-size: 44rpx;
				padding: 15rpx 0;
				color: $base-color;
				font-weight: 600;
				margin-bottom: 15rpx;
			}

			.reason_item {
				padding: 15rpx 30rpx;

				view {
					font-size: 40rpx;
					font-weight: 600;
				}

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

				.iconxuanzhong {
					color: $base-color;
				}
			}

			.reason_box {
				width: 90%;
				margin: 15rpx auto 0;

				textarea {
					width: 100%;
					height: 282rpx;
					background: #f7f7f7;
					padding: 30rpx;
					box-sizing: border-box;
					border-radius: 24rpx;
				}
			}

			//取消弹窗样式
			.cancel_box {
				position: relative;

				.cancel_title {
					font-size: 40rpx;
					padding: 30rpx 0;
					text-align: center;

					text {
						position: absolute;
						top: 32rpx;
						right: 30rpx;
						font-size: 50rpx;
						color: #999;
					}
				}

				.cancel_hint {
					width: 100%;
					text-align: center;
					background: #fff4f3;
					border-top: 1rpx solid $base-color;
					border-bottom: 1rpx solid $base-color;
					font-size: 44rpx;
					padding: 15rpx 0;
					color: $base-color;
					font-weight: 600;
					margin-bottom: 15rpx;
				}

				.reason_item {
					padding: 15rpx 30rpx;

					view {
						font-size: 40rpx;
						font-weight: 600;
						font-family: PingFang SC;
					}

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

					.iconxuanzhong {
						color: $base-color;
					}
				}

				.reason_box {
					width: 90%;
					margin: 15rpx auto 0;

					textarea {
						width: 100%;
						height: 282rpx;
						background: #f7f7f7;
						padding: 30rpx;
						box-sizing: border-box;
						border-radius: 24rpx;
					}
				}

				.cancel_btn {
					margin-top: 40rpx;

					view {
						width: 300rpx;
						text-align: center;
						height: 88rpx;
						line-height: 88rpx;
						color: $base-color;
						border-radius: 44rpx;
						font-size: 32rpx;
						background: #fff4f3;
						border: 1rpx solid $base-color;
					}

					view:last-child {
						color: #fff;
						background: $base-color;
					}
				}
			}
		}

		.supple_box {
			background: #f9f9f9;
			border-radius: 24rpx;
			height: 430rpx;
			margin-top: 30rpx;

			textarea {
				width: 100%;
				padding: 30rpx;
				font-size: 30rpx;
				height: 220rpx;
				box-sizing: border-box;
			}

			.num {
				margin-right: 30rpx;
				color: #999;
			}
		}

		.goods_info {
			.goods_con {
				margin: 15rpx 0;

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

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

				.goods_det {
					margin-top: 20rpx;
					font-size: 30rpx;

					text {
						color: $base-color;
					}
				}
			}

			.size_box {
				width: 100%;
				background: #f9f9f9;
				padding: 15rpx 30rpx;
				margin-top: 15rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
			}
		}

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