<template>
	<div class="side-menu-wrapper">
		<slot></slot>
		<Menu theme="dark"  v-show="!collapsed" width="auto" active-name="1" accordion  @on-select="handleSelect">
			<div v-for="i in menuList" :key="i.id">
				<MenuItem :name="i.id" v-if="!i.children || i.children.length == 0" :to="i.path">
					<Icon type="ios-paper" />
					{{i.name}}
				</MenuItem>
				<Submenu :name="i.id" v-if="i.children && i.children.length > 0" >
					<template slot="title">
						<Icon type="ios-stats" />
						{{i.name}}
					</template>
					<MenuItem  :to="j.path" :name="i.id + jindex" v-for="(j,jindex) in i.children" :key="j.id">{{j.name}}</MenuItem>
				</Submenu>
			</div>
		</Menu>
		<!-- <Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
      <template v-for="item in menuList">
        <template v-if="item.children && item.children.length === 1">
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`">
            <div class="my-menu-item">
              <common-icon :size="18" :type="item.children[0].icon || ''" style="margin-left: 8px;position: absolute;left: 24px;top: 50%;transform: translateY(-50%)"/>
              <span>{{ item.name }}</span>
            </div>
          </menu-item>
        </template>
        <template v-else>
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`">
            <common-icon :type="item.icon || ''"/>
            <span>{{ item.name }}</span>
          </menu-item>
        </template>
      </template>
    </Menu> -->
		<div class="menu-collapsed" v-show="collapsed" :list="menuList">
			<div  v-for="item in menuList" :key="item.id">
				<template>
					<collapsed-menu v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
					<Tooltip transfer v-else :content="item.name" placement="right" :key="`drop-menu-${item.name}`">
					<a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}">123</a>
					</Tooltip>
				</template>
			</div>
			
		</div>
	</div>
</template>
<script>
import SideMenuItem from './side-menu-item.vue'
import CollapsedMenu from './collapsed-menu.vue'
import { getUnion } from '@/libs/tools'
import mixin from './mixin'

export default {
	name: 'SideMenu',
	mixins: [mixin],
	components: {
		SideMenuItem,
		CollapsedMenu,
	},
	props: {
		menuList: {
			type: Array,
			default() {
				return []
			},
		},
		collapsed: {
			type: Boolean,
		},
		theme: {
			type: String,
			default: 'dark',
		},
		rootIconSize: {
			type: Number,
			default: 20,
		},
		iconSize: {
			type: Number,
			default: 16,
		},
		accordion: Boolean,
		activeName: {
			type: String,
			default: '',
		},
		openNames: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			openedNames: [],
		}
	},
	methods: {
		handleSelect(name) { 
			console.log(name)
			return
			this.$emit('on-select', name)
		},
		getOpenedNamesByActiveName(name) {
			return this.$route.matched
				.map((item) => item.name)
				.filter((item) => item !== name)
		},
		updateOpenName(name) {
			if (name === this.$config.homeName) this.openedNames = []
			else this.openedNames = this.getOpenedNamesByActiveName(name)
		},
	},
	computed: {
		textColor() {
			return this.theme === 'dark' ? '#fff' : '#495060'
		},
	},
	watch: {
		activeName(name) {
			if (this.accordion)
				this.openedNames = this.getOpenedNamesByActiveName(name)
			else
				this.openedNames = getUnion(
					this.openedNames,
					this.getOpenedNamesByActiveName(name)
				)
		},
		openNames(newNames) {
			this.openedNames = newNames
		},
		openedNames() {
			// this.$nextTick(() => {
			// 	this.$refs.menu.updateOpened()
			// })
		},
	},
	mounted() {
		//this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
	},
  beforeRouteLeave(){

  },
}
</script>
<style lang="less" scoped>
@import './side-menu.less';
</style>
