<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="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_dis">
                <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="mcHold&&ymHold" 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="!reset" class="btn btn_dis">
                <i class="el-icon-refresh-left"></i>&nbsp;重置
              </button>
              <button v-else class="btn btn_act4" @click="resetForm()">
                <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 class="form_station" :model="formDetail" :rules="rules">
              <el-form-item prop="menuName">
                <div class="form_item_title">菜单名称：</div>
                <el-input v-model="formDetail.menu_name"></el-input>
              </el-form-item>
              <el-form-item prop="pageUrl">
                <div class="form_item_title">菜单访问地址：</div>
                <el-input v-model="formDetail.visit_url"></el-input>
              </el-form-item>
              <el-form-item prop="describe">
                <div class="form_item_title">菜单组别：</div>
                <el-input v-model="formDetail.team_name"></el-input>
              </el-form-item>
              <el-form-item prop="describe">
                <div class="form_item_title">菜单描述：</div>
                <el-input v-model="formDetail.detail"></el-input>
              </el-form-item>
              <el-form-item prop="describe">
                <div class="form_item_title">菜单排序：</div>
                <el-input v-model="formDetail.sort" disabled></el-input>
              </el-form-item>
              <el-form-item>
                <div class="form_item_title">创建人：</div>
                <el-input v-model="formDetail.founder" disabled></el-input>
              </el-form-item>
              <el-form-item>
                <div class="form_item_title">创建时间：</div>
                <el-input v-model="formDetail.createTime" disabled></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    var validateMenuName = (rule, value, callback) => {
      if (value != this.formContrast.mcHold) {
        this.reset = true;
      }
      if (value == "") {
        this.mcHold = false;
        callback(new Error("请填写菜单名称"));
      } else {
        this.mcHold = true;
        callback();
      }
    };
    var validatePageUrl = (rule, value, callback) => {
      if (value != this.formContrast.pageUrl) {
        this.reset = true;
      }
      if (value == "") {
        this.ymHold = false;
        callback(new Error("请填写运行页面"));
      } else {
        this.ymHold = true;
        callback();
      }
    };
    var validateDescribe = (rule, value, callback) => {
      if (value != this.formContrast.describe) {
        this.reset = true;
      }
      callback();
    };
    return {
      checkText: "",
      treeData: [
        {
          id: 1,
          label: "一级 2",
          children: [
            {
              id: 3,
              label: "二级 2-1",
              children: [
                {
                  id: 4,
                  label: "三级 3-1-1",
                  children: [
                    {
                      id: 5,
                      label: "三级 3-1-2",
                      disabled: true
                    }
                  ]
                },
                {
                  id: 5,
                  label: "三级 3-1-2",
                  disabled: true
                }
              ]
            },
            {
              id: 2,
              label: "二级 2-2",
              disabled: true,
              children: [
                {
                  id: 6,
                  label: "三级 3-2-1"
                },
                {
                  id: 7,
                  label: "三级 3-2-2",
                  disabled: true
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      formDetail: {
        menu_name: "",
        visit_url: "",
        team_name: "",
        detail: "",
        sort: "",
        creatTime: ""
      },
      formYs: {
        menu_name: "",
        visit_url: "",
        team_name: "",
        detail: "",
        sort: "",
        creatTime: ""
      },
      formContrast: {
        menu_name: "",
        visit_url: "",
        team_name: "",
        detail: "",
        sort: "",
        creatTime: ""
      },
      rules: {
        menuName: [
          { required: true, message: "请填写菜单名称", trigger: "blur" },
          { validator: validateMenuName, trigger: "blur" }
        ],
        pageUrl: [
          { required: true, message: "请填写运行页面", trigger: "blur" },
          { validator: validatePageUrl, trigger: "blur" }
        ],
        describe: [{ validator: validateDescribe, trigger: "blur" }]
      },
      nodeId: "",
      previousSibling: false,
      nextSibling: false,
      mcHold: false,
      ymHold: false,
      reset: false,
      newI: 0
    };
  },
  watch: {
    checkText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    // this.getTree();
  },
  methods: {
    checkNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    nodeClick(data, node) {
      this.nodeId = data.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.id);
      if (cid.indexOf("new") > -1) {
        this.formDetail = this.formYs;
      } else {
        let query = {
          id: this.nodeId
        };
        this.$api.authority.getMenu(query).then(response => {
          if (response.data.success == 1) {
            this.formDetail = response.data.data;
            this.formContrast = response.data.data;
            callback();
          } else {
            this.ruleFormIcon.username = false;
            callback(new Error(response.data.errMsg));
          }
        });
      }
    },
    appendNode() {
      let newChild = { id: "new" + this.newI, label: "新菜单", children: [] };
      this.newI++;
      let data = this.nodeData;
      this.$refs.tree.append(newChild, this.nodeId);
      this.$refs.tree.setCurrentKey(newChild.id);
      let node = this.$refs.tree.getNode(newChild.id);
      this.nodeClick(newChild, node);
      this.formDetail.sort = node.parent.childNodes.length;
    },
    resetForm() {
      this.formDetail = this.formContrast;
    },
    getTree() {
      this.$api.authority.getMenuList().then(response => {
        console.log(response);
        this.treeData = response.data.spec;
      });
    },
    saveNode() {
      console.log(this.formDetail);
      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
      };
      this.$api.authority.editMenu(query).then(response => {
        if (response.data.success == 1) {
          this.getTree();
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    deleteNode() {
      let params = {
        id: this.nodeId
      };
      this.$api.authority.delMenu(params).then(response => {
        if (response.data.success == 1) {
          this.getTree();
        } 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.id,
            sort: nodeNext.data.sort
          },
          {
            id: nodeNext.data.id,
            sort: node.data.sort
          }
        ]
      };
      console.log(params);
      this.$api.authority.positionMenu(params).then(response => {
        if (response.data.success == 1) {
          this.getTree();
        } else {
          console.log(response.data.errMsg);
        }
      });
    }
  }
};
</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 .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>
