<template>
	<el-container class="aminui-main-container">
		<el-aside v-loading="aside.loading" width="310px">
			<el-container>
				<el-header class="aminui-main-container__query-header">
					<scTitle>菜单列表</scTitle>
					<el-form @submit.prevent>
						<el-form-item>
							<el-input v-model="aside.filterText" clearable placeholder="输入关键字进行过滤"></el-input>
						</el-form-item>
					</el-form>
				</el-header>
				<el-main class="nopadding">
					<el-scrollbar>
						<el-tree ref="aside" node-key="id" :data="aside.list" :props="aside.props" lazy :load="loadNode" highlight-current :default-expanded-keys="aside.expandedKeys" :expand-on-click-node="false" check-strictly :filter-node-method="asideFilterNode" @node-click="data => asideNodeClick(data)">
							<template #default="{ node, data }">
								<span :id="data.id" class="custom-tree-node">
									<scTooltip :content="node.label"></scTooltip>
									<el-button-group class="do">
										<el-button v-if="data.type == 999 || data.type == 0" size="small" icon="el-icon-plus" @click.stop="aside_add(data)"></el-button>
										<el-button v-if="data.type != 999" size="small" icon="el-icon-delete" @click.stop="aside_del(data)"></el-button>
									</el-button-group>
								</span>
							</template>
						</el-tree>
					</el-scrollbar>
				</el-main>
			</el-container>
		</el-aside>

        <el-container class="is-vertical">
			<save ref="save" @success="getAsideNode"></save>
		</el-container>
	</el-container>
</template>

<script>
	import save from "./save";

	export default {
		components: {
			save
		},

		data() {
			return {
				aside: {
					loading: false,
					list: [],
					props: {
						class: data => data.type == 999 && "is-default",
						label: "title",
						disabled: data => data.type == 999,
						isLeaf: data => !data.hasChildren
					},
					filterText: null,
					expandedKeys: [],
					currentKey: null
				}
			}
		},

		watch: {
			"aside.filterText"(val) {
				this.$refs.aside.filter(val);
			}
		},

		mounted() {
			this.getAsideNode();
		},

		methods: {
			async getAsideNode(data) {
				try {
					this.aside.loading = true;
					const { content } = await this.$API.system.menu.get();
					this.aside.loading = false;
					this.aside.list = content.slice();
					
					if (data) {
						if (data.pid == -1) this.aside.expandedKeys = [data.pid, data.id];
						else this.aside.expandedKeys = [-1, data.pid, data.id];
						this.asideNodeClick(data, true);
						this.aside.currentKey = data.id;
					} else this.aside.currentKey = null;
				} catch (error) {
					this.aside.loading = false;
					this.aside.list = [];
				}
			},

			async loadNode({ level, data }, resolve) {
				if (level > 0) {
					try {
						const res = await this.$API.system.menu.get({ pid: data.id });
						resolve(res.content);
						this.aside.currentKey && this.$refs.aside.setCurrentKey(this.aside.currentKey);
					} catch (error) {
						resolve([]);
					}
				}
			},

			asideFilterNode(value, data) {
				if (!value) return true;
				return data.title.indexOf(value) !== -1;
			},

			asideNodeClick(data, scroll = false) {
				if (data.type == 999) this.$refs.save.open(null);
				else {
					this.$refs.save.open("edit").setData(data, this.$refs.aside.getCurrentNode().title);
					this.$nextTick(() => {
						this.$refs.aside.setCurrentKey(data.id);
						scroll && document.getElementById(data.id) && document.getElementById(data.id).scrollIntoView({ block: "center" });
						this.$refs.save.$refs.formScrollbar.scrollTo(0);
					});
				}
			},

			// 添加菜单
			aside_add({ id, title }) {
				this.$refs.aside.setCurrentKey(id);
				this.$refs.save.open().setData({ pid: id }, title);
			},

			// 删除菜单
			aside_del({ id }) {
				this.$confirm("确认删除当前菜单吗？", "提示", {
					type: "warning",
					confirmButtonText: "删除"
				}).then(() => {
					this.$API.system.menu.del([id]).then(() => {
						this.$message.success("操作成功");
						this.getAsideNode();
						this.$refs.save.open("").setData({});
					}).catch(() => {});
				}).catch(() => {});
			}
		}
	}
</script>

<style lang="scss" scoped>
.aminui-main-container {
  .el-aside {
    margin-right: 15px;

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

      .sc-title {
        margin-bottom: 15px;
        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;

            .do {
              display: none;

              i {
                margin-left: 5px;
                color: #999;

                &:hover {
                  color: #333;
                }
              }
            }
          }

          &:hover .custom-tree-node {
            justify-content: space-between;
            padding-right: 6px;

            .do {
              display: flex;
            }
          }
        }

        :deep(.el-tree-node.is-default .el-checkbox.is-disabled) {
          display: none;
        }

        .el-tree-node.is-default
          .el-tree-node
          .el-tree-node__content:hover
          .custom-tree-node {
          padding-right: 24px;
        }
      }
    }
  }

  .aminui-main-container__menu {
    border-radius: var(--el-border-radius-base);
  }
}

@media (max-width: 992px) {
  .aminui-main-container .el-aside {
    margin-right: 0;

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