<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 domesticSubject from '@/api/basicInfo/domesticSubject.js'
	export default {
		name: 'internationDialog',
		data() {
			return {
				visible: false,
				title: '移动',
				treeData: [  {
                    id: '0',
                    name: this.$t('domestic.tree'),
                    children: [],
                },],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				params: {}
			}
		},
		created() {

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

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

				})
			}
		}
	}
</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>
