<template>
  <el-container>
    <el-aside width="300px" v-loading="menuloading">
      <el-container>
        <el-header>
          <el-input
            :placeholder="$t('pleaseInput')"
            v-model="menuFilterText"
            clearable
          ></el-input>
        </el-header>
        <el-main class="nopadding">
          <el-tree
            ref="menu"
            class="menu"
            node-key="MenuId"
            :data="menuList"
            :props="menuProps"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            check-strictly
            :draggable="false"
            :filter-node-method="menuFilterNode"
            @node-click="menuClick"
            @node-drop="nodeDrop"
          >
            <template #default="{ node }">
              <span class="custom-tree-node el-tree-node__label">
                <span class="label">
                  {{ node.label }}
                </span>
                <span class="do">
                  <el-icon @click.stop="add(node, true)"
                    ><el-icon-plus
                  /></el-icon>
                </span>
              </span>
            </template>
          </el-tree>
        </el-main>
        <el-footer style="height: 51px">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="add()"
          ></el-button>
        </el-footer>
      </el-container>
    </el-aside>
    <el-container>
      <el-main class="nopadding" style="padding: 20px" ref="main">
        <save ref="save" :menu="menuList" @success="getMenu"></save>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
let newMenuIndex = 1;
import save from "./saveAuthority";
import common from "@/utils/common";

export default {
  name: "settingMenu",
  components: {
    save,
  },
  data() {
    return {
      menuloading: false,
      menuList: [],
      menuProps: {
        label: function (a) {
          return `${a.Label}${a.UniqueCode ? `(${a.UniqueCode})` : ""}`;
        },
        id: "Id",
        children: "Children",
      },
      menuFilterText: "",
      authorityList: [],
    };
  },
  watch: {
    menuFilterText(val) {
      this.$refs.menu.filter(val);
    },
  },
  mounted() {
    this.getMenu();
  },
  methods: {
    //加载树数据
    async getMenu() {
      this.menuloading = true;
      var menuList = await this.$API.wing.post("GetUserFeatureList");
      this.menuList = menuList;
      this.authorityList = await this.$API.wing.post(
        "GetUserFeatureSelectList"
      );
      this.menuloading = false;
    },
    //树点击
    menuClick(data) {
      if (!data.MenuId) {
        data.MenuId = data.Id;
      }
      this.$refs.save.setData(data, this.authorityList);
      this.$refs.main.$el.scrollTop = 0;
    },
    //树过滤
    menuFilterNode(value, data) {
      if (!value) return true;
      var targetText = `${data.Label}${
        data.UniqueCode ? `(${data.UniqueCode})` : ""
      }`;
      return targetText.indexOf(value) !== -1;
    },
    //增加
    async add(node, checkFather) {
      var featherCode = node?.data?.Id;
      if (checkFather && !featherCode) {
        return;
      }
      var newMenuData = {
        MenuId: common.guid(),
        Label: `未命名${newMenuIndex++}`,
        FatherCode: featherCode,
      };
      this.$refs.menu.append(newMenuData, node);
      this.$refs.menu.setCurrentKey(newMenuData.MenuId);
      this.$refs.save.setData(newMenuData, this.authorityList);
    },
  },
};
</script>

<style scoped>
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 24px;
  height: 100%;
}
.custom-tree-node .label {
  display: flex;
  align-items: center;
  height: 100%;
}
.custom-tree-node .label .el-tag {
  margin-left: 5px;
}
.custom-tree-node .do {
  display: none;
}
.custom-tree-node .do i {
  margin-left: 5px;
  color: #999;
}
.custom-tree-node .do i:hover {
  color: #333;
}

.custom-tree-node:hover .do {
  display: inline-block;
}
</style>
