<template>
	<div class="system-dept-user">
		<div class="organize">
			<div class="label">
				<div>组织架构<span>organize</span></div>

				<i class="el-icon-refresh"></i>
			</div>

			<div class="container">
				<el-tree
					:data="organize"
					show-checkbox
					node-key="id"
					@node-contextmenu="openContextMenu"
					@node-click="nodeClick"
				></el-tree>
			</div>
		</div>

		<div class="user">
			<div class="label">
				<div>成员列表<span>user</span></div>
			</div>

			<div class="container">
				<cl-crud ref="cl-crud" :options="crud"></cl-crud>
			</div>
		</div>

		<cl-form ref="cl-form"></cl-form>
		<cl-context-menu ref="context-menu"> </cl-context-menu>
	</div>
</template>

<script>
export default {
	data() {
		return {
			crud: {
				service: this.$service.test,

				conf: {
					permission: false
				},

				table: {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: '60'
						},
						{
							prop: 'name',
							label: '姓名',
							align: 'center'
						}
					]
				}
			},

			organize: [
				{
					id: 1,
					label: '江湖',
					children: [
						{
							id: 2,
							label: '华山派'
						},
						{
							id: 3,
							label: '逍遥派'
						},
						{
							id: 4,
							label: '武当派'
						},
						{
							id: 5,
							label: '少林派'
						},
						{
							id: 6,
							label: '崆峒派'
						}
					]
				}
			],

			selects: {
				organize: {}
			}
		};
	},

	methods: {
		openContextMenu(e) {
			this.$refs['context-menu'].open(e, {
				list: [
					{
						label: '新增',
						'suffix-icon': 'el-icon-plus',
						callback: (item, done) => {
							this.organizeAdd(e);
							done();
						}
					},
					{
						label: '编辑',
						'suffix-icon': 'el-icon-edit'
					},
					{
						label: '删除',
						'suffix-icon': 'el-icon-delete'
					}
				]
			});
		},

		nodeClick(e) {
			this.$refs['context-menu'].close();

			this.selects.organize = e;
			this.refresh();
		},

		refresh(params) {
			if (this.$refs['cl-crud']) {
				this.$refs['cl-crud'].refresh(params);
			}
		},

		organizeAdd() {
			this.$refs['cl-form'].open({
				props: {
					title: '编辑组织',
					width: '550px',
					'label-width': '100px'
				},
				items: [
					{
						label: '组织名称',
						prop: 'name',
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请填写组织名称'
							}
						},
						rules: {
							required: true,
							message: '组织名称不能为空'
						}
					},
					{
						label: '上级组织',
						prop: 'parentId',
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请选择上级组织'
							}
						},
						rules: {
							required: true,
							message: '上级组织不能为空'
						}
					},
					{
						label: '排序',
						prop: 'orderNum',
						value: 0,
						component: {
							name: 'el-input-number',
							props: {
								'controls-position': 'right',
								min: 0,
								max: 100
							}
						}
					},
					{
						label: '备注',
						prop: 'remark',
						component: {
							name: 'el-input',
							props: {
								type: 'textarea',
								rows: 4
							},
							attrs: {
								placeholder: '...'
							}
						}
					}
				]
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/theme.styl';

.system-dept-user {
	display: flex;

	.organize {
		height: 100%;
		width: 350px;
		margin-right: 10px;
		background-color: #fff;
		overflow-y: auto;

		>>>.el-tree-node__content {
			height: 36px;
		}
	}

	.user {
		width: calc(100% - 360px);
	}

	.organize, .user {
		.label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40px;
			padding: 0 10px;
			background-color: #fff;
			letter-spacing: 1px;

			div {
				display: flex;
				align-items: center;
				font-size: 15px;
				color: $color;

				span {
					font-size: 12px;
					position: relative;
					left: 5px;
					background-color: $color2;
					color: #fff;
					border-radius: 10px;
					padding: 0.5px 5px;
				}
			}

			i {
				font-size: 18px;
				color: $color;
				cursor: pointer;

				&:hover {
					color: $color2;
				}
			}
		}

		.container {
			height: calc(100% - 40px);
		}
	}
}
</style>
