<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="handleClick('search')"
        v-has="'Search'"
        >搜索</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="handleClick('AddUser')"
        v-has="'m9-1-1'"
        >新增用户</el-button
      >
    </div>
    <div
      id="UserCentent"
      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% - 45px)">
        <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="240px">
          <template slot-scope="scope">
            <template v-if="scope.row.userType !== 1">
              <el-button
                type="text"
                size="small"
                @click="handleClick('update', scope.row)"
                v-has="'m9-1-2'"
                >修改用户</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleClick('delete', scope.row)"
                v-has="'m9-1-3'"
                >删除用户</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleClick('reset', scope.row)"
                v-has="'m9-1-4'"
                >重置密码</el-button
              >
            </template>
          </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>
    <!--弹窗-->
    <page-dialog
      :title="dialogInfo.title[dialogInfo.type]"
      :visible.sync="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
      @handleClick="handleClick"
    >
      <page-form
        :ref-obj.sync="formInfo.ref"
        :data="formInfo.data"
        :field-list="formInfo.fieldList"
        :rules="formInfo.rules"
        :label-width="formInfo.labelWidth"
        :list-type-info="listTypeInfo"
        @handleClick="handleClick"
      />
    </page-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { message } from "./../../util/item";
export default {
  name: "user",
  data() {
    // 验证手机号
    let checkPhone = (rule, value, callback) => {
      let check = this.$validate({ label: "手机号", value, rules: ["phone"] });
      if (!check.result) {
        callback(new Error(check.message));
      } else {
        callback();
      }
    };
    return {
      UserValue: "",
      loading: false,
      TableData: [], //表格数据
      ALPage: 1, //分页默认显示页
      ALDatagridDataLength: 0, //分页上显示的数据总条数
      ALSize: 10, //分页上显示的每页的条数
      //弹窗相关
      dialogInfo: {
        title: {
          update: "修改用户",
          AddUser: "添加用户"
        },
        visible: false,
        btLoading: false,
        width: "500px",
        type: "",
        btList: [
          { label: "关闭", type: "", icon: "", event: "close", show: true },
          {
            label: "保存",
            type: "primary",
            icon: "",
            event: "save",
            show: true,
            loading: true
          }
        ]
      },
      //表单相关
      formInfo: {
        ref: null,
        data: {
          id: undefined,
          login: "",
          realName: "", //用户名称
          userType: 0, //类型
          mobile: "", //手机号
          orgId: undefined, //组织
          roleId: undefined //角色
        },
        fieldList: [
          { label: "登录名", value: "login", type: "input", required: true },
          {
            label: "用户名称",
            value: "realName",
            type: "input",
            required: true
          },
          {
            label: "手机号",
            value: "mobile",
            type: "input",
            validator: checkPhone,
            required: true
          },
          {
            label: "用户类型",
            value: "userType",
            type: "select",
            list: "userType",
            required: true,
            disabled: true
          },
          {
            label: "所属组织",
            value: "orgId",
            type: "treeselect",
            list: "deptTree",
            required: true
          },
          {
            label: "所属角色",
            value: "roleId",
            type: "select",
            list: "roleList",
            required: true
          }
        ],
        rules: {},
        labelWidth: "100px"
      },
      //列表相关
      listTypeInfo: {
        deptTree: [],
        roleTree: [],
        userType: [
          { key: "普通用户", value: 0 },
          { key: "超级管理员", value: 1 }
        ],
        roleList: []
      }
    };
  },
  computed: {
    ...mapGetters(["allDept", "allRole"])
  },
  watch: {
    "dialogInfo.visible"(val) {
      let formInfo = this.formInfo;
      if (!val) {
        if (formInfo.ref) {
          formInfo.ref.resetFields();
        }
        this.resetForm();
        this.dialogInfo.btLoading = false;
      }
    },
    "dialogInfo.type"(val) {
      let formInfo = this.formInfo;
      switch (val) {
        case "update":
          for (let item of formInfo.fieldList) {
            if (item.value === "login") {
              item.disabled = true;
            }
          }
          break;
        case "AddUser":
          for (let item of formInfo.fieldList) {
            if (item.value === "login") {
              item.disabled = false;
            }
          }
          break;
      }
    }
  },
  methods: {
    // 初始化验证
    initRules() {
      let formInfo = this.formInfo;
      formInfo.rules = this.$initRules(formInfo.fieldList);
    },
    // 初始化角色
    initRoles() {
      this.$http
        .post(this.nozzle.roleGetRoles, {
          current: 0,
          size: 0,
          data: {
            searchStr: "",
            type: undefined
          }
        })
        .then(res => {
          if (res.data.code === 1) {
            this.listTypeInfo.roleList = res.data.data.map(item => {
              return {
                key: item.roleName,
                value: item.roleId
              };
            });
          }
        });
    },
    //点击事件
    handleClick(event, data) {
      const formInfo = this.formInfo;
      const dialogInfo = this.dialogInfo;
      switch (event) {
        //搜索用户
        case "search":
          this.ALPage = 1;
          this.loadGridData();
          break;
        //添加用户
        case "AddUser":
          dialogInfo.type = event;
          dialogInfo.visible = true;
          setTimeout(() => {
            this.formInfo.ref.clearValidate();
          }, 0);
          break;
        //编辑用户
        case "update":
          dialogInfo.type = event;
          for (let key in data) {
            if (key in formInfo.data) {
              formInfo.data[key] = data[key];
            }
          }
          dialogInfo.visible = true;
          break;
        //重置密码
        case "reset":
          this.$confirm(
            "此操作会重置该用户密码为初始手机号, 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          ).then(res => {
            this.$http
              .post(this.nozzle.resetUserPwd, { data: { userId: data.id } })
              .then(res => {
                if (res.data.code === 1) {
                  this.loadGridData();
                }
                this.$message({
                  message: res.data.msg,
                  type: res.data.code === 1 ? "success" : "error",
                  showClose: true
                });
              })
              .catch(e => {
                message(e);
              });
          });
          break;
        //删除用户
        case "delete":
          this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(res => {
              this.$http
                .post(this.nozzle.deleteSysuser, [data.id])
                .then(res => {
                  if (res.data.code === 1 || res.data.code === 200) {
                    this.ALPage = 1;
                    this.loadGridData();
                  }
                  this.$message({
                    message: res.data.msg,
                    type: res.data.code === 1 ? "success" : "error",
                    showClose: true
                  });
                })
                .catch(e => {
                  message(e);
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
          break;
        //保存
        case "save":
          this.formInfo.ref.validate(valid => {
            if (valid) {
              let api;
              let params = this.formInfo.data;
              let type = this.dialogInfo.type;
              if (type === "AddUser") {
                api = this.nozzle.addSysuser;
              } else if (type === "update") {
                api = this.nozzle.updateSysuser;
              } else {
                return;
              }
              dialogInfo.btLoading = true;
              this.$http
                .post(api, params)
                .then(res => {
                  if (res.data.code === 1 || res.data.code === 200) {
                    dialogInfo.visible = false;
                    this.ALPage = 1;
                    this.loadGridData();
                  }
                  this.$message({
                    message: res.data.msg,
                    type: res.data.code === 1 ? "success" : "error",
                    showClose: true
                  });
                  dialogInfo.btLoading = false;
                })
                .catch(e => {
                  dialogInfo.btLoading = false;
                });
            } else {
              return false;
            }
          });
          break;
        //关闭
        case "close":
          dialogInfo.visible = false;
          break;
      }
    },
    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);
        });
    },
    //初始化表单
    resetForm() {
      this.formInfo.data = {
        id: undefined,
        login: "",
        realName: "", //用户名称
        userType: 0, //类型
        mobile: "", //手机号
        orgId: undefined, //组织
        roleId: undefined //角色
      };
    }
  },
  mounted() {
    this.loadGridData();
    this.initRules();
    this.initRoles();
    this.listTypeInfo.deptTree = this.allDept;
    this.listTypeInfo.roleTree = this.allRole;
  }
};
</script>

<style lang="scss" 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);
}
</style>