<template>
	<a-card :bordered="false">
		<template #title> 快捷方式</template>
		<div style="height: 150px">
			<a-row :gutter="10">
				<a-col :span="3" :key="shortcut.id" v-for="shortcut in shortcutList"
					   style="margin-top: 10px;margin-bottom: 10px">
					<shortcutCard
						:icon="shortcut.icon ? shortcut.icon : 'menu-outlined'"
						:label="shortcut.title"
						@click="leaveFor(shortcut.path)"
					/>
				</a-col>
			</a-row>
		</div>
	</a-card>
</template>

<script setup name="shortcut">
import router from '@/router'
import shortcutCard from '@/components/ShortcutCard/index.vue'
import {onMounted} from 'vue'
import tool from "@/utils/tool";

const shortcutList = ref([])
onMounted(() => {
	const userInfo = tool.data.get('USER_INFO')
	shortcutList.value = userInfo.workBenchData ? userInfo.workBenchData.shortcut : []
})

const leaveFor = (url = '/') => {
	router.replace({
		path: url
	})
}
</script>

<style scoped>
.ant-list-item {
	padding: 8px 0px !important;
}
</style>
