<template>
	<div>
		<template v-for="(item, index) in menuList">
			<div style="text-align: center;" :key="index">
				<Dropdown transfer v-if="item.children.length !== 1" placement="right-start" :key="index" @on-click="changeMenu">
					<Button style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
						<Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
					</Button>
					<DropdownMenu style="width: 200px;" slot="list">
						<template v-for="(child, i) in item.children">
							<DropdownItem :name="child.name" :key="i">
								<Icon :type="child.icon"></Icon><span style="padding-left:10px;">{{ itemTitle(child) }}</span>
							</DropdownItem>
						</template>
					</DropdownMenu>
				</Dropdown>
				<Dropdown transfer v-else placement="right-start" :key="index" @on-click="changeMenu">
					<Button @click="changeMenu(item.children[0].name)" style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
						<Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
					</Button>
					<DropdownMenu style="width: 200px;" slot="list">
						<DropdownItem :name="item.children[0].name" :key="'d' + index">
							<Icon :type="item.icon"></Icon><span style="padding-left:10px;">{{ itemTitle(item.children[0]) }}</span>
						</DropdownItem>
					</DropdownMenu>
				</Dropdown>
			</div>
		</template>
	</div>
</template>

<script>
export default {
  name: "sidebarMenuShrink",
  props: {
    menuList: {
      type: Array
    },
    iconColor: {
      type: String,
      default: "white"
    },
    menuTheme: {
      type: String,
      default: "darck"
    }
  },
  methods: {
    changeMenu(active) {
      this.$emit("on-change", active);
    },
    itemTitle(item) {
      if (typeof item.title === "object") {
        return this.$t(item.title.i18n);
      } else {
        return item.title;
      }
    }
  }
};
</script>
