<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>