<template>
	<div class="menu">
		<div class="menu-item" v-for="(item, key) of data">
			<el-link @click="clickItem(key)" :icon="item.icon" :disabled="item.disabled">
				<el-badge is-dot :hidden="!menuBadge(key)">
					{{item.label || ''}}
				</el-badge>
			</el-link>
			<el-dropdown v-if="item.sub" trigger="hover" placement="top" size="mini" @command="onSubCommand">
				<el-link icon="el-icon-arrow-down" :underline="false"></el-link>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item v-for="(subItem, key) in item.sub" :command="key" :key="key">{{subItem}}</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'

	export default {
		name: "SampleMenu",
		props: ['data'],
		data() {
			return {}
		},
		computed: {
			...mapGetters([
				'menuBadge',
			]),
		},
		methods: {
			clickItem(key) {
				this.$emit('click-menu', key);
			},
			onSubCommand(command){
				this.$emit('click-menu', command);
			},
		}
	}
</script>

<style scoped>

</style>