<template>
	<div class="industryMap_container">
		<!-- <div class="industryMap_top">
			<span></span>
			<el-input
				placeholder="节点名称"
				v-model="search_txt"
				style="maxWidth:520px"
				@keyup.enter.native="getTableData"
				clearable>
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div> -->
		<div class="tree_cont" v-if="showData">
			<vue2-org-tree
			:data="treeData"
			:props="defaultProps"
			:horizontal="true"
			:render-content="renderContent"
			@on-node-mouseover="showWholeName"
			@on-node-mouseout="hideWholeName"/>
		</div>
		<m-dialog
			:isShowDia="isShowDia"
			:nodeData="nodeData"
			:title="dia_tit"
			:selectedKey="'医药1'"
			selectedClassName="active_node"
			@cancel="isShowDia=false"
			@over="handleOver"
		/>
		<!-- 文字提示 -->
		<div class="poper" ref="poper" @mouseleave="hideWholeName">一段很长很长很长的文字</div>
	</div>
</template>

<script>
import mDialog from '../components/mapDialog.vue'
import { raiInterface } from '@/api/api.js'
export default {
	name:'',
	components: {mDialog},
	data () {
		return {
			showData:false,//数据
			defaultProps: {
				label: 'IndustryMapName',
				children: 'Children',
			},
			treeData: {},
			isShowDia:false,
			dia_tit:'新增子级',
			nodeData: {}
		};
	},
	methods: {
		/* 获取树节点 */
		getNodeTree() {
			raiInterface.getMap().then(res => {
				if(res.Ret === 200) {
					this.treeData = res.Data.Node || {};
					this.showData = true;
				}
			})
		},
		renderContent(e,data) {
			return (
				<div class="tem_node_item">
					<div class="title" style={data.ParentId===0?{fontWeight:'600'}:{}}>{data.IndustryMapName}</div>
					{data.ParentId!==0
					?<div class="tem_footer">
						<i class="el-icon-plus" onClick={() => this.nodeHandle('add',data)}></i>
						<i class="el-icon-edit" style={{marginLeft:'10px'}} onClick={() => this.nodeHandle('edit',data)} ></i>
						{(!data.Children || !data.Children.length) ? 
						<i class="el-icon-delete" style={{marginLeft:'10px'}} onClick={() => this.nodeHandle('del',data)}></i>
						:''}
					</div>
					:<div class="tem_footer">
						<i class="el-icon-plus" onClick={() => this.nodeHandle('add',data)}></i>
					</div>
					}
				</div>
				)
		},
		/* 节点操作 */ 
		nodeHandle(type,data) {
			this.dia_tit = type
			this.nodeData = {
				id:data.IndustryMapId,
				name:data.IndustryMapName,
				level:data.Level
			}
			this.isShowDia = true;
		},
		/* 节点操作完成 */
		handleOver() {
			this.isShowDia = false;
			this.getNodeTree();
		},

		// 是否超出盒子宽度
		isOverflow(box){
			return box.scrollWidth>box.offsetWidth
		},
		// 显示完整名称
		showWholeName(e,data){
			if(!(e.toElement.className==='title' && this.isOverflow(e.toElement))) return
			// 获取元素在页面里的绝对位置
			let actualLeft = e.toElement.offsetLeft;
			let actualTop = e.toElement.offsetTop;
            let current = e.toElement.offsetParent;
            while (current !== null && current.id!=='displayMain'){
                actualLeft += current.offsetLeft;
				actualTop += current.offsetTop;
                current = current.offsetParent;
            }
			// 调整位置
			const offsetX=e.toElement.scrollWidth/2-55
			this.$refs.poper.innerHTML=data.IndustryMapName
			this.$refs.poper.style.left=actualLeft-offsetX+'px'
			this.$refs.poper.style.top=actualTop+'px'
			this.$refs.poper.style.display='block'
		},
		// 隐藏名称弹出框
		hideWholeName(e){
			if(e.toElement.className ==='poper' || (e.fromElement.className!=='org-tree-node-label-inner' && e.fromElement.className!=='poper')) return
			this.$refs.poper.style.display='none'
		},
	},
	created() {},
	mounted() {
		this.getNodeTree()
	},
}
</script>
<style lang='scss'>
.industryMap_container {
	padding: 20px 30px;
	background: #fff;
	min-height: calc(100vh - 160px);
	/* tree css */
	.org-tree-container {
		padding: 0;
	}
	.org-tree-node-label .org-tree-node-label-inner {
		background: #E0EEFD;
		color: #409EFF;
		padding: 8px 10px;
		.tem_node_item .title{
			width: 110px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.horizontal .org-tree-node-children {
		padding-left: 30px;
	}
	.horizontal .org-tree-node-children:before {
		width: 30px;
	}
	.horizontal .org-tree-node:only-child:before {
		top: 0;
	}
	/* .horizontal .org-tree-node-children:before {
		border-color: #323A58;
	}
	.horizontal .org-tree-node:not(:first-child):before, .horizontal .org-tree-node:not(:last-child):after,.horizontal .org-tree-node:not(:only-child):after {
		border-color: #323A58;
	} */
	.horizontal .org-tree-node.is-leaf, .horizontal .org-tree-node.collapsed {
		padding-top: 8px;
    	padding-bottom: 8px;
	}
	.tree_cont {
		min-width: 900px;
		margin-top: 50px;
		.tem_node_item {
			display:flex;
			align-items: center;
			.title {
				font-size: 14px;
			}
			.tem_footer {
				cursor:pointer;
				margin-left:10px;
				i {
					font-size: 14px;
				}
			}
		}
	}
	.industryMap_top {
		display: flex;
		justify-content:space-between;
		margin-bottom: 60px;
	}
	.poper{
		position: absolute;
		display: none;
		color: #fff;
		background-color: rgba(0,0,0,.7);
		padding: 10px;
		border-radius: 5px;
	}
}
</style>