<template>
  <div id="org">
    <div id="orgTop">
      <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-2-b1'"
        >新增组织架构</el-button
      >
    </div>
    <div
      id="orgCentent"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255, 255, 0.3)"
    >
      <el-table
        :data="TableData"
        style="width: 100%;height:calc(100%)"
        row-key="orgId"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="日期" sortable></el-table-column>
        <el-table-column label="操作" width="500px">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="AddChild(scope.$index, scope.row)"
              v-has="'m9-2-b2'"
              >新增子集组织</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="EditNow(scope.$index, scope.row)"
              v-has="'m9-2-b3'"
              >修改当前组织</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="DelNow(scope.$index, scope.row)"
              v-has="'m9-2-b4'"
              >删除当前组织</el-button
            >
          </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="110px"
      >
        <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"
            clearable
            v-show="false"
          ></el-input>
          <el-input
            size="small"
            v-model="ruleForm.orgId"
            clearable
            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="delFlag" style="width:100%">
          <el-select size="small" v-model="ruleForm.delFlag" style="width:100%">
            <el-option
              v-for="item in delFlagoptions"
              :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: "org",
  data: function() {
    return {
      loading: false,
      AddDialog: false,
      TableData: [], //表格数据
      AddBoxinput: "", //组织名称
      ruleForm: {
        parentId: "0", //默认为0，新增一级架构时传0
        orgId: "", //只在修改时起作用
        name: "",
        orderNum: "",
        delFlag: ""
      },
      rules: {
        delFlag: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        name: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        orderNum: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ]
      },
      delFlagoptions: [
        { value: "0", lable: "启用" },
        { value: "1", lable: "不启用" }
      ],
      addAndEditURL: "", //新增/修改的URl
      DialogTitle: "" //弹窗标题
    };
  },
  methods: {
    // 获取所有的用户
    loadGridData() {
      this.loading = true;
      this.TableData = [];
      this.$http
        .post(this.nozzle.orgGetOrgTree)
        .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.ruleForm.parentId = "0";
      this.ruleForm.orgId = "";
      this.addAndEditURL = this.nozzle.orgAddOrg;
      this.DialogTitle = "新增";
    },
    // 点击新增子项
    AddChild(index, rows) {
      this.AddDialog = true;
      this.ruleForm.parentId = rows.orgId;
      this.ruleForm.orgId = "";
      this.addAndEditURL = this.nozzle.orgAddOrg;
      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;
            })
            .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.orgId];
          this.$http
            .post(this.nozzle.orgDeleteOrg, 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.delFlag = String(rows.delFlag);
      // this.ruleForm.orgId = rows.orgId;
      // this.ruleForm.name = rows.name;
      // this.ruleForm.orderNum = rows.orderNum;

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

<style scoped>
#org {
  width: 100%;
  height: 100%;
}
/* 顶部搜索 */
#orgTop {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
}
#orgTop .el-input {
  width: 250px;
  margin: 0 10px;
}
/* 表格 */
#orgCentent {
  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;
}
</style>