<template>
	<div class="ver-card">
		<div class="header">
			<span class="title">版本信息</span>
		</div>
		<a-spin :spinning="loading">
			<a-descriptions bordered :column="1">
				<a-descriptions-item v-for="(item, index) in sysInfo" :key="index" :label="item.label">
					{{ item.values }}
				</a-descriptions-item>
			</a-descriptions>
		</a-spin>
	</div>
</template>

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

// 定义组件名称
defineOptions({
	name: 'VerWidget',
})

const loading = ref(true)
const sysInfo = ref([])

const getSystemList = async () => {
	try {
		const res = await systemApi.version.get()
		if (res.code === 1) {
			sysInfo.value = res.data
		}
	} catch (error) {
		console.error('获取版本信息失败:', error)
		// 使用模拟数据作为fallback
		sysInfo.value = [
			{ label: '系统版本', values: '1.0.0' },
			{ label: '框架版本', values: 'Vue 3.x' },
			{ label: '构建时间', values: '2024-01-01' },
		]
	} finally {
		loading.value = false
	}
}

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

<style scoped lang="scss">
.ver-card {
	background-color: #ffffff;
	padding: 16px;
	border-radius: 10px;
	margin: 16px 0;
	.header{
		padding-bottom: 10px;
		.title{
			font-size: 18px;
		}
	}
	:deep(.ant-descriptions-item-label) {
		width: 160px;
		font-weight: 500;
	}
}
</style>
