<template>
		<a-menu v-model:selectedKeys="selectedKeys" @click="menuClick" style="width: 100%;border-radius: 8px;" mode="inline">
			<a-menu-item v-for="(item, index) in menuList" :key="item.key">{{item.title}}</a-menu-item>
		</a-menu>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, watch, defineProps, defineEmits } from 'vue';
	let props = defineProps(['menu_list', 'selected_key']);
	let emit = defineEmits();
	let menuList = ref<Object[]>(props.menu_list)
	const selectedKeys = ref<Number[]>([1]);

	watch(() => [props.menu_list, props.selected_key], (newVal) => {
		menuList.value = newVal[0];
		selectedKeys.value = newVal[1]
	},{ immediate: true })

	const menuClick = (val) => {
		emit('changeKey', { key: val.key })
	}
</script>

<style scoped>
	:deep(.ant-menu-item-selected) {
		color: #4FBE70 !important;
	}
</style>