<template>
	<el-dialog
	v-dialogDrag 
	:visible.sync="isShowDia"
	:close-on-click-modal="false"
	:modal-append-to-body='false'
	:show-close="false"
	@close="cancelHandle"
	custom-class="map_dialog"
	center
	width="450px">
		<div slot="title" style="position:relative">
			<span style="fontSize:16px;">{{title=='add'?'新增子级':'edit'?'编辑':'删除'}}</span>
			<i class="el-icon-close" style="fontSize:24px;cursor:pointer;position:absolute;right:20px;top:50%;transform:translateY(-50%);" @click="cancelHandle"></i>
		</div>
		<div class="dialog_cont">
			<!-- 新增子级 -->
			<template v-if="title=='add'">
				<div class="node_name">父级名称:&nbsp;{{nodeData.name}}</div>
				<el-input
				v-model="add_name"
				placeholder="请输入子级名称"
				class="node_ipt"
				@keyup.enter.native="saveHandle">
				</el-input>
			</template>
			<!-- 编辑 -->
			<el-input
			v-model="nodeData.name"
			placeholder="请输入名称"
			class="node_ipt"
			v-else-if="title=='edit'"
			@keyup.enter.native="saveHandle">
			</el-input>
			<!-- 删除 -->
			<div class="node_name" v-else-if="title=='del'">确定要删除此节点吗？</div>
		</div>
		<div style="display:flex;justify-content:center;margin:40px 0;">
			<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveHandle">确定</el-button>
			<el-button  type="primary" plain style="width:80px;" @click="cancelHandle">取消</el-button>
		</div>
	</el-dialog>
</template>

<script>
import { raiInterface } from '@/api/api.js'
export default {
	name:'',
	components: {},
	props: {
		isShowDia: {
			type:Boolean,
			default:false
		},
		title: {
			type:String
		},
		nodeData: {
			type:Object
		}
	},
	data () {
		return {
			add_name:''
		};
	},
	methods: {
		/* 保存 */
		saveHandle() {
			switch (this.title) {
				case 'add': 
					this.addNode()
					break;
				case 'edit': 
					this.editNode()
					break;
				case 'del': 
					this.delNode()
					break;
			}
		},
		/* 新增节点 */
		addNode() {
			if(this.add_name) {
				raiInterface.addNode({
					IndustryMapId:this.nodeData.id,
					IndustryMapName:this.add_name,
					Level:this.nodeData.level
				}).then((res) =>{
					if(res.Ret === 200) {
						this.$emit('over')
						this.$message.success(res.Msg)
					}
				})
			}else {
				this.$message.warning('子级名称不能为空')
			}
		},
		/* 修改 */
		editNode() {
			raiInterface.editNode({
				IndustryMapId:this.nodeData.id,
				IndustryMapName:this.nodeData.name
			}).then((res) =>{
				if(res.Ret === 200) {
					this.$emit('over')
					this.$message.success(res.Msg)
				}
			})
		},
		/* 删除节点 */
		delNode() {
			raiInterface.delNode({
				IndustryMapId:this.nodeData.id
			}).then((res) =>{
				if(res.Ret === 200) {
					this.$message.success('已删除')
					this.$emit('over')
				}
			})
		},
		/* 取消 */
		cancelHandle() {
			this.add_name = '';
			this.$emit('cancel');
		}
	},
	created() {},
	mounted() {
	},
}
</script>
<style lang='scss' scoped>
.dialog_cont {
	padding: 0 10px;
	.node_name {
		font-size: 15px;
		margin-bottom: 20px;
	}
	.node_ipt{
		display:block;
		width: 100%;
		margin: 20px 0;
	}
}
</style>