import { Menu, MenuItem, Submenu } from 'element-ui'

export default {
	name: 'PoinNavMenu',

	data() {
		return {
			parentIndexArray: [],
			parentIdArray: []
		}
	},

	components: {
		'el-menu': Menu,
		'el-menu-item': MenuItem,
		'el-submenu': Submenu
	},
	
	props: {
		mode: {
			type: String,
			default: 'horizontal'
		},
		router: {
			type:Boolean,
			default: false
		},
		defaultOpeneds: Array,
		uniqueOpened: Boolean,
		menuTrigger: {
				type: String,
				default: 'hover'
		},
		collapse: Boolean,
		backgroundColor: String,
		textColor: String,
		activeTextColor: String,
		collapseTransition: {
				type: Boolean,
				default: true
		},
		treeRootPid: {
				type: Number,
				default: -1
		},
		basePath: {
				type: String,
				default: ''
		},
		data:Array
	},
	
	render(h) {
		let items = this.menuData;
		return (
			<el-menu
				default-active={ this.activeIndex }
				mode={ this.mode }
				router={ this.router }
				background-color={ this.backgroundColor }
				text-color={ this.textColor }
				active-text-color={ this.activeTextColor }
				default-openeds={ this.defaultOpeneds }
				unique-opened={ this.uniqueOpened }
				collapse={ this.collapse }
				collapse-transition={ this.collapseTransition }
				menu-trigger={ this.menuTrigger }
				on-select={ (key, keyPath) => this.handleSelect(key, keyPath) }
				on-open={ (key, keyPath) => this.handleOpen(key, keyPath) }
				on-close={ (key, keyPath) => this.handleClose(key, keyPath) }
			>
				{
					this._l(items, (item, $index) => {
						return this.renderInner(item)
					})
				}
			</el-menu>
		)
	},
	computed: {
		menuData() {
			let newData = [];
			const data = this.data;
			let curIndex = 0;
			//data加undefined判断 add by lujing@2021
			if (data !== undefined && data.length != 0) {
				data.forEach((item, index) => {
					this.parentIdArray = [];
					this.findParentIds(data, item.id, this.treeRootPid);
					const idIndex = this.parentIdArray.length == 0 ? item.id + '' : this.parentIdArray.reverse().join('-') + '-' + item.id
					data[index]['idIndex'] = idIndex;
				});
				newData = this.array2TreeNode(data, this.treeRootPid, this.treeRootPid);
			}
			return newData;
		},
		activeIndex(){
			return this.$route.path||"/home"
		}
	},
	
	methods : {
		handleSelect(key, keyPath) {
			if (key) {
				this.routerPush(key, true)
			}
			const route = this.$children[0].items[key] ?  this.$children[0].items[key].$attrs['data-route'] : null;
			this.$emit('select', key, keyPath, route)
		},
		handleOpen(key, keyPath){
			const route = this.$children[0].items[key] ?  this.$children[0].items[key].$attrs['data-route'] : null;
			this.$emit('open', key, keyPath, route)
		},
		handleClose(key, keyPath){
			const route = this.$children[0].items[key] ?  this.$children[0].items[key].$attrs['data-route'] : null;
			this.$emit('close', key, keyPath, route)
		},
		resolvePath(routePath) {
			return path.resolve(this.basePath, routePath)
		},
		isExternalLink(routePath) {
			return validateURL(routePath)
		},
		renderInner(item) {
			let returnItem = null;
			if (item.hasChild) {	
				returnItem = (
				<el-submenu class='ui-submenu'
					index={ item.idIndex }
					disabled={ item.disabled }
					data-index={ item.idIndex }
					data-route={ item.routePath }
					title={ item.name }
				>
					<template slot="title">
						<i class={ item.icon || 'el-icon-menu' }></i>
						<span>{item.name}</span>
					</template>
					{
						this._l(item.children, (data, $index) => {
							return this.renderInner(data)
						})
					}
				</el-submenu>)
			} else {
				returnItem = (
					<el-menu-item class='ui-menu-item'
						index={ item.routePath }
						disabled={ item.disabled }
						route={ item.routePath }
						data-index={ item.idIndex }
						data-route={ item.routePath }
						title={ item.name }
					>
						<div style="padding-left: 24px;display: flex;align-items: center;" slot="title">
							<div style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{item.name}</div>
						</div>
					</el-menu-item>
				)
			}	
			return returnItem
		},
		array2TreeNode(data, rootPid, pid) {
			let ret = [];
			data.forEach(item =>{
				if (item.parentNodeId == pid) {
					let temp = this.array2TreeNode(data, rootPid, item.id);
					let obj = {
						"name": item.name,
						"id": item.id,
						"parentNodeId": pid,
						"icon": item.icon,
						"link": item.link,
						"resource": item.resource,
						"routePath": item.authorityScript ? item.authorityScript : '/noPath',
						"state": item.state,
						"status": item.status,
						"index": item.index,
						"type": item.type,
						"menuType": item.menuType,
						"parentNodeId": item.parentNodeId,
						"hasChild": !!temp.length,
						"disabled": item.disabled ? item.disabled : false,
						"idIndex": item.idIndex,
						children: temp.length?temp:null
					};
					ret.push(obj);
				}
			})
			return ret;
		},
		findParentIds(data, childId, rootPid) {
			data.forEach(item=> {
				if (item.id == childId && item.parentNodeId != rootPid) {
						this.parentIdArray.push(item.parentNodeId);
						this.findParentIds(data, item.parentNodeId, rootPid);
				}
			})
		}
	}
}