<template>
	<div>
		<!-- 证书列表 -->
		<el-table :data="state.certificateList" v-loading="loading" class="el-table">
			<el-table-column prop="id" label="编号" />
			<el-table-column prop="certificates.certificateNumber" label="证书编号" />
			<el-table-column prop="path" label="证书" align="center">
				<template #default="scope">
					<el-image
						style="width: 50px; height: 50px"
						:src="scope.row.certificates.img"
						:preview-src-list="scope.row.certificates.img.toString().split(',')"
						fit="cover"
						:preview-teleported="true"
					/>
				</template>
			</el-table-column>
			<el-table-column prop="user.nickName" label="用户" />
			<el-table-column prop="createTime" label="申请时间" />
			<el-table-column
				prop="auditStatus"
				label="审核状态"
				:formatter="statusText"
			/>

			<el-table-column prop="auditTime" label="审核时间" />
			<el-table-column prop="auditComments" label="申请备注" />
			<el-table-column label="操作" fixed="right" align="center">
				<template #default="scope">
					<el-button link type="primary" @click="openForm(false, scope.row)">审核</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 审核弹窗 -->
		<el-dialog
			v-model="state.dialogVisible"
			:title="state.dialogTitle"
			width="600px"
			:close-on-click-modal="false"
		>
			<el-form :model="state.form" :rules="auditRules" ref="formRef" label-position="top">
				<el-form-item label="审核状态" prop="auditStatus">
					<el-select v-model="state.form.auditStatus" placeholder="请选择审核状态">
						<el-option label="未审核" :value="0" />
						<el-option label="审核通过" :value="1" />
						<el-option label="审核拒绝" :value="2" />
					</el-select>
				</el-form-item>
				<el-form-item label="审核备注" prop="auditComments">
					<el-input
						type="textarea"
						v-model="state.form.auditComments"
						placeholder="请输入审核备注"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="state.dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitAudit">提交审核</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

// 全局状态
const loading = ref(true)
const state = reactive({
	dialogVisible: false,
	dialogTitle: '',
	certificateList: [] as any[],
	form: {} as any,
	query: {
		page: 1,
		limit: 10,
		total: 1,
	},
})
const formRef = ref<FormInstance>()

// 显示审核状态文本
const statusText = (row: any) => {
	const map = {
		0: '待审核',
		1: '审核通过',
		2: '审核拒绝'
	}
	return map[row.auditStatus] ?? '未知'
}

// 审核表单校验规则
const auditRules = {
	auditStatus: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
	auditComments: [{ required: true, message: '请输入审核备注', trigger: 'blur' }],
}

// 加载证书数据
const loadCertificates = async () => {
	loading.value = true
	const res = await adminRequest.get('/sys/applications/page', { params: state.query })
	state.certificateList = res.data.list || []
	state.query.total = res.data.total
	loading.value = false
}
onMounted(() => {
	loadCertificates()
})

// 打开审核弹窗（isAdd为false，表示为审核操作，data为选中记录）
const openForm = (isAdd: boolean, data?: any) => {
	state.dialogVisible = true
	state.dialogTitle = '审核证书'
	if (!isAdd && data) {
		state.form = {
			id: data.id,
			auditStatus: data.auditStatus, // 若已有审核信息，可回显
			auditComments: data.auditComments || '',
		}
	}
}
// 提交审核信息
const submitAudit = () => {
	if (!formRef.value) return
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			// 此处调用审核接口，假设接口为PUT /sys/applications/audit
			await adminRequest.put('/sys/applications', state.form)
			ElMessage.success('审核提交成功')
			state.dialogVisible = false
			loadCertificates()
		} else {
			ElMessage.error('请完善审核信息')
			return false
		}
	})
}
</script>

<style scoped>
.el-table {
	margin-top: 20px;
}

.tip-dialog h4 {
	margin: 0 0 10px 0;
	color: #f0ad4e;
}
.tip-dialog p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}
</style>
