<template>
	<div class="classify-dialog">
		<!-- :modal-append-to-body='false' -->
		<el-dialog
		:visible.sync="isOpenDialog"
		:title="title"
		:close-on-click-modal="false"
		:append-to-body="true"
		@close="cancelHandle"
		custom-class="classify-dialog"
		center
		width="650px"
		v-dialogDrag>
			<div class="add-cont">
				<el-button type="text" @click="() => {cancelHandle();$parent.editClassify()}">添加分类</el-button>
			</div>
			<el-tree
				:data="classifyArr"
				node-key="ClassifyId"
				:props="{
					children: 'Child',
					label: 'ClassifyName'
				}"
				default-expand-all
				:expand-on-click-node="false"
			>
				<div class="custom-tree-node" slot-scope="{ data }">
					<span>{{ data.ClassifyName }}</span>
					<div>
						<span class="editsty" style="margin-right: 10px;" @click.stop="editNode(data)">编辑</span>
						<span class="deletesty" @click.stop="delNode(data)">删除</span>
					</div>
				</div>
			</el-tree>
			<div class="dia-bot">
				<el-button type="primary" style="margin-right:20px" @click="cancelHandle">确定</el-button>
				<el-button type="primary" plain @click="cancelHandle">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { dataAuthInterface } from '@/api/api.js';
export default {
	props: {
		isOpenDialog: {
			type: Boolean,
		},
		title: {
			type: String,
			default: '手工指标分类'
		},
	},
	watch: {
		isOpenDialog(nval) {
			if(!nval) return 
			this.getClassify()
		}
	},
	data () {
		return {
			classifyArr:[],
		};
	},
	methods: {

		/* 获得所有分类 */
		async getClassify() {
			const {Ret,Data} = await dataAuthInterface.classifyAll();

			if(Ret !== 200) return
			this.classifyArr = Data || [];
		},

		/* 编辑 */
		editNode(data) {
			this.$parent.editClassify({
				parentId: data.ParentId,
				classifyName: data.ClassifyName,
				classifyId: data.ClassifyId
			})
			this.cancelHandle();
		},

		/* 删除 */
		async delNode(data) {
			let message = !data.Child ? '删除后不可恢复，是否确认删除?' : '该分类下包含子分类不可删除'

			await this.$confirm(message,'提示',{
				type: 'warning'
			})

			if(data.Child) return

			const {Ret} = await dataAuthInterface.classifyDel({ ClassifyId:data.ClassifyId })

			if(Ret !== 200) return
			this.$message.success('删除成功');
			this.cancelHandle();
			this.$emit('success');
		},

		/* 取消 */
		cancelHandle() {
			this.$emit('update:isOpenDialog',false)
		},
	},
}
</script>
<style lang='scss' scoped>
.classify-dialog {
	.dialog-main {
		padding-left: 50px;
	}
	.el-tree {
		max-height: 350px;
		overflow-y: auto;
		.custom-tree-node {
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.el-tree-node {
			margin-bottom: 15px;
		}
		.el-tree-node__children {
			margin: 5px 0;
		}
	}
	.dia-bot {
		margin: 52px 0 30px;
		display: flex;
		justify-content: center;

	}
}
</style>