<template>
	<el-dialog title="处理提现申请" :close-on-click-modal="false" :visible.sync="visible" class="process-dialog" lock-scroll width="700px" :show-close="true" :top="'10vh'">
		<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>
						<p>待处理的提现申请详情</p>
					</div>
				</div>
				<div class="section-content">
					<el-form :model="dataForm" size="small" label-width="120px" label-position="right">
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="提现申请号">
									<el-input v-model="dataForm.walletNo" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="提现金额">
									<el-input :value="'¥' + dataForm.amount" readonly class="amount-input" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="收款账户户名">
									<el-input v-model="dataForm.bankAccountName" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="收款银行名称">
									<el-input v-model="dataForm.bankName" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="收款账户卡号">
									<el-input v-model="dataForm.bankAccountNumber" readonly class="bank-card-input" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>

			<!-- 处理操作 -->
			<div class="action-section">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-edit"></i>
					</div>
					<div class="header-text">
						<h3>处理操作</h3>
						<p>请选择处理结果并填写相关信息</p>
					</div>
				</div>
				<div class="section-content">
					<el-form ref="processForm" :model="processForm" :rules="processRules" size="small" label-width="120px" label-position="right">
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="处理结果" prop="transferStatus">
									<el-radio-group v-model="processForm.transferStatus" class="process-radio-group">
										<el-radio :label="1" class="process-radio">
											<i class="el-icon-success"></i>
											<span>已转账</span>
										</el-radio>
										<el-radio :label="2" class="process-radio">
											<i class="el-icon-error"></i>
											<span>转账失败</span>
										</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="转账时间" prop="transferTime">
									<el-date-picker
										v-model="processForm.transferTime"
										type="datetime"
										placeholder="请选择转账时间"
										format="yyyy-MM-dd HH:mm:ss"
										value-format="yyyy-MM-dd HH:mm:ss"
										class="datetime-picker">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="备注信息" prop="transferRemark">
									<el-input v-model="processForm.transferRemark" type="textarea" 
										:placeholder="processForm.transferStatus === 1 ? '请输入转账备注' : '请输入失败原因'" 
										:rows="3" class="remark-textarea" />
								</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="primary" @click="processSubmit()" :loading="submitLoading">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import request from '@/utils/request'
	
	export default {
		components: {},
		props: [],
		data() {
			return {
				loading: false,
				submitLoading: false,
				visible: false,
				dataForm: {
					id: '',
					walletNo: '',
					amount: 0,
					bankAccountName: '',
					bankAccountNumber: '',
					bankName: ''
				},
				processForm: {
					transferStatus: 1,
					transferTime: '',
					transferRemark: ''
				},
				processRules: {
					transferStatus: [
						{ required: true, message: '请选择处理结果', trigger: 'change' }
					],
					transferTime: [
						{ required: true, message: '请选择转账时间', trigger: 'change' }
					],
					transferRemark: [
						{ required: true, message: '请填写备注信息', trigger: 'blur' }
					]
				}
			}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {},
		methods: {
			goBack() {
				this.$emit('refresh')
			},
			init(id) {
				this.dataForm.id = id || 0
				this.visible = true
				this.loading = true
				this.$nextTick(() => {
					if (this.dataForm.id) {
						// 获取申请详情
						request({
							url: '/api/Extend/UavWalletWithdrawApply/' + this.dataForm.id,
							method: 'get'
						}).then(res => {
							this.dataForm = res.data
							this.loading = false
						}).catch(() => {
							this.loading = false
						})
					} else {
						this.loading = false
					}
				})
			},
			processSubmit() {
				this.$refs['processForm'].validate((valid) => {
					if (valid) {
						this.submitLoading = true
						request({
							url: '/api/Extend/UavWalletWithdrawApply/' + this.dataForm.id + '/Process',
							method: 'put',
							data: this.processForm
						}).then((res) => {
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.visible = false
									this.$emit('refresh', true)
								}
							})
						}).catch(() => {
							this.submitLoading = false
						})
					}
				})
			}
		}
	}
</script>

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

.process-dialog >>> .el-dialog {
	border-radius: 12px;
	overflow: hidden;
}

.process-dialog >>> .el-dialog__header {
	background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
	color: white;
	padding: 20px 30px;
	margin: 0;
}

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

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

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

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

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

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

.header-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(135deg, #67c23a, #85ce61);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

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

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

.header-text p {
	margin: 0;
	font-size: 14px;
	color: #909399;
}

.section-content {
	padding: 20px;
}

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

.amount-input >>> .el-input__inner {
	background-color: #fef0f0;
	border-color: #fbc4c4;
	color: #f56c6c;
	font-weight: bold;
	font-size: 16px;
	cursor: not-allowed;
}

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

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

.process-radio-group {
	display: flex;
	gap: 20px;
}

.process-radio {
	display: flex;
	align-items: center;
	padding: 15px 25px;
	border: 2px solid #e4e7ed;
	border-radius: 8px;
	background: white;
	cursor: pointer;
	transition: all 0.3s ease;
	flex: 1;
	justify-content: center;
}

.process-radio:hover {
	border-color: #67c23a;
	box-shadow: 0 2px 8px rgba(103, 194, 58, 0.2);
}

.process-radio.is-checked {
	border-color: #67c23a;
	background: linear-gradient(135deg, #f0f9ff, #e6f7ff);
	box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.process-radio i {
	margin-right: 8px;
	font-size: 16px;
}

.process-radio span {
	font-weight: 500;
}

/* 日期选择器样式 */
.datetime-picker {
	width: 100%;
}

.datetime-picker >>> .el-input__inner {
	border-radius: 6px;
	border-color: #dcdfe6;
	transition: all 0.3s ease;
}

.datetime-picker >>> .el-input__inner:focus {
	border-color: #67c23a;
	box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
}

/* 备注文本框样式 */
.remark-textarea >>> .el-textarea__inner {
	border-radius: 6px;
	border-color: #dcdfe6;
	transition: all 0.3s ease;
	resize: none;
}

.remark-textarea >>> .el-textarea__inner:focus {
	border-color: #67c23a;
	box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
}

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

.dialog-footer .el-button {
	padding: 10px 25px;
	border-radius: 6px;
	font-weight: 500;
}

.dialog-footer .el-button--primary {
	background: linear-gradient(135deg, #67c23a, #85ce61);
	border: none;
}

.dialog-footer .el-button--primary:hover {
	background: linear-gradient(135deg, #85ce61, #67c23a);
	box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
}

/* 响应式优化 */
@media (max-width: 768px) {
	.dialog-content {
		padding: 15px;
	}
	
	.section-header {
		padding: 15px 20px;
	}
	
	.section-content {
		padding: 15px;
	}
	
	.process-radio-group {
		flex-direction: column;
		gap: 10px;
	}
	
	.process-radio {
		padding: 12px 20px;
	}
	
	.process-dialog >>> .el-dialog__body {
		max-height: 90vh;
	}
}

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