﻿<template>
	<el-dialog :title="isDetail ? '退款申请详情' : '处理退款申请'" :close-on-click-modal="false" :visible.sync="visible" class="refund-dialog" lock-scroll width="700px" :top="'8vh'">
		<div class="dialog-content" v-loading="loading">
			<!-- 申请信息 -->
			<div class="info-section">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-document"></i>
					</div>
					<div class="header-text">
						<h3>申请信息</h3>
					</div>
				</div>
				<div class="section-content">
					<el-form :model="dataForm" size="small" label-width="100px" label-position="right">
						<el-row :gutter="15">
							<el-col :span="12">
								<el-form-item label="申请时间">
									<el-input :value="formatDateTime(dataForm.applyTime)" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="订单编号">
									<el-input v-model="dataForm.orderNo" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="12">
								<el-form-item label="申请金额">
									<el-input :value="'¥' + dataForm.applyAmount" readonly class="amount-input" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="当前状态">
									<el-tag v-if="dataForm.refundStatus === 0" type="warning" size="small">
										<i class="el-icon-time"></i> 待处理
									</el-tag>
									<el-tag v-else-if="dataForm.refundStatus === 1" type="success" size="small">
										<i class="el-icon-check"></i> 已同意
									</el-tag>
									<el-tag v-else-if="dataForm.refundStatus === 2" type="danger" size="small">
										<i class="el-icon-close"></i> 已拒绝
									</el-tag>
									<el-tag v-else-if="dataForm.refundStatus === 3" type="info" size="small">
										<i class="el-icon-success"></i> 已退款
									</el-tag>
									<el-tag v-else type="info" size="small">未知</el-tag>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>

			<!-- 用户信息 -->
			<div class="info-section">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-user"></i>
					</div>
					<div class="header-text">
						<h3>用户信息</h3>
					</div>
				</div>
				<div class="section-content">
					<el-form :model="dataForm" size="small" label-width="100px" label-position="right">
						<el-row :gutter="15">
							<el-col :span="12">
								<el-form-item label="用户ID">
									<el-input v-model="dataForm.userId" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="用户电话">
									<el-input v-model="dataForm.userPhone" readonly class="phone-input" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>

			<!-- 退款详情 -->
			<div class="info-section">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-edit"></i>
					</div>
					<div class="header-text">
						<h3>退款详情</h3>
					</div>
				</div>
				<div class="section-content">
					<el-form :model="dataForm" size="small" label-width="100px" label-position="right">
						<el-row :gutter="15">
							<el-col :span="24">
								<el-form-item label="退款原因">
									<el-input v-model="dataForm.refundReason" type="textarea" readonly class="readonly-textarea" :rows="2" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<el-form-item label="申请备注">
									<el-input v-model="dataForm.remark" type="textarea" readonly class="readonly-textarea" :rows="2" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>

			<!-- 处理信息 -->
			<div class="info-section" v-if="dataForm.refundStatus !== 0">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-check"></i>
					</div>
					<div class="header-text">
						<h3>处理信息</h3>
					</div>
				</div>
				<div class="section-content">
					<el-form :model="dataForm" size="small" label-width="100px" label-position="right">
						<el-row :gutter="15">
							<el-col :span="12">
								<el-form-item label="处理时间">
									<el-input :value="formatDateTime(dataForm.handleTime)" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="处理人">
									<el-input v-model="dataForm.handleUser" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<el-form-item label="处理结果">
									<el-input v-model="dataForm.handleResult" type="textarea" readonly class="readonly-textarea" :rows="2" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>

			<!-- 处理操作 -->
			<div class="action-section" v-if="!isDetail && dataForm.refundStatus === 0">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-edit"></i>
					</div>
					<div class="header-text">
						<h3>处理操作</h3>
					</div>
				</div>
				<div class="section-content">
					<el-form ref="handleForm" :model="handleForm" :rules="handleRules" size="small" label-width="100px" label-position="right">
						<el-row :gutter="15">
							<el-col :span="24">
								<el-form-item label="处理结果" prop="handleResult">
									<el-input v-model="handleForm.handleResult" type="textarea" placeholder="请输入处理结果或备注信息" :rows="2" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="danger" @click="RejectRefund()" v-if="!isDetail && dataForm.refundStatus === 0" :loading="submitLoading">拒绝退款</el-button>
			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail && dataForm.refundStatus === 0" :loading="submitLoading">确定退款</el-button>
		</span>
	</el-dialog>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
	components: {},
	props: [],
	data() {
		return {
			loading: false,
			submitLoading: false,
			visible: false,
			isDetail: false,
			dataForm: {
				id: '',
				applyTime: undefined,
				orderNo: undefined,
				applyAmount: undefined,
				userId: undefined,
				userPhone: undefined,
				refundReason: '',
				remark: '',
				refundStatus: 0,
				handleTime: undefined,
				handleUser: '',
				handleResult: ''
			},
			handleForm: {
				handleResult: ''
			},
			handleRules: {
				handleResult: [
					{ required: true, message: '请填写处理结果', trigger: 'blur' }
				]
			},
			rules: {
			},
		}
	},
	computed: {},
	watch: {},
	created() {
	},
	mounted() {
	},
	methods: {
		goBack() {
			this.$emit('refresh')
		},
		init(id, isDetail) {
			this.dataForm.id = id || 0;
			this.visible = true;
			this.isDetail = isDetail || false;
			this.loading = true;
			this.$nextTick(() => {
				if (this.dataForm.id) {
					request({
						url: '/api/Extend/UavRefundApplication/' + this.dataForm.id,
						method: 'get'
					}).then(res => {
						this.dataForm = res.data;
						this.handleForm.handleResult = res.data.handleResult || '';
						this.loading = false;
					}).catch(() => {
						this.loading = false;
					})
				} else {
					this.loading = false;
				}
			})
		},
		formatDateTime(dateTime) {
			if (!dateTime) return '-'
			const date = new Date(dateTime)
			return date.toLocaleString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit'
			})
		},
		RejectRefund() {
			this.$refs['handleForm'].validate((valid) => {
				if (valid) {
					this.$confirm('确认拒绝此退款申请吗？', '提示', {
						type: 'warning'
					}).then(() => {
						this.submitLoading = true;
						const submitData = {
							...this.dataForm,
							handleResult: this.handleForm.handleResult
						};
						request({
							url: `/api/Extend/UavRefundApplication/RejectRefund`,
							method: 'post',
							data: submitData,
						}).then((res) => {
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.visible = false;
									this.$emit('refresh', true);
								}
							})
						}).catch(() => {
							this.submitLoading = false;
						})
					})
				}
			})
		},
		dataFormSubmit() {
			this.$refs['handleForm'].validate((valid) => {
				if (valid) {
					this.$confirm('确认同意此退款申请并执行退款吗？', '提示', {
						type: 'warning'
					}).then(() => {
						this.submitLoading = true;
						request({
							url: `/api/Extend/AliPay/RefundPay`,
							method: 'post',
							data: {
								OutOrderNo: this.dataForm.orderNo,
								handleResult: this.handleForm.handleResult
							}
						}).then((res) => {
							this.$message({
								message: res.data,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.visible = false;
									this.$emit('refresh', true);
								}
							})
						}).catch(() => {
							this.submitLoading = false;
						})
					})
				}
			})
		},
	}
}
</script>

<style scoped>
/* 弹窗整体样式 */
.refund-dialog {
	border-radius: 8px;
	overflow: hidden;
}

.refund-dialog >>> .el-dialog {
	border-radius: 8px;
	overflow: hidden;
}

.refund-dialog >>> .el-dialog__header {
	background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
	color: white;
	padding: 15px 20px;
	margin: 0;
}

.refund-dialog >>> .el-dialog__title {
	color: white;
	font-size: 16px;
	font-weight: 600;
}

.refund-dialog >>> .el-dialog__headerbtn .el-dialog__close {
	color: white;
	font-size: 18px;
}

.refund-dialog >>> .el-dialog__body {
	padding: 0;
	background: #f8f9fa;
	max-height: 80vh;
	overflow-y: auto;
}

.dialog-content {
	padding: 15px;
	max-height: none;
	overflow: visible;
}

/* 信息区块样式 */
.info-section, .action-section {
	background: white;
	border-radius: 8px;
	margin-bottom: 15px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.section-header {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	padding: 12px 20px;
	border-bottom: 1px solid #e9ecef;
	display: flex;
	align-items: center;
}

.header-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #409EFF, #66b1ff);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.header-icon i {
	color: white;
	font-size: 16px;
}

.header-text h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #303133;
}

.section-content {
	padding: 15px;
}

/* 输入框样式 */
.readonly-input >>> .el-input__inner {
	background-color: #f5f7fa;
	border-color: #e4e7ed;
	color: #606266;
	cursor: not-allowed;
}

.amount-input >>> .el-input__inner {
	background-color: #f0f9ff;
	border-color: #b3d8ff;
	color: #409EFF;
	font-weight: bold;
	font-size: 14px;
	cursor: not-allowed;
}

.phone-input >>> .el-input__inner {
	background-color: #f5f7fa;
	border-color: #e4e7ed;
	color: #606266;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	cursor: not-allowed;
}

.readonly-textarea >>> .el-textarea__inner {
	background-color: #f5f7fa;
	border-color: #e4e7ed;
	color: #606266;
	cursor: not-allowed;
}

/* 处理操作样式 */
.action-section {
	border: 2px solid #409EFF;
	background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
}

/* 底部按钮样式 */
.dialog-footer {
	padding: 15px 20px;
	background: #f8f9fa;
	border-top: 1px solid #e9ecef;
	text-align: right;
}

.dialog-footer .el-button {
	padding: 8px 20px;
	border-radius: 4px;
	font-weight: 500;
	font-size: 14px;
}

.dialog-footer .el-button--primary {
	background: linear-gradient(135deg, #409EFF, #66b1ff);
	border: none;
}

.dialog-footer .el-button--primary:hover {
	background: linear-gradient(135deg, #66b1ff, #409EFF);
	box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
}

.dialog-footer .el-button--danger {
	background: linear-gradient(135deg, #f56c6c, #f78989);
	border: none;
}

.dialog-footer .el-button--danger:hover {
	background: linear-gradient(135deg, #f78989, #f56c6c);
	box-shadow: 0 2px 8px rgba(245, 108, 108, 0.4);
}

/* 响应式优化 */
@media (max-width: 768px) {
	.dialog-content {
		padding: 10px;
	}
	
	.section-header {
		padding: 10px 15px;
	}
	
	.section-content {
		padding: 12px;
	}
	
	.refund-dialog >>> .el-dialog__body {
		max-height: 85vh;
	}
}

/* 小屏幕优化 */
@media (max-width: 480px) {
	.refund-dialog >>> .el-dialog {
		width: 95% !important;
		margin: 0 auto;
	}
	
	.refund-dialog >>> .el-dialog__body {
		max-height: 90vh;
	}
}
</style>
