<template>
	<el-dialog v-model="visible" title="审核结算" width="600px" :close-on-click-modal="false" draggable>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" v-loading="loading">
			<el-row :gutter="20">
				<el-col :span="24" class="mb20">
					<el-form-item label="代理名称">
						<el-input v-model="form.agentName" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="提现金额">
						<el-input v-model="form.amount" disabled>
							<template #prepend>¥</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="提现类型">
						<el-input :value="form.type === 1 ? '银行卡' : 'U'" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="银行名称">
						<el-input v-model="form.bankName" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="银行账号">
						<el-input v-model="form.bankAccount" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="真实姓名">
						<el-input v-model="form.realName" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="审核状态" prop="auditStatus">
						<el-radio-group v-model="form.auditStatus">
							<el-radio :label="1">通过</el-radio>
							<el-radio :label="2">拒绝</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20" v-if="form.auditStatus === 2">
					<el-form-item label="拒绝原因" prop="failReason">
						<el-input v-model="form.failReason" type="textarea" :rows="3" placeholder="请输入拒绝原因" maxlength="200" show-word-limit />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" name="settlementAgentWithdrawAudit" setup>
import { auditAgentWithdraw } from '/@/api/order';
import { useMessage } from '/@/hooks/message';

const emit = defineEmits(['refresh']);

const visible = ref(false);
const loading = ref(false);
const formRef = ref();

const form = reactive({
	id: 0,
	agentName: '',
	amount: 0,
	type: 1,
	bankName: '',
	bankAccount: '',
	realName: '',
	auditStatus: 1,
	failReason: '',
});

const rules = reactive({
	auditStatus: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
	failReason: [{ required: true, message: '请输入拒绝原因', trigger: 'blur' }],
});

// 打开弹窗
const openDialog = (row: any) => {
	form.id = row.id;
	form.agentName = row.agentName;
	form.amount = row.amount;
	form.type = row.type;
	form.bankName = row.bankName;
	form.bankAccount = row.bankAccount;
	form.realName = row.realName;
	form.auditStatus = 1;
	form.failReason = '';
	visible.value = true;
};

// 提交审核
const handleSubmit = async () => {
	try {
		await formRef.value.validate();
		loading.value = true;

		const submitData: any = {
			id: form.id,
			auditStatus: form.auditStatus,
		};

		if (form.auditStatus === 2) {
			submitData.failReason = form.failReason;
		}

		await auditAgentWithdraw(submitData);
		useMessage().success('审核成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		if (err !== 'cancel') {
			useMessage().error(err.msg || '审核失败');
		}
	} finally {
		loading.value = false;
	}
};

defineExpose({
	openDialog,
});
</script>

<style scoped></style>
