<template>
	<div class="app-list-content">
		<div class="auth-tree">
			<el-button class="add-btn" type="primary" size="small">添加权限</el-button>
			<el-tree
				:data="data"
				:props="defaultProps"
				node-key="id"
				default-expand-all
				:expand-on-click-node="false"
				:render-content="renderContent"
			></el-tree>
		</div>
		<!-- addOrModify -->
		<el-dialog
			:title="`${'添加'}权限`"
			:visible.sync="treeDialog"
			:close-on-click-modal="false"
			width="400px"
		>
			<div class="recharge-modal-content">
				<el-form
					:model="form"
					:rules="rules"
					ref="rechargeForm"
					label-width="80px"
					class="demo-form"
				>
					<el-form-item label="充值金额">
						<el-input
							v-model="form.rechargeAmount"
							placeholder="充值金额"
							size="small"
						></el-input>
					</el-form-item>
					<el-form-item label="确认密码">
						<el-input
							v-model="form.confirmPassword"
							type="password"
							placeholder="确认密码"
							size="small"
						></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="confirmFn">充值</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
let id = 1000;
export default {
	name: 'auth-tree',
	data() {
		return {
			data: [],
			defaultProps: {
				children: 'children',
				label: 'authName'
			},
			form: {
				endId: '1',
				parentId: '',
				authName: '',
				frontUrl: '',
				backUrl: ''
			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// api
		init() {
			this._list();
		},
		_list() {
			this.$service.sassAuth.authList({ endId: 1 }).then(res => {
				this.data = res;
			});
		},
		// operate
		append(data) {
			const newChild = { id: id++, label: 'testtest', children: [] };
			if (!data.children) {
				this.$set(data, 'children', []);
			}
			data.children.push(newChild);
		},

		remove(node, data) {
			const parent = node.parent;
			const children = parent.data.children || parent.data;
			const index = children.findIndex(d => d.id === data.id);
			children.splice(index, 1);
		},

		renderContent(h, { node, data, store }) {
			return (
				<span class="custom-tree-node">
					<span class="tree-label">{node.label}</span>
					<span class="tree-btn-wrap">
						<el-button size="small" type="text" on-click={() => this.append(data)}>
							修改
						</el-button>
						<el-button
							size="small"
							type="text"
							on-click={() => this.remove(node, data)}>
							删除
						</el-button>
					</span>
				</span>
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.auth-tree {
	height: calc(100% - 10px);
	padding-top: 10px;
	background-color: #fff;
	.add-btn {
		margin-left: 20px;
		margin-bottom: 20px;
	}
	/deep/.custom-tree-node {
		margin-bottom: 4px;
		.tree-btn-wrap {
			margin-left: 100px;
		}
	}
}
</style>
