<template>
	<el-container class="aminui-main-container">
		<el-container class="is-vertical">
			<el-header class="aminui-main-container__query-header">
				<el-form :model="params" @submit.prevent>
					<el-row :gutter="15">
						<el-col :lg="10" :md="14" :xs="24">
							<el-form-item label="角色名称:">
								<el-input v-model="table.params.blurry" clearable placeholder="输入角色名称搜索"></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="10" :xs="24">
							<el-form-item>
								<el-button-group>
									<el-button type="primary" icon="el-icon-search" @click="reloadTable('add')">查询</el-button>
									<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
								</el-button-group>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-header>

			<el-container class="aminui-main-container__table-main">
				<el-header>
					<div class="left-panel">
						<el-button type="primary" @click="table_add">新增角色</el-button>
					</div>
				</el-header>
				<el-main class="nopadding">
					<scTable class="scTable" ref="table" row-key="id" :apiObj="table.api" :params="table.params" :column="table.column" tableName="roleTable" highlightCurrentRow @current-change="currentChange">
						<template #createTime="scope"><span v-time="scope.row.createTime"></span></template>
						<el-table-column label="操作" fixed="right" align="center" width="120">
							<template #default="scope">
								<el-button text @click="table_edit(scope.row)">编辑</el-button>
								<el-divider direction="vertical" />
								<el-button text @click="table_del(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</scTable>
				</el-main>
			</el-container>
		</el-container>

		<el-aside v-loading="aside.loading" width="310px">
			<el-container>
				<el-header class="aminui-main-container__query-header">
					<scTitle border>菜单权限</scTitle>
				</el-header>
				<el-main class="nopadding">
					<el-scrollbar>
						<el-tree ref="aside" node-key="id" :props="aside.props" lazy :load="loadNode" highlight-current show-checkbox check-strictly :default-checked-keys="currentMenus" @check="menuChange">
							<template #default="{ node, data }">
								<span :id="data.id" class="custom-tree-node">
									<scTooltip :content="node.label"></scTooltip>
								</span>
							</template>
						</el-tree>
					</el-scrollbar>
				</el-main>
				<el-footer>
					<el-button :loading="isSaveing" type="primary" @click="submit">保存</el-button>
				</el-footer>
			</el-container>
		</el-aside>
	</el-container>

    <role-dialog v-if="dialog" ref="roleDialog" @success="reloadTable" @closed="dialog = false"></role-dialog>
</template>

<script>
	import roleDialog from "./dialog";

	export default {
		components: {
			roleDialog
		},

		data() {
			return {
				aside: {
					loading: false,
					props: {
						label: "title",
						isLeaf: data => !data.hasChildren
					}
				},

				table: {
					api: this.$API.system.role,
					params: {
						sort: "level,asc",
						blurry: null
					},
					column: [
						{ label: "角色名称", prop: "name", width: "200", align: "center" },
						{ label: "角色级别", prop: "level", width: "100", align: "center" },
						{ label: "创建日期", prop: "createTime", width: "200", align: "center", sortable: true },
						{ label: "描述", prop: "description", width: "200", align: "center", showOverflowTooltip: true }
					]
				},

				isSaveing: false,
				dialog: false,
				roleId: null,
				currentMenus: []
			}
		},

		methods: {
			async loadNode({ level, data }, resolve) {
				const pid = level === 0 && -1 || data.id
				try {
					this.aside.loading = true;
					const res = await this.$API.system.menu.get({ pid });
					this.aside.loading = false;
					resolve(res.content);
				} catch (error) {
					this.aside.loading = false;
					resolve([]);
				}
			},

			currentChange(row) {
				this.$refs.aside.setCheckedKeys([]);
				this.roleId = row && row.id || null;
				this.currentMenus = row && row.menus.map(menu => menu.id) || [];
			},

			menuChange({ id }) {
				const index = this.currentMenus.indexOf(id);
				if (index !== -1) this.currentMenus.splice(index, 1);
				else this.currentMenus.push(id);
			},

			// 本地更新数据
			reloadTable(mode = "add") {
				const page = mode == "edit" ? this.$refs.table.currentPage : 1;
				this.$refs.table.reload(this.table.params, page);
			},

			// 本地更新数据
			reset() {
				this.table.params.blurry = null;
				this.reloadTable();
			},
			
			// 添加角色
			table_add() {
				this.dialog = true;
				this.$nextTick(() => this.$refs.roleDialog.open());
			},

			// 编辑角色
			table_edit(row) {
				this.dialog = true;
				this.$nextTick(() => this.$refs.roleDialog.open("edit").setData(row));
			},

			// 删除角色
			table_del({ id }) {
				this.$confirm("确认删除当前角色吗？", "提示", {
					type: "warning",
					confirmButtonText: "删除"
				}).then(() => {
					this.$API.system.role.del([id]).then(() => {
						this.$message.success("操作成功");
						this.reloadTable();
					}).catch(() => {});
				}).catch(() => {});
			},

			// 保存权限
			async submit() {
				if (!this.roleId) return this.$message.warning("请选择需要配置的角色");

				this.isSaveing = true;
				this.$API.system.role.menu({
					id: this.roleId,
					menus: this.currentMenus.map(id => ({ id }))
				}).then(() => {
					this.isSaveing = false;
					this.$message.success("操作成功");
					this.reloadTable("edit");
				}).catch(() => this.isSaveing = false);
			}
		}
	}
</script>

<style lang="scss" scoped>
.aminui-main-container {
  .aminui-main-container__table-main {
    height: 100%;
  }

  .el-aside {
    margin-left: 15px;

    .aminui-main-container__query-header {
      margin-bottom: 0;

      .sc-title {
        flex-basis: 100%;
        padding-left: 0;

        &::before {
          display: none;
        }
      }
    }

    .el-main {
      padding-left: 10px;
      padding-bottom: 20px;

      .el-tree .el-tree-node .el-tree-node__content .custom-tree-node {
        width: calc(100% - 44px);
        margin-left: 6px;
      }

      .el-tree.el-tree--highlight-current
        :deep(.el-tree-node.is-current)
        > .el-tree-node__content::after {
        right: unset;
        left: 0;
      }
    }

    .el-footer {
      display: flex;
      justify-content: right;
    }
  }
}

@media (max-width: 992px) {
  .aminui-main-container {
    .el-aside {
      margin-top: 15px !important;
      margin-left: 0;

      .el-main {
        padding-left: 15px;
        padding-right: 15px;
      }
    }
  }
}
</style>