<template>
  <div id="user">
    <div id="UserTop">
      <el-input placeholder="请输入用户名称" v-model="UserValue" clearable></el-input>
      <el-button type="primary" icon="el-icon-search" @click="loadGridData()" v-has="'Search'">搜索</el-button>
      <el-button type="primary" icon="el-icon-search" @click="AddUser()" v-has="'Search'">新增用户</el-button>
    </div>
    <div
      id="UserCentent"
      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% - 45px)" stripe>
        <el-table-column prop="realName" label="用户名称"></el-table-column>
        <el-table-column prop="login" label="登录名"></el-table-column>
        <el-table-column prop="mobile" label="联系方式"></el-table-column>
        <el-table-column prop="userType" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.userType==0" style="color:green">普通用户</span>
            <span v-else style="color: red">最高权限管理</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="500px">
          <template slot-scope="scope">
            <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>
      <el-pagination
        @size-change="ALSizeChange"
        @current-change="ALCurrentChange"
        :current-page="ALPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="ALSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ALDatagridDataLength"
        style="margin-top:10px;"
      ></el-pagination>
    </div>
    <!-- 新增/修改弹窗 -->
    <el-dialog :title="DialogTitle" :visible.sync="AddDialog" width="400px" :close-on-click-modal="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="登录名" prop="login" style="width:100%">
          <el-input size="small" v-model="ruleForm.login" clearable></el-input>
          <el-input size="small" v-model="ruleForm.id" v-show="false"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="pwd" style="width:100%">
          <el-input size="small" v-model="ruleForm.pwd" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="realName" style="width:100%">
          <el-input size="small" v-model="ruleForm.realName" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话" style="width:100%">
          <el-input
            size="small"
            v-model="ruleForm.mobile"
            clearable
            type="number"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="添加类型" prop="userType" style="width:100%">
          <el-select size="small" v-model="ruleForm.userType" 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-item label="分配组织" style="width:100%" prop="orgName">
          <el-input size="small" v-model="ruleForm.orgName" @focus="OrgFocus" readonly></el-input>
          <el-input size="small" v-model="ruleForm.orgId" v-show="false"></el-input>
        </el-form-item>
        <el-form-item label="分配角色" style="width:100%" prop="roleName">
          <el-input size="small" v-model="ruleForm.roleName" @focus="RoleFocus" readonly></el-input>
          <el-input size="small" v-model="ruleForm.roleId" v-show="false"></el-input>
        </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 width="300px" top="10%" title="分配组织" :visible.sync="innerVisible" append-to-body>
        <div id="TreeBox">
          <el-tree
            :data="Treedata"
            show-checkbox
            check-strictly
            node-key="orgId"
            :default-checked-keys="checklist"
            :props="defaultProps"
            @check-change="handleClick"
            ref="treeForm"
            v-loading="loading2"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          ></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="QuanXianUp()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog width="300px" top="10%" title="分配角色" :visible.sync="innerVisible2" append-to-body>
        <div id="TreeBox2">
          <el-tree
            :data="Treedata2"
            show-checkbox
            check-strictly
            node-key="roleId"
            :default-checked-keys="checklist2"
            :props="defaultProps2"
            @check-change="handleClick2"
            ref="treeForm2"
            v-loading="loading3"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          ></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="QuanXianUp2()">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { message } from "./../../util/item";
export default {
  name: "user",
  data: function() {
    return {
      UserValue: "",
      loading: false,
      TableData: [], //表格数据
      ALPage: 1, //分页默认显示页
      ALDatagridDataLength: 0, //分页上显示的数据总条数
      ALSize: 10, //分页上显示的每页的条数
      ruleForm: {
        // 需要进行操作的四个值
        login: "",
        pwd: "",
        realName: "", //用户名称
        userType: "", //类型
        mobile: "", //电话
        orgId: "", //组织
        roleId: "", //角色
        orgName: "",
        roleName: "",
        id: "" //修改专用
      },
      rules: {
        userType: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        login: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        pwd: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        realName: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        orgName: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        roleName: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ]
      },
      typeoptions: [
        { value: "0", lable: "普通用户" },
        { value: "1", lable: "超级管理员" }
      ],
      AddDialog: false, //新增修改弹窗状态
      DialogTitle: "", //新增修改弹窗title
      innerVisible: false, //选择权限弹窗
      innerVisible2: false, //选择权限弹窗
      loading2: false, //选择权限弹窗tree加载
      loading3: false, //选择权限弹窗tree加载
      Treedata: [], //树形结构
      Treedata2: [], //树形结构
      defaultProps: { children: "children", label: "name" }, //树的相关设置
      defaultProps2: { children: "children", label: "roleName" }, //树的相关设置
      checklist: [], //默认勾选的节点,
      checklist2: [], //默认勾选的节点,
      checkedId: "",
      checkedId2: "",
      addAndEditURL: "", //提交的地址
      isEdit: false //是否为修改
    };
  },
  methods: {
    ALSizeChange(val) {
      // 改变每页的条数
      this.ALSize = val;
      this.loadGridData();
    },
    ALCurrentChange(val) {
      //改变页数
      this.ALPage = val;
      this.loadGridData();
    },
    // 获取所有的用户
    loadGridData() {
      this.loading = true;
      this.TableData = [];
      this.$http
        .post(this.nozzle.selectSysuser, {
          pageNo: this.ALPage,
          pageSize: this.ALSize,
          condition: this.UserValue //模糊搜索
        })
        .then(response => {
          this.loading = false;
          if (response.data.code === 1) {
            this.TableData = response.data.data;
            this.ALDatagridDataLength = response.data.total;
          } else {
            message(response);
          }
        })
        .catch(response => {
          this.loading = false;
          message(response);
        });
    },
    // 新增
    AddUser() {
      this.AddDialog = true;
      this.$nextTick(function() {
        this.$refs["ruleForm"].resetFields();
      });
      this.isEdit = false;
      this.DialogTitle = "新增";
      this.checklist = [];
      this.checklist2 = [];
      this.ruleForm.id = "";
      this.ruleForm.mobile = "";
      this.addAndEditURL = this.nozzle.addSysuser;
    },
    // 分配组织
    OrgFocus(event) {
      this.innerVisible = true;
      this.$nextTick(function() {
        this.loadOrgTreeData();
      });
    },
    // 分配角色
    RoleFocus(event) {
      this.innerVisible2 = true;
      this.$nextTick(function() {
        this.loadroleTreeData();
      });
    },
    // 获取所有的组织的树状数据
    loadOrgTreeData() {
      this.loading2 = true;
      this.Treedata = [];
      this.$http
        .post(this.nozzle.orgGetCurrentOrgTree)
        .then(response => {
          this.loading2 = false;
          if (response.data.code === 1) {
            this.Treedata = response.data.data;
            if (this.isEdit) {
              this.$nextTick(function() {
                this.$refs.treeForm.setCheckedNodes(this.checklist);
              });
            }
          } else {
            message(response);
          }
        })
        .catch(response => {
          this.loading2 = false;
          message(response);
        });
    },
    // 获取所有角色的树状数据
    loadroleTreeData() {
      this.loading3 = true;
      this.Treedata2 = [];
      this.$http
        .post(this.nozzle.roleGetRoles)
        .then(response => {
          this.loading3 = false;
          if (response.data.code === 1) {
            this.Treedata2 = response.data.data;
            if (this.isEdit) {
              this.$nextTick(function() {
                this.$refs.treeForm2.setCheckedNodes(this.checklist2);
              });
            }
          } else {
            message(response);
          }
        })
        .catch(response => {
          this.loading3 = false;
          message(response);
        });
    },
    //  树的操作
    handleClick(data, checked, node) {
      if (checked == true) {
        this.checkedId = data.orgId;
        this.$refs.treeForm.setCheckedNodes([data]);
      }
    },
    // nodeClick(data, checked, node) {
    //   this.checkedId = data.orgId;
    //   this.$refs.treeForm.setCheckedNodes([data]);
    // },
    handleClick2(data, checked, node) {
      if (checked == true) {
        this.checkedId2 = data.roleId;
        this.$refs.treeForm2.setCheckedNodes([data]);
      }
    },
    // nodeClick2(data, checked, node) {
    //   this.checkedId2 = data.roleId;
    //   this.$refs.treeForm2.setCheckedNodes([data]);
    // },

    // 权限点击确定
    QuanXianUp() {
      console.log(this.$refs.treeForm.getCheckedNodes());
      this.ruleForm.orgName = this.$refs.treeForm.getCheckedNodes()[0].name;
      this.ruleForm.orgId = this.$refs.treeForm.getCheckedNodes()[0].orgId;
      this.innerVisible = false;
    },
    QuanXianUp2() {
      console.log(this.$refs.treeForm2.getCheckedNodes());
      this.ruleForm.roleName = this.$refs.treeForm2.getCheckedNodes()[0].roleName;
      this.ruleForm.roleId = this.$refs.treeForm2.getCheckedNodes()[0].roleId;
      this.innerVisible2 = false;
    },
    // 点击提交
    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 => {
              message(response);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 点击修改
    EditNow(index, rows) {
      this.AddDialog = true;
      this.isEdit = true;
      this.DialogTitle = "修改";
      this.ruleForm = { ...{}, ...rows };
      this.ruleForm.pwd = "";
      this.ruleForm.userType = String(rows.userType);
      this.checklist[0] = rows.orgId;
      this.checklist2[0] = rows.roleId;
      console.log(this.checklist, this.checklist2);
      this.addAndEditURL = this.nozzle.updateSysuser;
    },
    // 删除
    DelNow(index, rows) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var DelList = [rows.id];
          this.$http
            .post(this.nozzle.deleteSysuser, 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: "已取消删除"
          });
        });
    }
  },
  mounted: function() {
    this.loadGridData();
  }
};
</script>

<style scoped>
#user {
  width: 100%;
  height: 100%;
}
/* 顶部搜索 */
#UserTop {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
}
#UserTop .el-input {
  width: 250px;
  margin: 0 10px;
}
/* 表格 */
#UserCentent {
  width: 100%;
  height: calc(100% - 70px);
  margin-top: 10px;
  background: rgba(53, 53, 53, 0.5);
}
#TreeBox {
  width: 100%;
  height: 380px;
  overflow: auto;
}
#TreeBox2 {
  width: 100%;
  height: 380px;
  overflow: auto;
}
</style>