<template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1">
      <el-breadcrumb-item :to="{ path: '/authority' }">权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container class="cont">
      <el-row class="row_height">
        <el-col :span="8" class="col_sty_r">
          <div class="right_station">
            <div class="right_station_head">菜单结构列表</div>
            <div class="line"></div>
            <div class="tree_station">
              <el-tree
                class="filter-tree"
                node-key="menu_id"
                :expand-on-click-node="false"
                @node-click="nodeClick"
                :data="treeData"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="checkNode"
                ref="tree"
              ></el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="16" class="col_sty_l">
          <div class="left_station">
            <div class="btn_club">
              <button v-if="nodeId==''" class="btn btn_act1" @click="appendParent()">
                <i class="el-icon-plus"></i>&nbsp;新建
              </button>
              <button v-else class="btn btn_act1" @click="appendNode()">
                <i class="el-icon-plus"></i>&nbsp;新建
              </button>
              <button v-if="!previousSibling" class="btn btn_dis">
                <i class="el-icon-top"></i>&nbsp;上移
              </button>
              <button v-else class="btn btn_act2" @click="nodePosition(-1)">
                <i class="el-icon-top"></i>&nbsp;上移
              </button>
              <button v-if="!nextSibling" class="btn btn_dis">
                <i class="el-icon-bottom"></i>&nbsp;下移
              </button>
              <button v-else class="btn btn_act2" @click="nodePosition(1)">
                <i class="el-icon-bottom"></i>&nbsp;下移
              </button>
              <button v-if="canSave" class="btn btn_act1" @click="saveNode()">
                <i class="el-icon-check"></i>&nbsp;保存
              </button>
              <button v-else class="btn btn_dis">
                <i class="el-icon-check"></i>&nbsp;保存
              </button>
              <button v-if="canSave" class="btn btn_act4" @click="resetForm()">
                <i class="el-icon-refresh-left"></i>&nbsp;重置
              </button>
              <button v-else class="btn btn_dis">
                <i class="el-icon-refresh-left"></i>&nbsp;重置
              </button>
              <button v-if="nodeId==''" class="btn btn_dis">
                <i class="el-icon-close"></i>&nbsp;删除
              </button>
              <button v-else class="btn btn_act3" @click="deleteNode()">
                <i class="el-icon-close"></i>&nbsp;删除
              </button>
            </div>
            <div class="line"></div>
            <el-form ref="formDetail" class="form_station" :model="formDetail" :rules="rules">
              <el-form-item prop="menu_name">
                <div class="form_item_title">菜单名称：</div>
                <el-input v-model="formDetail.menu_name" @input="changeSave"></el-input>
              </el-form-item>
              <el-form-item prop="visit_url">
                <div class="form_item_title">菜单访问地址：</div>
                <el-input v-model="formDetail.visit_url" @input="changeSave"></el-input>
              </el-form-item>
              <el-form-item prop="team_name">
                <div class="form_item_title">菜单组别：</div>
                <el-input v-model="formDetail.team_name" @input="changeSave"></el-input>
              </el-form-item>
              <el-form-item prop="detail">
                <div class="form_item_title">菜单描述：</div>
                <el-input
                  v-model="formDetail.detail"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 10}"
                  maxlength="500"
                  show-word-limit
                  @input="changeSave"
                ></el-input>
              </el-form-item>
              <el-form-item prop="menu_order">
                <div class="form_item_title">菜单排序：</div>
                <el-input v-model="formDetail.menu_order" disabled></el-input>
              </el-form-item>
              <el-form-item>
                <div class="form_item_title">创建人：</div>
                <el-input v-model="formDetail.create_user" disabled></el-input>
              </el-form-item>
              <el-form-item>
                <div class="form_item_title">创建时间：</div>
                <el-input v-model="formDetail.create_date" disabled></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
export default {
  data() {
    return {
      checkText: "",
      treeData: [],
      defaultProps: {
        children: "Child",
        label: "menu_name",
      },
      formDetail: {
        menu_name: "",
        visit_url: "",
        team_name: "",
        detail: "",
        menu_order: "",
        create_user: "",
        create_date: "",
      },
      formStaged: [],
      formContrast: {
        menu_name: "",
        visit_url: "",
        team_name: "",
        detail: "",
        menu_order: "",
        create_user: "",
        create_date: "",
      },
      rules: {
        menu_name: [
          { required: true, message: "请填写菜单名称", trigger: "blur" },
          { min: 0, max: 16, message: "菜单名称不超过16位", trigger: "blur" },
        ],
        visit_url: [
          { required: true, message: "请填写菜单访问地址", trigger: "blur" },
          {
            min: 0,
            max: 50,
            message: "访问地址长度不超过50个字",
            trigger: "blur",
          },
        ],
        team_name: [
          { min: 0, max: 16, message: "菜单组别不超过16个字", trigger: "blur" },
        ],
      },
      nodeId: "",
      previousSibling: false,
      nextSibling: false,
      newI: 0,
      helper: helper,
      canSave: false,
      create_user: "",
    };
  },
  watch: {
    checkText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.getCreateUser();
    this.getTree();
  },
  methods: {
    checkNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    nodeClick(data, node) {
      this.canSave = false;
      if (this.nodeId.indexOf("new") > -1) {
        let result = this.formStaged.some((item) => {
          if (item.id == this.nodeId) {
            return true;
          }
        });
        if (result) {
          this.formStaged.forEach((item) => {
            if (item.id == this.nodeId) {
              item.data = this.formDetail;
            }
          });
        }
        this.formStaged.push({ id: this.nodeId, data: this.formDetail });
      }
      this.nodeId = data.menu_id;
      if (node.previousSibling != undefined) {
        this.previousSibling = true;
      } else {
        this.previousSibling = false;
      }
      if (node.nextSibling != undefined) {
        this.nextSibling = true;
      } else {
        this.nextSibling = false;
      }
      let cid = String(data.menu_id);
      if (cid.indexOf("new") > -1) {
        this.formStaged.forEach((item) => {
          if (item.id == cid) {
            this.formDetail = item.data;
          }
        });
      } else {
        let query = {
          id: this.nodeId,
        };
        this.$api.authority.getMenu(query).then((response) => {
          if (response.data.success == 1) {
            this.formDetail = response.data.data;
            this.formDetail.create_date = helper.dateStringTransform(
              this.formDetail.create_date
            );
            this.formContrast = Object.assign({}, this.formDetail);
          } else {
            this.$message({
              message: response.data.errMsg,
              type: "error",
            });
          }
        });
      }
    },
    getCreateUser() {
      this.$api.user.getNowUser().then((response) => {
        if (response.data.success == 1) {
          this.create_user = response.data.data.user_name;
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    appendNode() {
      let newChild = {
        menu_id: "new" + this.newI,
        menu_name: "新菜单",
        Child: [],
      };
      this.newI++;
      this.$refs.tree.append(newChild, this.nodeId);
      this.$refs.tree.setCurrentKey(newChild.menu_id);
      let node = this.$refs.tree.getNode(newChild.menu_id);
      this.formDetail.create_user = this.create_user;
      this.formDetail.menu_order = node.parent.childNodes.length;
      this.formDetail.menu_name = newChild.menu_name;
      this.formDetail.team_name = node.parent.data.team_name;
      this.formDetail.create_date = helper.dateFormat(
        "YYYY-mm-dd HH:MM:SS",
        new Date()
      );
      this.formDetail.detail = "";
      this.formDetail.visit_url = "";
      this.$message({
        message: "不要忘了完善信息哦",
        type: "success",
      });
      this.nodeClick(newChild, node);
    },
    appendParent() {
      let newChild = {
        menu_id: "new" + this.newI,
        menu_name: "新菜单",
        Child: [],
      };
      this.$refs.tree.insertAfter(
        newChild,
        this.treeData[this.treeData.length - 1].menu_id
      );
      this.newI++;
      this.$refs.tree.setCurrentKey(newChild.menu_id);
      let node = this.$refs.tree.getNode(newChild.menu_id);
      this.formDetail.create_user = this.create_user;
      this.formDetail.menu_order = this.treeData.length;
      this.formDetail.menu_name = newChild.menu_name;
      this.formDetail.team_name = "apaas";
      this.formDetail.create_date = helper.dateFormat(
        "YYYY-mm-dd HH:MM:SS",
        new Date()
      );
      this.formDetail.detail = "";
      this.formDetail.visit_url = "";
      this.$message({
        message: "不要忘了完善信息哦",
        type: "success",
      });
      this.nodeClick(newChild, node);
    },
    resetForm() {
      if (this.nodeId.indexOf("new") > -1) {
        let node = this.$refs.tree.getNode(this.nodeId);
        this.formDetail.menu_name = "";
        this.formDetail.visit_url = "";
        this.formDetail.team_name = "";
        this.formDetail.detail = "";
        this.formDetail.menu_order = node.parent.childNodes.length;
        this.formDetail.create_user = this.create_user;
        this.formDetail.create_date = helper.dateFormat(
          "YYYY-mm-dd HH:MM:SS",
          new Date()
        );
        this.canSave = false;
      } else {
        this.formDetail.menu_name = this.formContrast.menu_name;
        this.formDetail.visit_url = this.formContrast.visit_url;
        this.formDetail.team_name = this.formContrast.team_name;
        this.formDetail.detail = this.formContrast.detail;
        this.formDetail.menu_order = this.formContrast.menu_order;
        this.formDetail.create_user = this.formContrast.create_user;
        this.formDetail.create_date = this.formContrast.create_date;
        this.canSave = false;
      }
    },
    getTree() {
      this.$api.authority.getMenuList().then((response) => {
        if (response.data.success == 1) {
          this.treeData = response.data.data;
          this.nodeId = "";
          this.previousSibling = false;
          this.nextSibling = false;
          this.canSave = false;
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    saveNode() {
      this.$refs.formDetail.validate((valid) => {
        if (valid) {
          let query = {
            menu_id: this.nodeId,
            menu_name: this.formDetail.menu_name,
            detail: this.formDetail.detail,
            visit_url: this.formDetail.visit_url,
            team_name: this.formDetail.team_name,
            issystem: 1,
            menu_order: this.formDetail.menu_order,
          };
          if (this.nodeId.substring(0, 3) == "new") {
            let node = this.$refs.tree.getNode(this.nodeId);
            query.parent_id = node.parent.data.menu_id;
            this.$api.authority.addMenu(query).then((response) => {
              if (response.data.success == 1) {
                this.$message({
                  message: "插入菜单成功",
                  type: "success",
                });
                this.getTree();
                this.emptyObject();
              } else {
                console.log(response.data.errMsg);
              }
            });
          } else {
            this.$api.authority.editMenu(query).then((response) => {
              if (response.data.success == 1) {
                this.$message({
                  message: "修改菜单成功",
                  type: "success",
                });
                this.getTree();
                this.emptyObject();
              } else {
                console.log(response.data.errMsg);
              }
            });
          }
        } else {
          this.$message({
            message: "请完善信息",
            type: "error",
          });
        }
      });
    },
    deleteNode() {
      if (this.nodeId.substring(0, 3) == "new") {
        this.getTree();
        this.emptyObject();
      } else {
        let params = {
          id: this.nodeId,
        };
        this.$api.authority.delMenu(params).then((response) => {
          if (response.data.success == 1) {
            this.$message({
              message: "删除菜单成功",
              type: "success",
            });
            this.getTree();
            this.emptyObject();
          } else {
            console.log(response.data.errMsg);
          }
        });
      }
    },
    nodePosition(type) {
      let node = this.$refs.tree.getNode(this.nodeId);
      let nodesNum = node.parent.childNodes.indexOf(node);
      let nodeNext = {};
      if (nodesNum != -1) {
        nodeNext = node.parent.childNodes[nodesNum + type];
      }
      let params = {
        data: [
          {
            id: node.data.menu_id,
            sort: nodeNext.data.menu_order,
          },
          {
            id: nodeNext.data.menu_id,
            sort: node.data.menu_order,
          },
        ],
      };
      this.$api.authority.positionMenu(params).then((response) => {
        if (response.data.success == 1) {
          this.$message({
            message: "更新菜单成功",
            type: "success",
          });
          this.getTree();
          this.emptyObject();
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    changeSave() {
      this.canSave = true;
    },
    emptyObject() {
      for (var i in this.formDetail) {
        this.formDetail[i] = "";
      }
    },
  },
};
</script>
<style scoped>
.cont {
  height: calc(100vh - 140px);
  margin: 0 20px;
}
.row_height {
  width: 100%;
  height: 100%;
}
.col_sty_r {
  height: 100%;
  padding: 0 10px 20px 0;
}
.col_sty_l {
  height: 100%;
  padding: 0 0 20px 10px;
}
.right_station {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
}
.left_station {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
}
.right_station_head {
  padding: 20px 20px 20px 40px;
  position: relative;
  line-height: 20px;
  color: #58617a;
  font-size: 16px;
  font-weight: 700;
}
.right_station_head::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
  top: 22px;
  left: 24px;
}
.cont .line {
  width: 100%;
  height: 1px;
  margin: 0;
  background-color: #edf0ff;
}
.right_station .tree_station {
  height: calc(100% - 90px);
  margin: 15px 10px 0 20px;
  overflow: auto;
}
.right_station1 .tree_station::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 16px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.right_station1 .tree_station::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 8px;
  /* background: #dde4ff; */
  box-shadow: 8px 0 0 #a5adb7 inset;
  border: 4px solid rgba(0, 0, 0, 0);
}
.right_station1 .tree_station::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 8px;
  /* background: #f4f4f4; */
  box-shadow: 8px 0 0 #f4f4f4 inset;
  border: 4px solid rgba(0, 0, 0, 0);
}
.btn_club {
  height: 60px;
  line-height: 40px;
  padding: 10px 20px;
}
.left_station .btn {
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  border-radius: 4px;
  outline: none;
  border: 1px #eee solid;
  margin-right: 4px;
}
.left_station .btn.btn_act1 {
  background-color: #264dd9;
  color: #f4f7fc;
  cursor: pointer;
}
.left_station .btn.btn_act1:hover {
  background-color: #4969db;
}
.left_station .btn.btn_act2 {
  background-color: #e6ebfe;
  color: #0f2683;
  cursor: pointer;
}
.left_station .btn.btn_act2:hover {
  background-color: #eaf1ff;
}
.left_station .btn.btn_act3 {
  background-color: #e15260;
  color: #f8f9fd;
  cursor: pointer;
}
.left_station .btn.btn_act3:hover {
  background-color: #f16270;
}
.left_station .btn.btn_act4 {
  background-color: #41558c;
  color: #f4f7fc;
  cursor: pointer;
}
.left_station .btn.btn_act4:hover {
  background-color: #5b6a91;
}
.left_station .btn.btn_dis {
  background-color: #bcc1d0;
  color: #f4f7fc;
  cursor: not-allowed;
}
.left_station .form_station {
  height: calc(100% - 90px);
  margin: 15px 20px 0;
  overflow: auto;
}
.form_item_title {
  padding: 0 15px;
  line-height: 40px;
}
</style>
<style>
.left_station .el-form-item {
  margin-bottom: 10px;
}
.left_station .el-input__inner {
  background-color: #f7f8f9;
  border-radius: 8px;
  border: solid 1px #e3e5ef;
  padding: 0 15px;
  color: #242c43;
}
.left_station .el-textarea__inner {
  background-color: #f7f8f9;
  border-radius: 8px;
  border: solid 1px #e3e5ef;
  color: #242c43;
}
.left_station .el-textarea .el-input__count {
  background-color: #f7f8f9;
}
.left_station .is-disabled .el-input__inner {
  background-color: #e3e4e6;
  border-radius: 8px;
  border: solid 1px #e3e5ef;
  padding: 0 15px;
  color: #242c43;
}
.left_station .el-textarea__inner::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 16px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.left_station .el-textarea__inner::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 8px;
  box-shadow: 8px 0 0 #a5adb7 inset;
  border: 4px solid rgba(0, 0, 0, 0);
}
.left_station .el-textarea__inner::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 8px;
  box-shadow: 8px 0 0 #f4f4f4 inset;
  border: 4px solid rgba(0, 0, 0, 0);
}
.left_station .el-form-item__label {
  font-weight: bold;
}
.tree_station .el-tree-node__content {
  height: 30px;
}
.tree_station .el-tree-node__label {
  font-size: 14px;
}
.tree_station .el-tree-node__expand-icon {
  color: #264dd9;
  padding: 2px;
}
.tree_station .el-tree-node__expand-icon.is-leaf {
  color: transparent;
  border: 0;
}
.tree_station .el-tree-node.is-current > .el-tree-node__content {
  background-color: #e6ebfe;
  color: #515fe7;
}
.tree_station .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.tree_station .el-icon-caret-right {
  margin-right: 15px;
  border: 1px #d0d6f4 solid;
  border-radius: 4px;
}
.tree_station .el-icon-caret-right:before {
}
.tree_station .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  content: "\e6d8";
  font-size: 12px;
}
.tree_station .el-tree-node__expand-icon.el-icon-caret-right:before {
  content: "\e6d9";
  font-size: 12px;
}
</style>
