<!--
* @name: 菜单管理
* @date: 2022-09-09
-->
<template>
  <div style="display: flex; height: 100%">
    <base-layout
      :showTitle="true"
      :title="'菜单管理'"
      style="width: 260px"
      :queryShow="false"
      :searchShow="false"
      :mainHight="`calc(100% - 58px)`"

    >
      <div
        slot="main"
        style="
          width: 100%;
          border-right: 1px solid #dfe6ec;
          height: 100%;
          overflow-y: auto;
        "
      >
        <base-tree
          ref="baseTree"
          :isCenter="false"
          :isSaveBtn="false"
          :Allshow="false"
          :expandAll="true"
          :showCheckbox="false"
          :menuData="menuData"
          @handleNodeClick="formClick"
          :treeProps="treeProps"
          :treeBodyHeight="'100%'"
        >
        </base-tree>
      </div>
    </base-layout>
    <base-layout
      title="菜单树编辑区"
      :buttonList="buttonList"
      @onFuncBtn="getFuncBtn"
      style="flex: 1; width: calc(100% - 260px)"
      :queryShow="false"
      :searchShow="false"
      :mainHight="`calc(100% - 58px)`"
    >
      <div slot="main" style="padding: 20px 12px; height: 300px">
        <base-form
          ref="customForm"
          :formRow="formRow"
          :isFunBtn="isFunBtn"
          :rules="rules"
          @selectTree="selectTree"
          @onSubmit="getSubmit"
        >
        </base-form>
      </div>
    </base-layout>
  </div>
</template>

<script>
import router from "@/router";
import baseLayout from "@/components/base/baseLayout";
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import baseTreeclick from "@/components/base/baseTreeClick/index.vue";
import baseDialog from "@/components/base/BaseNewDialog";
import baseOrganization from "@/components/base/baseOrganization";
import configData from "./configData";
import { GetOrganTree } from "@/api/apis/organization";
import {
  GetMenuTree,
  GetBillData,
  MenuSaveData,
  MenuDelData,
} from "@/api/apis/menuManage";
import { authApi } from "@/api/apis/auth";
export default {
  components: {
    baseLayout,
    baseTree,
    baseForm,
    baseTreeclick,
    baseDialog,
    baseOrganization,
  },
  data() {
    return {
      buttonList: [
        {
          menuName: "新增根节点",
          icon: "el-icon-plus",
        },
        {
          menuName: "新增子节点",
          icon: "el-icon-plus",
        },
        {
          menuName: "删除节点",
          icon: "el-icon-delete",
          type: "danger",
        },
      ],
      delId: null,
      menuData: [],
      menuForm: {},
      rules: configData.rules,
      formRow: configData.formRow,
      isFunBtn: true,
      treeProps: {
        children: "children",
        label: "label",
      },
      menuForm: {},
    };
  },
  mounted() {
    // this.$refs.baseTree.getMenuList()
    this.initPage();
  },
  methods: {
    //页面初始化
    initPage() {
      this.getMenuData();
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    resetForm() {
      this.$refs.customForm.getField("lvl", 0);
      this.$refs.customForm.getField("sorts", 0);
      this.$refs.customForm.getField("hidden", "false");
      this.$refs.customForm.getField("upIds", null);
    },
    // 获得树状图
    async getMenuData() {
      let res = await authApi("moduleService", "module", "queryTree");
      this.menuData = res.attribute;
      this.formRow[0].elCol[0].options = res.attribute;
    },
    // 操作按钮事件
    getFuncBtn(btnEven) {
      if (btnEven.menuName == "新增根节点") {
        this.$nextTick(() => {
          this.$refs.customForm.resetFields();
          this.resetForm();
          this.delId = null;
          this.$refs.baseTree.setCurrentKey(null);
        });
      }
      if (btnEven.menuName == "新增子节点") {
        if (!this.delId) {
          this.$tipConfirm("请选择左侧要操作的菜单节点");
          return;
        }
        if (this.menuForm.lvl == "2") {
          this.$tipConfirm("最多允许添加三级菜单");
        } else {
          this.$nextTick(() => {
            this.$refs.customForm.resetFields();
            this.resetForm();
            this.$refs.customForm.getField("upIds", this.delId);
            this.$refs.customForm.getField(
              "lvl",
              JSON.parse(this.menuForm.lvl) + 1
            );
            this.delId = null;
          });
        }
      }
      if (btnEven.menuName == "删除节点") {
        if (!this.delId) {
          this.$tipConfirm("请选择左侧要操作的菜单节点");
          return;
        }
        this.$delConfirm().then(() => {
          this.menuDel();
        });
      }
    },
    async menuDel() {
      let params = {
        id: this.delId,
      };
      let res = await authApi(
        "moduleService",
        "module",
        "delectModuleTree",
        "",
        params
      );
      if (res.status == "200") {
        this.$vmNews("删除成功", "success");
        this.menuForm = {};
        this.getMenuData();
        this.$refs.customForm.resetFields();
        this.changeMenu();
      }
    },
    // 获取详情
    async getDetail(id) {
      let params = {
        id: id,
      };
      let res = await authApi(
        "moduleService",
        "module",
        "queryModule",
        "",
        params
      );
      this.$nextTick(() => {
        this.$refs.customForm.choiceAssignment(res.attribute);
        this.menuForm = res.attribute;
      });
    },
    getSubmit(data) {
      async function submitForm(delId) {
        let params = {
          ...data,
          label: data.title,
        };

        let res = await authApi(
          "moduleService",
          "module",
          delId ? "updateModule" : "addModule",
          "",
          params
        );
        return res;
      }
      this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          return;
        } else {
          submitForm(this.delId).then((res) => {
            if (res.status == "200") {
              this.$vmNews("保存成功", "success");
              this.menuForm = {};
              this.getMenuData();
              this.$refs.customForm.resetFields();
              this.changeMenu();
            }
          });
        }
      });
    },
    changeMenu() {

      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
        // 根据roles权限生成可访问的路由表
        for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
          const element = accessRoutes[i];
          router.addRoutes(accessRoutes); // 动态添加可访问路由表
        }
        localStorage.setItem("routeList", JSON.stringify(accessRoutes));
      });
    },
    formClick(data) {
      this.delId = data.id;
      this.getDetail(data.id);
    },
    selectTree(row) {
      if (row.lvl == "2") {
        // this.$refs.customForm.treeSelectClear()
        this.$tipConfirm("最多允许添加三级菜单").then(() => {
          this.$refs.customForm.getField("upIds", this.delId);
        });
      } else {
        this.$refs.customForm.resetFields();
        this.resetForm();
        this.$refs.customForm.getField("lvl", JSON.parse(row.lvl) + 1);
        this.menuForm = {};
      }
    },
  },
};
</script>

<style scoped>
.organizationBody {
  display: flex;
  justify-content: space-evenly;
  background-color: #f2f3f4;
  padding: 10px;
  max-height: 400px;
  overflow: auto;
}

.container {
  height: auto;
}

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/deep/ input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>
