<template>
	<view class="page">
		<u-navbar title="押金退还详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<view class="topbj"></view>
		
		<scroll-view class="content" scroll-y>
			<!-- 状态卡片 -->
			<view class="status-card">
			<view class="status-icon" :class="statusClass">
				<u-icon :name="statusIcon" size="60" color="#fff"></u-icon>
			</view>
			<view class="status-text">{{statusText}}</view>
				<view class="status-desc" v-if="detailInfo.status == 1">您的申请正在审核中，请耐心等待</view>
				<view class="status-desc" v-if="detailInfo.status == 2">审核通过，退款处理中</view>
				<view class="status-desc" v-if="detailInfo.status == 3">退款已成功到账</view>
				<view class="status-desc" v-if="detailInfo.status == 4">申请已被驳回</view>
			</view>

			<!-- 申请信息 -->
			<view class="info-card">
				<view class="card-title">申请信息</view>
				<view class="info-list">
					<view class="info-item">
						<text class="label">申请单号</text>
						<text class="value">{{detailInfo.no || '--'}}</text>
					</view>
					<view class="info-item">
						<text class="label">申请金额</text>
						<text class="value price">￥{{detailInfo.amount ? parseFloat(detailInfo.amount).toFixed(2) : '0.00'}}</text>
					</view>
					<view class="info-item">
						<text class="label">运营区</text>
						<text class="value">{{detailInfo.areaName || '--'}}</text>
					</view>
					<view class="info-item">
						<text class="label">申请时间</text>
						<text class="value">{{detailInfo.createTime || '--'}}</text>
					</view>
				</view>
			</view>

			<!-- 审核信息 -->
			<view class="info-card" v-if="detailInfo.status >= 2">
				<view class="card-title">审核信息</view>
				<view class="info-list">
					<view class="info-item" v-if="detailInfo.verifyTime">
						<text class="label">审核时间</text>
						<text class="value">{{detailInfo.verifyTime}}</text>
					</view>
					<view class="info-item" v-if="detailInfo.operatorName">
						<text class="label">审核人</text>
						<text class="value">{{detailInfo.operatorName}}</text>
					</view>
					<view class="info-item" v-if="detailInfo.remark">
						<text class="label">审核备注</text>
						<text class="value">{{detailInfo.remark}}</text>
					</view>
				</view>
			</view>

			<!-- 退款信息 -->
			<view class="info-card" v-if="detailInfo.status == 3">
				<view class="card-title">退款信息</view>
				<view class="info-list">
					<view class="info-item" v-if="detailInfo.refundTime">
						<text class="label">退款时间</text>
						<text class="value">{{detailInfo.refundTime}}</text>
					</view>
					<view class="info-item">
						<text class="label">退款金额</text>
						<text class="value price">￥{{detailInfo.amount ? parseFloat(detailInfo.amount).toFixed(2) : '0.00'}}</text>
					</view>
					<view class="info-item" v-if="detailInfo.no">
						<text class="label">退款单号</text>
						<text class="value">{{detailInfo.no}}</text>
					</view>
				</view>
			</view>

			<!-- 驳回原因 -->
			<view class="info-card" v-if="detailInfo.status == 4 && detailInfo.rejectReason">
				<view class="card-title">驳回原因</view>
				<view class="reject-reason">
					{{detailInfo.rejectReason}}
				</view>
			</view>

			<!-- 其他信息 -->
			<view class="info-card" v-if="detailInfo.remark">
				<view class="card-title">备注信息</view>
				<view class="remark-content">
					{{detailInfo.remark}}
				</view>
			</view>

			<view class="footer-spacer"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#C4E1FF",
				},
				id: '',
				detailInfo: {},
				isMerchant: false
			}
		},
		onLoad(options) {
			if(options.id){
				this.id = options.id
				// 判断是否为商户端访问
				this.isMerchant = options.isMerchant === 'true' || options.isMerchant === true
				this.getDetail()
			}
		},
		computed: {
			// 状态样式类
			statusClass(){
				const status = this.detailInfo.status
				const classMap = {
					1: 'status-pending',
					2: 'status-processing',
					3: 'status-success',
					4: 'status-rejected'
				}
				return classMap[status] || 'status-pending'
			},
			// 状态图标
			statusIcon(){
				const status = this.detailInfo.status
				const iconMap = {
					1: 'clock',
					2: 'hourglass',
					3: 'checkmark-circle',
					4: 'close-circle'
				}
				return iconMap[status] || 'info-circle'
			},
			// 状态文本
			statusText(){
				const status = this.detailInfo.status
				const statusMap = {
					1: '待审核',
					2: '待退款',
					3: '退款成功',
					4: '已驳回'
				}
				return statusMap[status] || '--'
			}
		},
		methods: {
			// 获取详情
			getDetail(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				// 判断是否为商户端（通过URL参数或接口路径判断）
				const isMerchant = this.isMerchant || false
				const apiUrl = isMerchant ? `/bst/depositRefund/${this.id}` : `/app/depositRefund/detail?id=${this.id}`
				
				this.$u.get(apiUrl).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						// 商户端接口返回的数据结构可能不同，需要适配
						this.detailInfo = isMerchant ? (res.data || res) : (res.data || {})
					}else if(res.code == 401){
						uni.showModal({
							title: '提示',
							content: '您当前未登录，是否前去登录？',
							showCancel: true,
							success: function (res) {
								if (res.confirm) {
									uni.reLaunch({
										url:'/pages/login/login'
									})
								}
							}
						})
					}else{
						uni.showToast({
							title: res.msg || '获取详情失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}
	.topbj{
		width: 100%;
		height: 22rpx;
		background-color: #C4E1FF;
	}
	.content{
		height: calc(100vh - 88rpx);
		padding: 20rpx;
		box-sizing: border-box;
	}
	.status-card{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		margin-bottom: 20rpx;
		text-align: center;
		.status-icon{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin: 0 auto 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&.status-pending{
				background: linear-gradient(135deg, #FFA726 0%, #FF8A65 100%);
			}
			&.status-processing{
				background: linear-gradient(135deg, #42A5F5 0%, #1E88E5 100%);
			}
			&.status-success{
				background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
			}
			&.status-rejected{
				background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
			}
		}
		.status-text{
			font-size: 40rpx;
			font-weight: 600;
			color: #3D3D3D;
			margin-bottom: 20rpx;
		}
		.status-desc{
			font-size: 28rpx;
			color: #808080;
		}
	}
	.info-card{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		.card-title{
			font-size: 32rpx;
			font-weight: 600;
			color: #3D3D3D;
			margin-bottom: 30rpx;
			padding-left: 20rpx;
			border-left: 6rpx solid #4297F3;
		}
		.info-list{
			.info-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #F0F0F0;
				&:last-child{
					border-bottom: none;
				}
				.label{
					font-size: 28rpx;
					color: #808080;
				}
				.value{
					font-size: 28rpx;
					color: #3D3D3D;
					&.price{
						font-weight: 600;
						color: #4297F3;
						font-size: 32rpx;
					}
				}
			}
		}
		.reject-reason{
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 1.6;
			padding: 20rpx;
			background: #FFF5F5;
			border-radius: 10rpx;
			border-left: 4rpx solid #EF5350;
		}
		.remark-content{
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 1.6;
			padding: 20rpx;
			background: #F8F9FA;
			border-radius: 10rpx;
		}
	}
	.footer-spacer{
		height: 40rpx;
	}
</style>
