<template>
	<div>
		<el-dialog :title="title" :visible="visible" :before-close="handleClose" :close-on-click-modal="false"
			width="30%">
			<div class="dialog-content">
				<div class="tips">
					<i class="el-icon-info"></i>
					提示：鼠标选中节点进行拖到调节,调节后不可更改,请谨慎操作。
				</div>
				<el-tree :data="treeData" :props="defaultProps" border default-expand-all node-key="id" draggable  :allow-drag="allowDrag"
					@node-drop="handleDrop">
				</el-tree>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">{{$t('international.cancel')}}</el-button>
				<!-- <el-button type="primary" @click="handleSave">{{$t('international.save')}}</el-button> -->
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import internationalSubject from '@/api/basicInfo/internationalSubject.js'
	export default {
		name: 'internationDialog',
		data() {
			return {
				visible: false,
				title: '移动',
				treeData: [ {
                    id: '0',
                    name: this.$t('international.tree'),
                    children: [],
                },],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				params: {}
			}
		},
		created() {

		},
		mounted() {},
		methods: {
			add(val) {
				this.visible = true
				this.getTree()
			},

			// 关闭新增人员窗口
			handleClose() {
				this.visible = false
			},
			// 树数据
			getTree() {
				internationalSubject.treeData({}, res => {
					if (res.state) {
						this.treeData[0].children = res.value
					}
				})
			},
			//拖拽结束
			handleDrop(draggingNode, dropNode, dropType, ev) {
				console.log('当前移动'+draggingNode.data.name);
				console.log('被移到到'+dropNode.data.name,dropNode.data);
				console.log(dropType);
				if(dropNode.data.id==='0'){
					this.params = {
						id: '0',
						sourceId: draggingNode.data.id
					}
				}else{
					this.params = {
						id: dropNode.data.parentId,
						sourceId: draggingNode.data.id
					}
				}
			
				internationalSubject.moveTree(this.params, res => {
					// if (res.state) {
					// 	this.$notify({
					// 		type: 'success',
					// 		message: this.$t('international.success'),
					// 		duration: 2000
					// 	})
					// 	this.$emit('getData');
					// }
				})
				console.log(this.params);
				return
				if (dropType == 'before') {
					this.params = {
						id: dropNode.data.parentId,
						sourceId: draggingNode.data.id
					}
				}else{
					this.params = {
						id: dropNode.data.id,
						sourceId: draggingNode.data.id
					}
				}
				this.handleSave()
			},
			 allowDrag(draggingNode) {
			      console.log(draggingNode)
			      return draggingNode.data.code;//唯一键，最外层父节点无labelTypeId属性，则不可拓展
			    },
			// 保存
			handleSave() {
				internationalSubject.moveTree(this.params, res => {
					if (res.state) {
						this.$notify({
							type: 'success',
							message: this.$t('international.success'),
							duration: 2000
						})
						this.$emit('getData');
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialog-content {
		height: 500px;
		overflow-y: auto;
	}

	.tips {
		line-height: 40px;
		color: #ff2020;
	}

	/deep/.el-dialog__body {
		padding-top: 10px;
	}

	/deep/ .el-tree {
		border: 1px solid #eeeded !important;
	}
</style>
