<template>
  <div id="menuBox">
    <div id="menuTop">
      <el-button type="primary" icon="el-icon-search" @click="loadGridData()" v-has="'Search'">刷新</el-button>
      <el-button type="primary" icon="el-icon-search" @click="AddTop()" v-has="'m9-4-b1'">新增一级菜单</el-button>
    </div>
    <div
      id="menuCentent"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table
        :data="TableData"
        style="width: 100%;height:calc(100%)"
        row-key="menuId"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="名称">
          <template slot-scope="scope">
            <span v-if="scope.row.type==2" style="color:orange;font-size:12px">{{scope.row.name}}</span>
            <span v-else>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type==2" style="color:orange;font-size:12px">按钮</span>
            <span v-else>菜单</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" sortable>
          <template slot-scope="scope">
            <span
              v-if="scope.row.type==2"
              style="color:orange;font-size:12px"
            >{{scope.row.orderNum}}</span>
            <span v-else>{{scope.row.orderNum}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="perms" label="菜单权限标识">
          <template slot-scope="scope">
            <span v-if="scope.row.type==2" style="color:orange;font-size:12px">{{scope.row.perms}}</span>
            <span v-else>{{scope.row.perms}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="500px">
          <template slot-scope="scope">
            <span v-if="scope.row.type==2" style="color:orange;font-size:12px">
              <el-button
                type="text"
                size="small"
                @click="EditNow(scope.$index, scope.row)"
                v-has="'m9-4-b5'"
              >修改按钮</el-button>
              <el-button
                type="text"
                size="small"
                @click="DelNow(scope.$index, scope.row)"
                v-has="'m9-4-b6'"
              >删除按钮</el-button>
            </span>
            <span v-else>
              <el-button
                type="text"
                size="small"
                @click="AddChild(scope.$index, scope.row)"
                v-has="'m9-4-b2'"
              >新增子集菜单/按钮</el-button>
              <el-button
                type="text"
                size="small"
                @click="EditNow(scope.$index, scope.row)"
                v-has="'m9-4-b3'"
              >修改当前菜单</el-button>
              <el-button
                type="text"
                size="small"
                @click="DelNow(scope.$index, scope.row)"
                v-has="'m9-4-b4'"
              >删除当前菜单</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增组织架构 -->
    <el-dialog :title="DialogTitle" :visible.sync="AddDialog" width="400px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="名    称" prop="name" style="width:100%">
          <el-input size="small" v-model="ruleForm.name" clearable></el-input>
          <el-input size="small" v-model="ruleForm.parentId" v-show="false"></el-input>
          <el-input size="small" v-model="ruleForm.menuId" v-show="false"></el-input>
        </el-form-item>
        <el-form-item label="排    序" prop="orderNum" style="width:100%">
          <el-input size="small" v-model="ruleForm.orderNum" clearable type="number"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="perms" style="width:100%">
          <el-input size="small" v-model="ruleForm.perms" clearable></el-input>
        </el-form-item>
        <el-form-item label="添加类型" prop="type" style="width:100%">
          <el-select size="small" v-model="ruleForm.type" style="width:100%">
            <el-option
              v-for="item in typeoptions"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddDialog = false">取 消</el-button>
        <el-button type="primary" @click="AddBtn('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { message } from "./../../util/item";
export default {
  name: "menuBox",
  data: function() {
    return {
      loading: false,
      AddDialog: false,
      TableData: [], //表格数据
      AddBoxinput: "", //组织名称
      ruleForm: {
        parentId: "", //默认为0，新增一级架构时传0
        menuId: "", //只在修改时起作用
        // 需要进行操作的四个值
        name: "",
        perms: "", //权限标识
        orderNum: "",
        type: "" //类型
      },
      rules: {
        type: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        name: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        orderNum: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        perms: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ]
      },
      typeoptions: [
        { value: "1", lable: "菜单" },
        { value: "2", lable: "按钮" }
      ],
      addAndEditURL: "", //新增/修改的URl
      DialogTitle: "" //弹窗标题
    };
  },
  methods: {
    // 获取所有的用户
    loadGridData() {
      this.loading = true;
      this.TableData = [];
      this.$http
        .post(this.nozzle.menuGetMenuTree)
        .then(response => {
          this.loading = false;
          if (response.data.code === 1) {
            this.TableData = response.data.data;
          } else {
            message(response);
          }
        })
        .catch(response => {
          this.loading = false;
          message(response);
        });
    },
    // 点击新增组织架构
    AddTop() {
      this.AddDialog = true;
      this.$nextTick(function() {
        this.$refs["ruleForm"].resetFields();
      });
      this.ruleForm.parentId = "0";
      this.ruleForm.menuId = "";
      this.addAndEditURL = this.nozzle.menuAddMenu;
      this.DialogTitle = "新增";
    },
    // 点击新增子项
    AddChild(index, rows) {
      this.$nextTick(function() {
        this.$refs["ruleForm"].resetFields();
      });
      this.AddDialog = true;

      this.ruleForm.parentId = rows.menuId;
      this.ruleForm.menuId = "";
      this.addAndEditURL = this.nozzle.menuAddMenu;
      this.DialogTitle = "新增";
    },
    // AddBtn 新增/修改弹窗的 确认提交按钮
    AddBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$http
            .post(this.addAndEditURL, this.ruleForm)
            .then(response => {
              if (response.data.code === 1) {
                this.$message({
                  message: response.data.msg,
                  type: "success"
                });
              } else {
                this.$message({
                  message: response.data.msg,
                  type: "warning"
                });
              }
              this.loadGridData();
              this.AddDialog = false;
              this.$refs[formName].resetFields();
            })
            .catch(response => {
              this.loading = false;
              message(response);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    DelNow(index, rows) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var DelList = [rows.menuId];
          this.$http
            .post(this.nozzle.menuDeleteMenu, DelList)
            .then(response => {
              if (response.data.code === 1) {
                this.$message({
                  message: response.data.msg,
                  type: "success"
                });
              } else {
                this.$message({
                  message: response.data.msg,
                  type: "warning"
                });
              }
              this.loadGridData();
            })
            .catch(response => {
              this.loading = false;
              message(response);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 修改
    EditNow(index, rows) {
      this.AddDialog = true;
      this.DialogTitle = "修改";
      this.ruleForm = { ...{}, ...rows };
      this.ruleForm.parentId = "";
      this.ruleForm.type = String(rows.type);
      // this.ruleForm.menuId = rows.menuId;
      // this.ruleForm.name = rows.name;
      // this.ruleForm.perms = rows.perms;
      // this.ruleForm.orderNum = rows.orderNum;

      this.addAndEditURL = this.nozzle.menuUpdateMenu;
    }
  },
  mounted: function() {
    this.loadGridData();
  }
};
</script>

<style scoped>
#menu {
  width: 100%;
  height: 100%;
}
/* 顶部搜索 */
#menuTop {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
}
#menuTop .el-input {
  width: 250px;
  margin: 0 10px;
}
/* 表格 */
#menuCentent {
  width: 100%;
  height: calc(100% - 70px);
  margin-top: 10px;
  background: rgba(53, 53, 53, 0.5);
}
.el-form-item__label {
  text-align: left !important;
}
</style>
<style>
.el-table__body-wrapper {
  height: calc(100% - 60px) !important;
  overflow-y: auto !important;
  background: rgba(27, 27, 28, 0) !important;
}
.el-form-item__label {
  text-align: left !important;
}
</style>