<template>
	<a-modal v-model:open="visible" title="日志详情" width="800px" :footer="null">
		<a-descriptions v-if="logData" bordered :column="2" size="small">
			<a-descriptions-item label="日志ID" :span="1">
				{{ logData.id }}
			</a-descriptions-item>
			<a-descriptions-item label="用户名" :span="1">
				{{ logData.username || '-' }}
			</a-descriptions-item>
			<a-descriptions-item label="模块" :span="1">
				{{ logData.module || '-' }}
			</a-descriptions-item>
			<a-descriptions-item label="操作" :span="1">
				{{ logData.action || '-' }}
			</a-descriptions-item>
			<a-descriptions-item label="请求方式" :span="1">
				<a-tag :color="getMethodColor(logData.method)">
					{{ logData.method }}
				</a-tag>
			</a-descriptions-item>
			<a-descriptions-item label="URL" :span="1">
				{{ logData.url || '-' }}
			</a-descriptions-item>
			<a-descriptions-item label="IP地址" :span="1">
				{{ logData.ip || '-' }}
			</a-descriptions-item>
			<a-descriptions-item label="状态码" :span="1">
				{{ logData.status_code || '-' }}
			</a-descriptions-item>
			<a-descriptions-item label="状态" :span="1">
				<a-tag :color="logData.status === 'success' ? 'success' : 'error'">
					{{ logData.status === 'success' ? '成功' : '失败' }}
				</a-tag>
			</a-descriptions-item>
			<a-descriptions-item label="执行时间" :span="1">
				<span
					:style="{
						color: getExecutionTimeColor(logData.execution_time),
					}"
				>
					{{ logData.execution_time }}ms
				</span>
			</a-descriptions-item>
			<a-descriptions-item label="创建时间" :span="2">
				{{ logData.created_at || '-' }}
			</a-descriptions-item>
			<a-descriptions-item label="User Agent" :span="2">
				<div style="max-height: 60px; overflow-y: auto">
					{{ logData.user_agent || '-' }}
				</div>
			</a-descriptions-item>
			<a-descriptions-item v-if="logData.error_message" label="错误信息" :span="2">
				<a-alert :message="logData.error_message" type="error" show-icon />
			</a-descriptions-item>
			<a-descriptions-item v-if="logData.params && Object.keys(logData.params).length > 0" label="请求参数" :span="2">
				<a-collapse>
					<a-collapse-panel key="params" header="查看请求参数">
						<pre style="max-height: 300px; overflow-y: auto; margin: 0">{{ formatJson(logData.params) }}</pre>
					</a-collapse-panel>
				</a-collapse>
			</a-descriptions-item>
			<a-descriptions-item v-if="logData.result" label="返回结果" :span="2">
				<a-collapse>
					<a-collapse-panel key="result" header="查看返回结果">
						<pre style="max-height: 300px; overflow-y: auto; margin: 0">{{ formatJson(logData.result) }}</pre>
					</a-collapse-panel>
				</a-collapse>
			</a-descriptions-item>
		</a-descriptions>
		<template #footer>
			<a-button @click="handleClose">关闭</a-button>
		</template>
	</a-modal>
</template>

<script setup>
import { ref } from 'vue'
import systemApi from '@/api/system'

defineOptions({
	name: 'LogDetailDialog',
})

const visible = ref(false)
const logData = ref(null)

// 获取请求方式颜色
const getMethodColor = (method) => {
	const colors = {
		GET: 'blue',
		POST: 'green',
		PUT: 'orange',
		DELETE: 'red',
		PATCH: 'purple',
	}
	return colors[method] || 'default'
}

// 获取执行时间颜色
const getExecutionTimeColor = (time) => {
	if (time > 1000) return '#ff4d4f'
	if (time > 500) return '#faad14'
	return '#52c41a'
}

// 格式化JSON
const formatJson = (data) => {
	if (typeof data === 'string') {
		try {
			return JSON.stringify(JSON.parse(data), null, 2)
		} catch (e) {
			return data
		}
	}
	return JSON.stringify(data, null, 2)
}

// 打开弹窗
const open = async () => {
	visible.value = true
	return {
		setData,
	}
}

// 设置数据
const setData = async (data) => {
	if (data && data.id) {
		// 如果传入了完整数据，直接使用
		if (data.params || data.result) {
			logData.value = data
		} else {
			// 否则从服务器获取完整数据
			try {
				const res = await systemApi.logs.detail.get(data.id)
				if (res.code === 200) {
					logData.value = res.data
				}
			} catch (error) {
				console.error('获取日志详情失败:', error)
			}
		}
	} else {
		logData.value = data
	}
}

// 关闭弹窗
const handleClose = () => {
	visible.value = false
	logData.value = null
}

// 暴露方法
defineExpose({
	open,
})
</script>

<style scoped lang="scss">
:deep(.ant-descriptions-item-label) {
	width: 120px;
}
</style>
