<template>
	<el-card>
		<el-row>
			<el-col :span="24">
				<el-table
					:data="state.listData"
					style="width: 100%"
					v-loading="state.loading"
					border
					stripe
				>
					<el-table-column
						prop="doctors.userName"
						label="主治医生"
						align="center"
						width="120"
					/>
					<el-table-column
						prop="oneDoctors.userName"
						label="申请医生"
						align="center"
						width="120"
					/>
					<el-table-column
						prop="createTime"
						label="申请时间"
						align="center"
						width="180"
					/>
					<el-table-column
						prop="purpose"
						label="申请目的"
						align="center"
						width="200"
						show-overflow-tooltip
					/>
					<el-table-column
						prop="hex"
						label="密钥"
						align="center"
						width="180"
					/>
					<el-table-column
						prop="status"
						label="申请状态"
						align="center"
						width="120"
					>
						<template #default="{ row }">
							<el-tag
								:type="getStatusTagType(row.status)"
								effect="plain"
							>
								{{ row.status }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column
						fixed="right"
						label="操作"
						align="center"
						width="200"
					>
						<template #default="scope">
							<el-button
								type="success"
								size="small"
								@click="handleAction(scope.row, 'agree')"
								:disabled="scope.row.status !== '待审核'"
							>
								同意
							</el-button>
							<el-button
								type="danger"
								size="small"
								@click="handleAction(scope.row, 'reject')"
								:disabled="scope.row.status !== '待审核'"
							>
								拒绝
							</el-button>
						</template>
					</el-table-column>
				</el-table>

				<el-pagination
					v-model:current-page="state.pagination.current"
					v-model:page-size="state.pagination.size"
					:total="state.pagination.total"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next, jumper"
					@size-change="fetchData"
					@current-change="fetchData"
					style="margin-top: 20px; justify-content: flex-end"
				/>
			</el-col>
		</el-row>
	</el-card>
</template>

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

const state = reactive({
	listData: [],
	loading: false,
	pagination: {
		current: 1,
		size: 10,
		total: 0
	}
})

// 获取状态标签类型
const getStatusTagType = (status) => {
	const statusMap = {
		'同意授权': 'success',
		'拒绝授权': 'danger',
		'待审核': 'warning'
	}
	return statusMap[status] || 'info'
}

// 获取数据
const fetchData = async () => {
	try {
		state.loading = true
		const res = await frontRequest.get("/api/audit/list", {
			params: {
				page: state.pagination.current,
				pageSize: state.pagination.size
			}
		})
		state.listData = res.data.list || res.data
		state.pagination.total = res.data.total || res.data.length
	} catch (error) {
		ElMessage.error('获取数据失败')
		console.error(error)
	} finally {
		state.loading = false
	}
}

// 处理操作
const handleAction = (row, action) => {
	const actionMap = {
		agree: '同意授权',
		reject: '拒绝授权'
	}

	ElMessageBox.confirm(
		`确定要${action === 'agree' ? '同意' : '拒绝'}该申请吗?`,
		'提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}
	).then(async () => {
		try {
			const newStatus = actionMap[action]
			await frontRequest.put("/api/audit", {
				...row,
				status: newStatus
			})
			ElMessage.success('操作成功')
			fetchData()
		} catch (error) {
			ElMessage.error('操作失败')
			console.error(error)
		}
	}).catch(() => {
		ElMessage.info('已取消操作')
	})
}

onMounted(() => {
	fetchData()
})
</script>

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

.el-table {
	margin-top: 20px;
}

.el-button + .el-button {
	margin-left: 8px;
}
</style>

<route lang="json">
{
"meta": {
"layout": "front",
"title": "申请审核管理"
}
}
</route>
