<template>
	<view class="audit">
		<view>
			<view class="audit_bg flexC">
				<image src="../../static/imgs/shop/audit.png" style="width:150rpx;height:115rpx"></image>
				<view class="audit_state">
					<view>取消订单审核中...</view>
					<text>正在审核请耐心等待</text>
				</view>
			</view>
			<view class="audit_con">
				<view class="refund flexB">
					<view>退款金额</view>
					<view class="total">
						<text class="price">¥</text>
						<text v-if="goods">{{ goods | totalPrice }}</text>
					</view>
				</view>
				<view class="goods_info">
					<view class="title">商品信息</view>
					<view v-for="item in goods" :key="item.id" class="goods_con">
						<view class="flexS" style="margin-top:15rpx">
							<image :src="item.img" class="goods_img"></image>
							<view>
								<text class="goods_name">{{ item.name }}</text>
								<view class="one_year">3条装</view>
							</view>
						</view>
						<view class="goods_size">
							<view class="size_box flexB" v-for="temp in item.sku" :key="temp.id">
								<text>{{ temp.type }}</text>
								<text>{{ temp.size }}</text>
								<text>{{ temp.price }}</text>
								<text>X{{ temp.num }}</text>
							</view>
						</view>
					</view>
					<view class="flexE" style="margin-top:20rpx;">
						<text class="gray" v-if="goods">共{{ goods | totalNum }}套</text>
						<text class="gray">合计：</text>
						<text class="total">
							<text>¥</text>
							<text class="price" v-if="goods">{{ goods | totalPrice }}</text>
						</text>
					</view>
				</view>

				<view class="audit_order">
					<view class="order_top">
						<view class="label flexS">
							<text>订单号：</text>
							<text style="font-size:24rpx">{{ orderInfo.order_no }}</text>
							<view class="copy_btn" @click="copy(orderInfo.order_no)">复制</view>
						</view>
						<view class="label">
							<text>申请时间：</text>
							<text>{{ orderCancel.created_at }}</text>
						</view>
						<view class="label">
							<text>服务类型：</text>
							<text>取消订单</text>
						</view>
					</view>
					<view class="order_bottom">
						<!-- 	<view class="label">
							<text>联系人：</text>
							<text>{{ address.name }}</text>
						</view>
						<view class="label">
							<text>联系电话：</text>
							<text>{{ address.phone }}</text>
						</view>
						<view class="label">
							<text>收货地址：</text>
							<text>{{ address.province }}{{ address.city }}{{ address.area }}{{ address.address }}</text>
						</view> -->
						<view class="label">
							<text>取消原因：</text>
							<text style="color:#F76454">{{ orderCancel.reason }}</text>
						</view>
					</view>
					<!-- <view class="order_bottom" v-else>
						<view class="label">
							<text>取货方式：</text>
							<text>自提</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="btn_box flexB">
				<view @click="isReject = true" class="flexC">驳回申请</view>
				<view @click="operaCancel(2)" class="flexC">通过申请</view>
			</view>
		</view>
		<u-popup v-model="isReject" mode="bottom" height="600rpx" border-radius="8">
			<view class="cancel_box flexCC">
				<view class="reason_box"><textarea v-model="remark" placeholder="请输入驳回申请原因" /></view>
				<view class="reject_btn flexA">
					<view @click="(isReject = false), (remark = '')">暂不驳回</view>
					<view @click="operaCancel(3)">确定驳回</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getName
	} from '../../filters/index.js';
	import {
		cancelAudit,
		orderQuery
	} from '../../apis/shop.js';
	import {
		totalPrice,
		totalNum
	} from '../../filters/index.js';
	import {
		handleClipboard
	} from '../../common/util/utils.js';
	export default {
		data() {
			return {
				isReject: false, //是否显示取消弹窗
				remark: '', //驳回用户申请的原因
				orderCancel: '',
				orderInfo: '',
				address: '',
				goods: '',
				cancelId: ','
			};
		},
		onLoad(ops) {
			this.cancelId = ops.id;
			if (ops.order_no) {
				this.getOrder(ops.order_no);
			}
		},
		methods: {
			/*复制单号*/
			copy(data) {
				handleClipboard(
					data,
					event,
					() => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					},
					() => {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						});
					}
				);
			},
			/*获取订单详情*/
			getOrder(order_no) {
				orderQuery({
					order_no
				}).then(res => {
					if (res.code == 200) {
						this.orderInfo = res.data;
						this.orderCancel = res.data.order_cancel;
						this.address = res.data.address;
						this.goods = res.data.goods;
						// if (res.data.express_info) {
						// 	this.logInfo = JSON.parse(res.data.express_info)[0];
						// }
					} else {
						uni.showModal({
							content: res.data || '获取订单详情失败',
							showCancel: false
						});
					}
				});
			},
			//查看订单详情
			skipDetail() {
				uni.navigateTo({
					url: '../order-info/order-info?order_no=' + this.orderInfo.order_no
				});
			},
			//通过或驳回申请
			cancelAudit(type) {
				uni.showLoading({
					title: '处理中...'
				});
				if (type == 3 && !this.remark) {
					uni.showToast({
						title: '请输入驳回原因',
						icon: 'none'
					});
					return false;
				}
				cancelAudit({
					id: this.cancelId,
					remark: this.remark,
					type
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.isReject = false;
						uni.showModal({
							content: `已${type == 3 ? '驳回' : '通过'}用户申请`,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					} else {
						uni.showModal({
							content: res.data || `${type == 3 ? '驳回' : '通过'}用户申请失败`,
							showCancel: false
						});
					}
				});
			},
			//驳回或通过按钮  type 2 通过  驳回
			operaCancel(type) {
				if (type == 2) {
					uni.showModal({
						content: '你确定要通过该申请么？',
						success: res => {
							if (res.confirm) {
								this.cancelAudit(2);
							}
						}
					});
					return false;
				}
				this.cancelAudit(3);
			}
		}
	};
</script>
<style>
	page {
		min-height: 100%;
		width: 100%;
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.audit_bg {
		width: 100%;
		height: 282rpx;
		background: linear-gradient(89deg, #ffbf63 0%, #fc8924 100%);

		.audit_state {

			view,
			text {
				color: #fff;
				font-size: 28rpx;
			}

			view {
				magin-bottom: 15rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}

	.audit_con {
		width: 690rpx;
		margin: -52rpx auto 0;
		position: relative;
		padding-bottom: 180rpx;

		>view {
			padding: 0 30rpx;
			background: #fff;
			border-radius: 24rpx;
		}

		.refund {
			height: 110rpx;
		}

		.goods_info {
			margin: 30rpx 0;
			padding: 30rpx 30rpx;

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

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

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

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

		.audit_order {
			padding: 15rpx 30rpx;

			.order_bottom {
				border-top: 2rpx solid #eeeeee;
			}

			.label {
				padding: 10rpx 0;

				text:first-child {
					font-size: 30rpx;
					color: #999;
				}

				text:last-child {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

	// .audit_info {
	// 	position: relative;
	// 	width: 630rpx;
	// 	margin: -30rpx auto 0;
	// 	.order_no {
	// 		font-size: 32rpx;
	// 		font-weight: bold;
	// 		&::before {
	// 			content: '';
	// 			display: inline-block;
	// 			width: 15rpx;
	// 			height: 15rpx;
	// 			border-radius: 50%;
	// 			border: 10rpx solid #fab33a;
	// 			margin-right: 10rpx;
	// 			vertical-align: -6rpx;
	// 		}
	// 	}
	// 	.audit_con {
	// 		width: 100%;
	// 		background: #fafafc;
	// 		margin-top: 30rpx;
	// 		padding: 30rpx;
	// 		box-sizing: border-box;
	// 		border-radius: 24rpx;
	// 		.con_top {
	// 			view {
	// 				margin-bottom: 15rpx;
	// 				font-size: 32rpx;
	// 			}

	// 			.icon {
	// 				margin-right: 15rpx;
	// 				color: #999;
	// 				font-size: 38rpx;
	// 			}
	// 		}
	// 		.con_bottom {
	// 			border-top: 2rpx solid #eeeeee;
	// 			text-align: right;
	// 			padding-top: 30rpx;
	// 			font-size: 32rpx;
	// 			color: #649cf7;
	// 		}
	// 	}
	// }
	.btn_box {
		width: 100%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding: 0 30rpx;
		box-sizing: border-box;

		view {
			width: 300rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}

		view:first-child {
			border: 2rpx solid #cccccc;
		}

		view:last-child {
			background: linear-gradient(93deg, #ffbf63 0%, #fc8924 100%);
			color: #fff;
		}
	}

	//取消弹窗样式
	.cancel_box {
		padding-top: 30rpx;

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

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

		.reject_btn {
			margin-top: 50rpx;
			width: 100%;

			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;
			}
		}
	}
</style>
