<template>
	<view class="after_sale">
		<view class="top">
			<view class="inp flexB">
				<view class="search_inp flexB" v-if="current == 0">
					<text class="iconfont iconsearch"></text>
					<input placeholder="请输入退单号查询" v-model="refundNo" placeholder-style="color:#999;font-size:28rpx;" />
					<text class="iconfont icondelete" @click="clear()"></text>
				</view>
				<view class="search_inp flexB" v-else>
					<text class="iconfont iconsearch"></text>
					<input placeholder="请输入订单号查询" v-model="orderNo" placeholder-style="color:#999;font-size:28rpx;" />
					<text class="iconfont icondelete" @click="clear()"></text>
				</view>
				<view class="search_btn" @click="search()">查询</view>
			</view>
			<view class="tabs flexA">
				<view class="tab_item " :class="current == 0 ? 'tab_active' : ''" @click="choose(0)">
					<text>退货订单</text>
					<text class="num" v-if="refundTotal > 0">({{ refundTotal }})</text>
				</view>
				<view class="tab_item " :class="current == 1 ? 'tab_active' : ''" @click="choose(1)">
					<text>取消订单</text>
					<text class="num" v-if="cancelTotal > 0">({{ cancelTotal }})</text>
				</view>
			</view>
		</view>
		<view class="order_list">
			<view class="list_con" @click="skipDel(item)" v-for="(item, idx) in orderList" :key="item.id">
				<image src="../../static/refund_suce.png" class="refund_icon" v-if="item.status == 1 && current == 0">
				</image>
				<image src="../../static/refund_fail.png" class="refund_icon" v-if="item.status == 2 && current == 0">
				</image>
				<image src="../../../static/imgs/shop/cancel_suce.png" class="cancel_icon"
					v-if="item.apply_cancel == 2 && current == 1"></image>
				<image src="../../../static/imgs/shop/reject.png" class="cancel_icon"
					v-if="item.apply_cancel == 3 && current == 1"></image>
				<view class="flexB order_num">
					<text>
						<text>{{ current == 1 ? '订单号：' : '退单号：' }}</text>
						<text>{{ current == 1 ? item.order_no : item.refund_no }}</text>
					</text>
					<text class="ident" v-if="item.is_help == 1">代下单</text>
				</view>
				<view class="goods_info">
					<view v-for="temp in item.goods" :key="temp.id" style="margin-top:20rpx;">
						<view class="flexS">
							<image :src="temp.img" class="goods_img"></image>
							<view class="goods_con">
								<view class="goods_name">{{ temp.name }}</view>
								<view class="flexB">
									<view class="one_year" style="width: 120rpx;">3条装</view>
									<view class="price">
										<view style="color:#999;text-align: right;">X{{ temp | subNum }}</view>
										<view style="margin-top:10rpx;" v-if="temp.sku">￥{{ temp.sku[0].price }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flexE">
						<text style="color:#999;">共{{ item.goods | totalNum }}件，</text>
						<text>合计：</text>
						<text class="total">
							<text>¥</text>
							<text>{{ item.goods | totalPrice }}</text>
						</text>
					</view>
				</view>

				<view :class="item.store ? 'flexB' : 'flexE'">
					<view v-if="item.store">店铺：{{ item.store.name | getName(10) }}的店铺</view>
					<view>
						<view v-if="(item.apply_cancel == 1 && current == 1) || (item.status == 0 && current == 0)"
							class="flexS">
							<view class="base_btn" style="margin-right:15rpx;" @click.stop="cancelRefund(item.id, idx)"
								v-if="item.status == 0 && current == 0 && item.op_type == 2">
								取消退货
							</view>
							<view class="audit" v-if="current == 0">审核中</view>
							<view class="audit_btn" v-else>待审核</view>
						</view>
						<view class="cancel_btn" v-if="item.apply_cancel ==2 && current == 1"
							@click.stop="delRecord(item.id, idx)">删除记录</view>
						<view class="cancel_btn" v-if="item.status != 0 && current == 0">退货详情</view>
					</view>
				</view>
			</view>
			<view class="noData" v-if="orderList.length == 0">
				<image src="../../../static/imgs/default/no_order.png"></image>
				<view>--暂无订单--</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cancelList,
		delCancel,
		refundList,
		cancelRefund
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				searchName: '', //搜索内容
				list: [{
						name: '退货订单',
						count: 100
					},
					{
						name: '取消订单',
						count: 100
					}
				],
				params: {
					page_size: 15, //每页显示条数
					page_index: 1 //当前显示页数
				},
				orderList: [], //订单列表
				current: 0, //0 取消订单  1 退货订单
				orderNo: '', //订单号
				refundNo: '', //退单号
				cancelTotal: 0, //取消订单总数
				refundTotal: 0, //退货订单总数
				totalPage: 0 //总页数
			};
		},
		onLoad(ops) {
			if (ops.status) {
				this.current = ops.status;
			}
		},
		onShow() {
			this.getData();
			this.getList();
		},
		filters: {
			subNum(data) {
				let subNum = 0;
				data.sku.map(i => {
					subNum += i.num;
				});
				return subNum;
			}
		},
		methods: {
			//获取列表的数据
			getData() {
				uni.showLoading({
					title: '加载中....'
				});
				const {
					page_index,
					page_size
				} = this.params;
				cancelList({
						page_index,
						page_size
					})
					.then(res => {
						if (res.code == 200) {
							this.cancelTotal = res.data.total;
						} else {
							uni.showModal({
								content: res.data || '获取取消订单总数失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
				refundList({
						page_index,
						page_size
					})
					.then(res => {
						if (res.code == 200) {
							this.refundTotal = res.data.total;
						} else {
							uni.showModal({
								content: res.data || '获取退货订单总数失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			//tab切换
			choose(type) {
				this.orderNo = this.refundNo = '';
				this.current = type;
				this.params.page_index = 1;
				this.orderList = [];
				this.getList();
				this.goTop();
			},
			goTop() {
				// 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					});
				}
			},
			//清空搜索输入框
			clear() {
				this.orderNo = this.refundNo = '';
				this.getList();
			},
			//取消退货
			cancelRefund(refund_id, idx) {
				uni.showModal({
					content: '你确定要取消退货吗?',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中...'
							});
							cancelRefund({
									refund_id
								})
								.then(res => {
									if (res.code == 200) {
										let list = this.orderList;
										list.splice(list[idx], 1);
										uni.showToast({
											title: '取消退货成功',
											duration: 2000
										});
										if (this.refundTotal > 0) {
											this.refundTotal--;
										}
									} else {
										uni.showModal({
											content: res.data || '取消退货失败',
											showCancel: false
										});
									}
									uni.hideLoading();
								})
								.catch(err => {
									uni.hideLoading();
								});
						}
					}
				});
			},
			search() {
				let order_no = this.orderNo;
				let refund_no = this.refundNo;
				if (!order_no && !refund_no) {
					uni.showModal({
						content: '请输入订单号查询',
						showCancel: false
					});
					return false;
				}
				let http = order_no ? cancelList : refundList;
				const {
					page_index,
					page_size
				} = this.params;
				let data = order_no ? {
					page_index,
					page_size,
					order_no
				} : {
					page_index,
					page_size,
					refund_no
				};
				http(data).then(res => {
					if (res.code == 200) {
						this.orderList = res.data.list;
					} else {
						uni.showModal({
							content: res.msg || '搜索订单失败',
							showCancel: false
						});
					}
				});
			},
			/* 查看详情
			 */
			skipDel(item) {
				if (item.apply_cancel == 1) {
					uni.navigateTo({
						url: `../../../pages/cancel-audit/cancel-audit?order_no=${item.order_no}&id=${item.order_cancel.id}`
					});
					return false;
				}
				uni.navigateTo({
					url: this.current == 0 ? `../after-sale/after-sale?refund_id=${item.id}&type=1` :
						`../after-sale/after-sale?order_no=${item.order_no}&type=0`
				});
			},
			/*获取订单列表
			 *current  0 退货订单 1 取消订单
			 */
			getList(isMore) {
				let http = this.current == 0 ? refundList : cancelList;
				let params = this.params;
				uni.showLoading({
					title: '加载中...'
				});
				http(params)
					.then(res => {
						if (res.code == 200) {
							this.orderList = isMore ? this.orderList.concat(res.data.list) : res.data.list;
							this.totalPage = Math.ceil(res.data.total / this.params.page_size);
							if (this.current == 0) {
								this.refundTotal = res.data.total;
							}
							if (this.current == 1) {
								this.cancelTotal = res.data.total;
							}
						} else {
							uni.showModal({
								content: res.msg,
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			//获取更多订单列表
			getMore() {
				if (this.params.page_index >= this.totalPage) {
					uni.showToast({
						title: '没有更多啦~',
						icon: 'none'
					});
					return false;
				}
				this.params.page_index++;
				this.getList(true);
			},
			/*删除记录
			 *只有取消订单的记录能删除退货订单记录不能删除
			 */
			delRecord(order_id, idx) {
				uni.showModal({
					content: '你确定要删除此条记录吗？',
					success: res => {
						if (res.confirm) {
							delCancel({
									order_id
								})
								.then(res => {
									uni.showLoading({
										title: '删除中...'
									});
									if (res.code == 200) {
										let list = this.orderList;
										list.splice(idx, 1);
										uni.showToast({
											title: '删除成功！'
										});
										if (this.cancelTotal > 0) {
											this.cancelTotal--;
										}
									} else {
										uni.showModal({
											content: res.msg,
											showCancel: false
										});
									}
									uni.hideLoading();
								})
								.catch(err => {
									uni.hideLoading();
								});
						}
					}
				});
			},
			/*tab 切换
			 *params.status 0待付款  1待发货  2待收货 3已完成
			 */
			change(e) {
				this.current = e;
				this.params.page_index = 1;
				this.orderList = this.orderNo = this.refundNo = '';
				this.getList();
				this.goTop();
			},
			goTop() {
				// 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					});
				}
			}
		},
		onReachBottom() {
			this.getMore();
		}
	};
</script>
<style>
	page {
		min-height: 100%;
		width: 100%;
		background-color: #f9f9fb;
	}
</style>
<style lang="scss" scoped>
	.after_sale {
		padding-bottom: 40rpx;

		.top {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: #fff;
			z-index: 9999;

			.tabs {
				height: 89rpx;

				.tab_item {
					font-size: 32rpx;
					font-weight: bold;
					text-align: center;
					position: relative;
				}

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

				.tab_active::after {
					content: '';
					display: block;
					position: absolute;
					width: 42rpx;
					height: 8rpx;
					background: $base-line-bg;
					margin-top: 6rpx;
					margin-left: 60rpx;
					border-radius: 8rpx;
				}
			}

			.inp {
				width: 100%;
				height: 140rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background-color: #fff;

				.search_inp {
					width: 540rpx;
					height: 80rpx;
					border: 2rpx solid #cccccc;
					border-radius: 44rpx;
					padding: 0 30rpx;
					box-sizing: border-box;

					input {
						width: 80%;
						height: 80rpx;
						line-height: 80rpx;
						color: #333;
					}

					.iconfont {
						color: #cccccc;
						font-size: 40rpx;
					}
				}

				.search_btn {
					width: 124rpx;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					background: $base-line-bg;
					font-size: 28rpx;
					color: #fff;
					border-radius: 44rpx;
				}
			}
		}

		.order_list {
			margin: 270rpx 0 180rpx;

			.list_con {
				width: 700rpx;
				margin: 30rpx auto 0;
				background-color: #fff;
				font-size: 28rpx;
				border-radius: 24rpx;
				position: relative;

				>view {
					padding: 20rpx 15rpx;
					box-sizing: border-box;
				}

				.goods_info {
					border-bottom: 1rpx solid #e9e9e9;
					border-top: 1rpx solid #e9e9e9;

					>view {
						margin-top: 15rpx;
					}

					.goods_con {
						flex: 1;
					}

					.goods_img {
						width: 188rpx;
						height: 144rpx;
						border-radius: 24rpx;
						margin-right: 15rpx;
						flex-shrink: 0;
					}

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

				// .goods_img {
				// 	width: 188rpx;
				// 	height: 144rpx;
				// 	border-radius: 24rpx;
				// 	margin-right: 10rpx;
				// 	flex-shrink: 0;
				// }
				// .goods_con {
				// 	border-top: 1rpx solid #e9e9e9;
				// 	border-bottom: 1rpx solid #e9e9e9;
				// }
				.order_num {
					padding: 20rpx 15rpx;
				}

				.refund_icon {
					width: 202rpx;
					height: 170rpx;
					position: absolute;
					top: 0;
					right: 30rpx;
				}

				.cancel_icon {
					width: 195rpx;
					height: 125rpx;
					position: absolute;
					top: 0;
					right: 30rpx;
				}

				.audit {
					color: #fc912d;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
