<template>
	<!-- #ifdef H5 -->
	<zj-page-layout :hasFooter="true">
		<no-data v-if="isLoading" :showText="'加载中'"></no-data>
		<no-data v-if="!isLoading && noData" :showText="'加载失败'"></no-data>
		<block v-if="!isLoading && !noData">
			<view class="status-container" v-if="orderDetail.orderStatus == 'DSJCL'">已提交申请，请等待商家处理</view>
			<view class="status-container" v-if="orderDetail.orderStatus == 'DMJCL' && orderDetail.examineStatus == 'OK'">商家已通过申请，请填写资料</view>
			<view class="status-container" v-if="orderDetail.orderStatus == 'DMJCL' && orderDetail.examineStatus == 'FAIL'">申请审核不通过</view>
			<view class="status-container" v-if="orderDetail.orderStatus == 'DSJSH'">请等待商家收货</view>
			<view class="status-container" v-if="orderDetail.orderStatus == 'OVER'">订单退款成功</view>

			<view class="main-container">
				<view class="top-container card" v-if="orderDetail.orderStatus == 'DSJCL' || orderDetail.orderStatus == 'DMJCL'">
					<view class="title">您已成功发起退/换货申请，请耐心商家处理</view>
					<view class="des">商家同意后，请按照给出的退货地址退货，并记录物流单号；如商家拒绝，你可以修改申请后再次发起，商家会重新处理；如商家超时未处理，退货申请将达成，请按照系统给出的退货地址退货；</view>
					<view class="btn-group">
						<!-- <view class="button" @tap="cancelApply()" v-if="orderDetail.examineStatus == 'WAIT'">撤销申请</view> -->
						<view class="button" @tap="reapply()" v-if="orderDetail.orderStatus == 'DMJCL' && orderDetail.examineStatus == 'FAIL'">重新申请</view>
					</view>
				</view>

				<view class="result-container card" v-if="orderDetail.orderStatus == 'OVER'">
					<view class="item">
						<view class="left">退款总金额</view>
						<view class="right">¥{{orderDetail.refundAmount | priceFilter}}</view>
					</view>
					<view class="item">
						<view class="left">退款路径</view>
						<view class="right">原路返回</view>
					</view>
				</view>

				<view class="form-container card" v-if="(orderDetail.orderStatus == 'DMJCL' && orderDetail.examineStatus == 'OK') || orderDetail.orderStatus == 'DSJSH'">
					<view class="title">{{orderDetail.orderStatus == 'DSJSH' ? '':'请填写'}}退换信息</view>
					<view class="item">
						<view class="label">商家信息：</view>
						<view class="info">
							<view class="top">{{orderDetail.storageName ? orderDetail.storageName : ''}} <text>{{orderDetail.storagePhone ? orderDetail.storagePhone : ''}}</text></view>
							<view class="bottom">{{orderDetail.storageAddress ? orderDetail.storageAddress : ''}}</view>
						</view>
					</view>
					<view class="item">
						<view class="label">快递公司：</view>
						<view class="picker">
							<picker @change="changeCompany" :value="companyIndex" :range="companyArray" range-key="name" :disabled="orderDetail.orderStatus == 'DSJSH'">
								<view>{{companyArray[companyIndex].name}}</view>
							</picker>
						</view>
					</view>
					<view class="item">
						<view class="label">快递单号：</view>
						<view class="input">
							<input type="text" placeholder="请填写快递单号" v-model="courierNumber" :disabled="orderDetail.orderStatus == 'DSJSH'">
						</view>
					</view>
					<view class="item">
						<view class="label">上传凭证：</view>
						<view class="images">
							<block v-for="(item, index) in images" :key='index'>
								<view class="img">
									<image :src="item.url" mode="aspectFill"></image>
									<text @tap="delImage(index)" v-if="orderDetail.orderStatus != 'DSJSH'">x</text>
								</view>
							</block>
							<view class="add"  @tap="addImage" v-if="images.length < 3 && orderDetail.orderStatus != 'DSJSH'">
								<image src="@/static/icon/camera.png"></image>
								<text>上传凭证</text>
								<text>(最多3张)</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 拒绝申请 -->
				<view class="goods-container card" v-if="orderDetail.examineStatus === 'FAIL'">
					<view class="title">商品信息</view>
					<block v-for="(item, index) in orderDetail.orderDetails" :key='index'>
						<view class="item">
							<view class="img"><image :src="item.imgUrl" mode="aspectFill"></image></view>
							<view class="right">
								<view class="top">
									<view class="name ellipsis-2">{{item.goodsName}}</view>
									<view class="des">{{item.goodsSpecValue}}</view>
								</view>
								<view class="bottom">
									<view class="price">￥{{item.price | priceFilter}}</view>
									<view class="num">x{{item.refundNum}}</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<!-- 其他 -->
				<view class="goods-container card" v-else>
					<view class="title">退款商品</view>
					<block v-for="(item, index) in orderDetail.orderDetails" :key='index'>
						<view class="item" v-if="item.refund">
							<view class="img"><image :src="item.imgUrl" mode="aspectFill"></image></view>
							<view class="right">
								<view class="top">
									<view class="name ellipsis-2">{{item.goodsName}}</view>
									<view class="des">{{item.goodsSpecValue}}</view>
								</view>
								<view class="bottom">
									<view class="price">￥{{item.price | priceFilter}}</view>
									<view class="num">x{{item.refundNum}}</view>
								</view>
							</view>
						</view>
					</block>
				</view>

				<view class="total-container card">
					<view class="title">订单信息</view>
					<view class="top">
						<view class="item">
							<view>商品金额</view>
							<view>￥{{orderDetail.totalProductAmount | priceFilter}}</view>
						</view>
						<view class="item">
							<view>优惠</view>
							<view>-￥{{orderDetail.couponValue | priceFilter}}</view>
						</view>
					</view>
					<view class="bottom">
						<view class="total">付款合计：<text>￥{{orderDetail.payAmount | priceFilter}}</text></view>
						<!-- <view class="total">预计收入：<text>￥{{1 | priceFilter}}</text></view> -->
					</view>
				</view>

				<view class="order-container card">
					<view class="title">退货信息</view>
					<view class="item2">
						<view class="label">退货类型</view>
						<view class="value">{{orderDetail.refundType | typeFilter}}</view>
					</view>
					<view class="item2">
						<view class="label">退货原因</view>
						<view class="value">{{orderDetail.refundReason}}</view>
					</view>
					<view class="item2">
						<view class="label">退货金额</view>
						<view class="value">¥{{orderDetail.refundAmount}}</view>
					</view>
					<view class="item2">
						<view class="label">申请数量</view>
						<view class="value">{{orderDetail.examineStatus === 'FAIL' ? orderDetail.totalNum : orderDetail.refundNum}}</view>
					</view>
					<view class="item2">
						<view class="label">申请时间</view>
						<view class="value">{{orderDetail.createTime}}</view>
					</view>
					<view class="item2">
						<view class="label">退款编号</view>
						<view class="value">{{orderDetail.orderRefundId}}</view>
					</view>
					<view class="item2">
						<view class="label">卖家留言</view>
						<view class="value">{{orderDetail.refundMessage || ''}}</view>
					</view>
				</view>
			</view>
		</block>
    <template slot="footer" v-if="orderDetail.orderStatus == 'DMJCL' && orderDetail.examineStatus == 'OK'">
			<view class="footer-btn-group">
				<u-button type="primary" text="提交信息" @click="submitForm"></u-button>
			</view>
		</template>
	</zj-page-layout>
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<web-view :src="webViewHref(`/packageMine/pages/order/return/detail`, pam,crossPagePam)" @message="crossPage.$listener"></web-view>
	<!-- #endif -->
</template>

<script>
  // #ifdef H5
  import { uploadImgFull } from '@/common/utils/util.js'

	export default {
		filters: {
			typeFilter(val) {
				const statusMap = {
					REFUND_AMOUNT: '仅退款',
					REFUND_GOODS: '退货退款',
				 }
				 return statusMap[val]
			},
		},
		data() {
			return {
				isLoading: true,
				noData: true,
				orderRefundId: null, // 售后订单id
				orderDetail: {}, // 订单详情
				companyArray: [], // 物流公司列表
				companyIndex: 0, // 物流公司选择值
				images: [], // 凭证
				courierNumber: '', // 快递单号
				canClickSave: true, // 能否点击提交
				isCancelDialog: false, // 是否显示撤销申请弹窗
			}
		},

		onLoad({orderRefundId}) {
			this.orderRefundId = orderRefundId;
			this.getCompany();
		},

		methods: {
			getOrderDetail() {
				this.$api.get('/order/refund/detail', {
					orderRefundId: this.orderRefundId
				}).then(res => {
					let refundNum = 0;
					res.data.orderDetails.forEach(item => {
						if(item.refund) {
							refundNum = refundNum + item.refundNum;
						}
					})
					res.data.refundNum = refundNum;
					this.orderDetail = res.data;
					this.noData = false;
					this.isLoading = false;
					if(res.data.orderStatus == 'DSJSH') {
						this.courierNumber = res.data.logisticsNo;
						this.companyIndex = this.findElem(this.companyArray, 'code', res.data.expressCompanyCode);
						this.images = res.data.files;
					}
				}).catch(res => {
					this.noData = true;
					this.isLoading = false;
				})
			},

			findElem(array, attr, val) {
			    for (var i = 0; i < array.length; i++) {
			        if (array[i][attr] == val) {
			            return i; //返回当前索引值
			        }
			    }
			    return -1;
			},

			getCompany() {
				this.$api.get('/common/express/company')
        .then(res => {
					this.companyArray = res.data;
					this.getOrderDetail();
				})
			},

			changeCompany(e) {
				this.companyIndex = e.target.value
			},

      // 撤销申请
      cancelApply() {
        this.$modal({
          content: '确定要撤销申请吗？'
        }).then(() => {
          this.$api.post('/order/refund/cancel', {
          	refundOrderId: this.orderRefundId
          }).then(res => {
          	this.crossPage.$emit('refreshOrderList');
          	this.crossPage.$emit('refreshOrderDetail');
          	this.$successToast('撤销申请成功');
          	setTimeout(() => {
          		this.$navToPage({
          			delta: 1
          		}, 'navigateBack')
          	}, 1000)
          })
        }).catch(() => {})
      },

			// 删除图片
			delImage(index) {
				this.images.splice(index, 1);
			},

			// 添加图片
			async addImage() {
				uni.chooseImage({
					count: 3 - this.images.length,
					sizeType: ['original'],
					success: res => {
						uni.showLoading();
						res.tempFilePaths.forEach(async item => {
							let data = await uploadImgFull(item);
							this.images.push(data);
						});
						uni.hideLoading();
					},
					fail: err => {}
				})
			},

			// 提交申请
			submitForm() {
				if (!this.canClickSave) return false;
				this.canClickSave = false;
				setTimeout(() => { this.canClickSave = true }, 3000)

        if(this.images.length < 1) {
        	return this.$toast('请上传凭证');
        }
        if(!this.courierNumber) {
        	return this.$toast('请填写快递单号');
        }

				let imgIds = [];
				this.images.forEach(item => {
					imgIds.push(item.id);
				})
				this.$api.post('/order/refund/supply', {
          orderRefundId: this.orderRefundId,
          expressCompany: this.companyArray[this.companyIndex].code,
          logisticsNo: this.courierNumber,
          imgIds: imgIds
				}).then(res => {
					this.$successToast('提交成功');
					this.getOrderDetail();
					this.crossPage.$emit('refreshOrderDetail');
				})
			},

			// 重新申请
			reapply() {
				this.$navToPage({
					url: '/pages/mine/order/return/apply?orderId=' + this.orderDetail.orderId
				}, 'redirectTo')
			},
		}
	}
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },

    onLoad(pam) {
      this.pam = pam;
    },
  }
  // #endif
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		box-sizing: border-box;
	}
	.status-container {
		background: $theme-color;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.result-container {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			border-bottom: 1px solid #eaeaea;
		}
	}
	.top-container {
		padding: 0 20rpx;
		.title {
			font-size: 28rpx;
			line-height: 50rpx;
			padding-top: 10rpx;
		}
		.des {
			font-size: 24rpx;
			color: #999999;
			line-height: 32rpx;
			padding: 10rpx 0;
		}
		.btn-group {
			padding: 20rpx 0;
			display: flex;
			justify-content: flex-end;
			border-top: 1px solid #eaeaea;
			.button {
				width: 140rpx;
				height: 48rpx;
				border-radius: 48rpx;
				border: 1px solid #eaeaea;
				font-size: 24rpx;
				color: #666666;
				text-align: center;
				line-height: 48rpx;
			}
		}
	}
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.main-container {
		padding: 20rpx 20rpx 120rpx;
	}
	.goods-container {
		padding: 0 20rpx;
		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			padding-top: 20rpx;
		}
		.item {
			padding: 20rpx 0;
			border-bottom: 1px solid #eaeaea;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child {
				border: none;
			}
			.img image {
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
				display: block;
			}
			.right {
				width: 470rpx;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.top {
					.name {
						font-size: 28rpx;
						color: #333333;
						line-height: 36rpx;
					}
					.des {
						font-size: 28rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price {
						font-size: 28rpx;
						color: $minor-color;
						line-height: 28rpx;
					}
					.num {
						font-size: 28rpx;
						color: #333333;
						line-height: 28rpx;
					}
				}
			}
		}
	}
	.total-container {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			padding-top: 20rpx;
			padding-bottom: 10rpx;
		}
		.top {
			padding: 10rpx 0;
			border-bottom: 1px solid #eaeaea;
		}
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 64rpx;
		}
		.bottom {
			padding: 10rpx 0;
		}
		.total {
			display: flex;
			justify-content: flex-end;
			height: 50rpx;
			align-items: center;
			text {
				color: $minor-color;
			}
		}
	}
	.form-container {
		padding: 0 20rpx 20rpx;
		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			padding-top: 20rpx;
		}
		.item {
			display: flex;
			margin-top: 30rpx;
			.label {
        font-size: 28rpx;
				line-height: 48rpx;
				width: 160rpx;
			}
			.info {
				.top {
					font-size: 28rpx;
					color: #333333;
					text {
						font-size: 24rpx;
						color: #999999;
						margin-left: 20rpx;
					}
				}
				.bottom {
					font-size: 24rpx;
					color: #666666;
					margin-top: 10rpx;
				}
			}
			.picker {
				picker {
					width: 500rpx;
					height: 48rpx;
					line-height: 48rpx;
					border: 1px solid #eaeaea;
					border-radius: 10rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
			.input {
				input {
					width: 500rpx;
					height: 48rpx;
					line-height: 48rpx;
					border: 1px solid #eaeaea;
					border-radius: 10rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
			.images {
				display: flex;
				.add {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 146rpx;
					height: 146rpx;
					border: 2rpx dashed #dadada;
					border-radius: 10rpx;
					image {
						width: 48rpx;
						height: 34rpx;
						display: block;
						margin-bottom: 8rpx;
					}
					text {
						font-size: 22rpx;
						color: #999999;
						line-height: 24rpx;
					}
				}
				.img {
					position: relative;
					margin-right: 18rpx;
					&:nth-child(3) {
						margin-right: 0;
					}
					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						overflow: hidden;
						display: block;
					}
					text {
						position: absolute;
						right: -10rpx;
						top: -10rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #FF3F42;
						font-size: 28rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 36rpx;
						display: block;
					}
				}
			}
		}
	}
	.order-container {
		padding: 20rpx;
		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			padding-bottom: 20rpx;
		}
		.item2 {
			display: flex;
			padding: 10rpx 0;
			.label {
				margin-right: 40rpx;
				flex-shrink: 0;
				width: 140rpx;
			}
		}
	}
	.bottom-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		border-top: 1px solid #F4F2F2;
		.button {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 70rpx;
			background: linear-gradient(-90deg,#ff3f42 0%, #fe781f 100%);
			font-size: 32rpx;
			color: #FFFFFF;

		}
	}
</style>
