<template>
	<div class="el-tree">
		<transition-group  name="drag" tag="div">
			<div v-for="(item,index) in data" :key="item.id" class="el-tree-node" draggable @dragend.stop="dragend($event,item,index)" @dragstart.stop="dragstart($event,item,index)"  @dragenter.stop="dragenter($event,item,index)"  @dragover.stop="dragover($event,item,index)"  @drop.stop="drop($event,item,index)">
				<div class="el-tree-node__content" 
				:class="{'border_bottom': (border_bottom==item.id&&directionIndex==1),'border_top': (border_bottom==item.id&&directionIndex==2)}"
				:style="{paddingLeft:(18*sum)+'px'}" 
				@click.stop="ruleActive(item)"
				>
					<span 
						@click.stop="ruleActive(item,true)" 
						class="el-tree-node__expand-icon el-icon-caret-right" 
						:style="{transform:item.isShowChild? 'rotate(90deg)':'rotate(0)'}"
						v-if="item.child&&item.child.length>0">
					</span>
					<span class="el-tree-node__expand-icon el-icon-caret-right"	style="color: transparent!important;" v-else></span>
					
					<span class="el-tree-node__label" :class="selectId==item.id? 'blue':''">{{item.name}}</span>
				</div>
				
				<div v-show="!isTd" class="el-tree-node__children" :style="{maxHeight:item.isShowChild? '2000px':'0px'}">
					<Rule :data="item.child" :paddingl="true" :sum="summ" :selectId="selectId" @ruleActive="ruleActive" @ruleDrag="ruleDrag"></Rule>
				</div>
			</div>
		</transition-group>	
	</div>
</template>

<script>
	import { _debounce } from '@/api/auth';
	export default {
		name: 'Rule',
		props: {
			data: {
				type: Array,
				default: () => {
					return [];
				},
			},
			paddingl:{
				type: Boolean,
				default:true
			},
			selectId:{
				type: Number,
				default:0
			},
			sum:{
				type: Number,
				default:1
			}
		},
		data() {
			return {
				isShowChild:false,
				dragIndex:0,
				isTd:false,//是否移动位置
				summ:0,
				border_bottom:0,
				directionIndex:0,
			};
		},
		methods: {
			
			// 拖拽前记录下标
			dragstart(e,item,index) {
			  e.stopPropagation()
			  this.dragIndex = index;
			  this.isTd=true;
			  setTimeout(() => {
			  	e.target.classList.add('moveing')
			  }, 0)
			},
			
			//进入目标元素触发，相当于mouseover
			dragenter(e,item,index) {
			  let moving = this.data[this.dragIndex]; //获取之前记录的元素
			  if(item.pid==moving.pid&&this.isTd&&this.dragIndex != index){
				if(index>this.dragIndex){
				   this.directionIndex=1;
				}else{
				   this.directionIndex=2;
				}
				this.border_bottom=item.id
			  }else{
				this.border_bottom=0;
			  }
			},
			
			//进入目标、离开目标之间，连续触发
			dragover(e,item,index) {
			  e.preventDefault();
			  e.dataTransfer.dropEffect = 'move'
			},
			
			// 鼠标松开 防抖触发排序
			drop(e,item,index) {
				this.border_bottom=0;
				if (this.dragIndex != index) {
				  let moving = this.data[this.dragIndex]; //获取之前记录的元素
				  if(item.pid==moving.pid&&this.isTd){
					  this.isTd=false;
					  this.data.splice(this.dragIndex, 1); //删除列表的记录元素
					  this.data.splice(index,0,moving);//插入元素
					  this.dragIndex = index;
					  
					  // oneId前一个ID twoId后一个ID
					  let oneId=this.data[index-1]? this.data[index-1].id:0;
					  let twoId=this.data[index+1]? this.data[index+1].id:0;
					  let data={
						  id:this.data[index].id,
						  prev_id:oneId,
						  sibling_id:twoId,
					  }
					  this.ruleDrag(data);
				  }else{
					  this.$message.error('不能跨分类排序');
				  }
				}
			},
			
			//用户完成拖动后触发
			dragend(e,item,index){
				e.target.classList.remove('moveing')
				this.border_bottom=0;
				this.isTd=false;
			},

			ruleDrag(data){
				this.$emit('ruleDrag',data);
			},
			
			ruleActive(item,is){
				if(item.child&&item.child.length>0){
					item.isShowChild=!item.isShowChild
				}
				if(is){
					return false
				}
				this.$emit('ruleActive',JSON.parse(JSON.stringify(item)));
			},
		},
		created() {
			this.summ=this.sum+1;
		},
	};
</script>

<style scoped="scoped">
	.moveing {
		opacity: 0.5;
	}
	.drag-move {
		transition: transform .3s;
	}	
	.border_top{
		border-top: 1px solid #017FFF !important;
	}
	.border_bottom{
		border-bottom: 1px solid #017FFF !important;
	}	
	.el-tree {
		position: relative;
		cursor: default;
		background: #FFF;
		color: #606266;
	}

	.rule_class_box {
		white-space: nowrap;
		border-bottom: 1px #f8f8f8 solid;
	}

	.el-tree-node__content {
		padding: 10px 0;
		display: flex;
		align-items: center;
		height: 26px;
		cursor: pointer;
		border-bottom: 1px #f8f8f8 solid;
	}

	.el-tree-node__expand-icon {
		padding: 6px;
		cursor: pointer;
		color: #C0C4CC;
		font-size: 12px;
		transform: rotate(0);
		transition: transform .3s;
	}

	.el-tree-node__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.el-tree-node__children{
		transition: max-height .5s;
		max-height: 0px;
		overflow: hidden;
	}
	.paddingl{
		padding-left: 18px !important;
	}
</style>