<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-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(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="180px">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick('update', scope.row)"
              v-has="'m9-2-b3'"
              >修改用户</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleClick('delete', 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>
    <!--弹窗-->
    <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: ["moblie"] });
      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: '',
          pwd: '',
          realName: '', //用户名称
          userType: 0, //类型
          mobile: '', //电话
          orgId: undefined, //组织
          roleId: undefined //角色
        },
        fieldList: [
          {label:'登录名',value:'login',type:'input',required:true},
          {label:'登录密码',value:'pwd',type:'password'},
          {label:'用户名称',value:'realName',type:'input',required:true},
          {label:'电话',value:'mobile',type:'input',validator:checkPhone},
          {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;
      }
    }
  },
  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 "AddUser":
          dialogInfo.type = event;
          dialogInfo.visible = true;
          this.formInfo.fieldList.forEach(item =>{
            if(item.value === "pwd") {
              item.required = true;
            }
          })
          this.initRules();
          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];
            }
          }
          this.formInfo.fieldList.forEach(item =>{
            if(item.value === "pwd") {
              item.required = false;
            }
          })
          this.initRules();
          dialogInfo.visible = true;
          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.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.loadGridData();
                  }
                  this.$message({
                    message: res.data.msg,
                    type: res.data.code === 1 ? "success" : "error",
                    showClose: true
                  });
                  dialogInfo.btLoading = true;
                })
                .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: '',
        pwd: '',
        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>