<template>
  <div class="indexUser">
    <div>
      <el-row type="flex" justify="space-between">
        <el-col :span="4">
          <h1 class="headerTitle">用户设置</h1>
        </el-col>
        <el-col :span="3" style="text-align:right">
          <span>
            <el-button type="primary" v-if="userBtn.userBtn2" size="mini" round plain @click="AddRegionModal">新增用户</el-button>
          </span>
        </el-col>
      </el-row>
    </div>
    <div class="userMain">
      <div>
        <div class="oneSearch">
          <span>
            <el-input placeholder="请输入查询的用户名或手机号" v-model="listpage.queryCondition1" clearable></el-input>
          </span>
          <span @click="search">搜索</span>
        </div>
      </div>
      <div>
        <div>
          <p>
            总记录条数
            <i>{{statistical}}</i>条
          </p>
        </div>
      </div>
      <div>
        <el-table
          :data="tableData.rows"
          style="width: 100% text-align:center;"
          border
          v-loading="listpage.listloading"
          :header-cell-style="{'background-color': '#fafafa',
    'font-weight':'800'}"
        >
          <el-table-column prop="mobile" label="手机号" min-width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="用户名" min-width="60" align="center"></el-table-column>
          <el-table-column prop="createTime" label="注册时间" min-width="60" align="center"></el-table-column>
          <el-table-column label="操作" min-width="200" align="center">
            <template slot-scope="{row,$index}">
              <el-button
                type="primary"
                size="mini"
                round
                plain
                v-if="userBtn.userBtn3"
                @click.native="getCurrSeek($index, row,true)"
                class="SizeBt"
              >重置密码</el-button>
              <el-button
                type="success"
                round
                plain
                size="mini"
                v-if="userBtn.userBtn4"
                @click.native="getCurrSeek($index, row,false)"
                class="SizeBt"
              >修改信息</el-button>
              <el-button
                type="danger"
                size="mini"
                round
                plain
                v-if="userBtn.userBtn5"
                @click.native="KickOut($index, row)"
                class="SizeBt"
              >删除用户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagenation">
          <span>
            <el-pagination
              background
              layout="prev, pager, next, sizes, total, jumper"
              :total="listpage.total"
              @current-change="click"
              @size-change="handleSizeChange"
              :page-sizes="[5, 15,25, 50]"
              :page-size="listpage.pageSize"
            ></el-pagination>
          </span>
        </div>
      </div>
    </div>
    <el-dialog :title="modify.title" :visible.sync="isAdd.modify" :before-close="perEditClose">
      <div class="isEditInformation" v-if="listpage.isEdit">
        <el-row type="flex" justify="center">
          <el-col :span="6">手机号:</el-col>
          <el-col :span="10">{{modify.mobile}}</el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="6">用户名:</el-col>
          <el-col :span="10">{{modify.name}}</el-col>
        </el-row>
        <el-form :model="editPass" :rules="editrules" ref="editPass">
          <el-row type="flex" justify="center">
            <el-col :span="6">输入新密码:</el-col>
            <el-col :span="10">
              <el-form-item prop="perPass">
                <el-input placeholder="请输入密码" v-model="editPass.perPass"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="6">再次输入新密码:</el-col>
            <el-col :span="10">
              <el-form-item prop="perPass2">
                <el-input placeholder="请输入密码" v-model="editPass.perPass2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <div>
            <el-button type="primary" size="small" round @click="getUpdate('editPass')">确认</el-button>
            <el-button type="info" size="small" plain round @click="perEditClose">取消</el-button>
          </div>
        </div>
      </div>
      <div class="isEditInformation" v-if="!listpage.isEdit">
        <el-form :model="modify" :rules="editrules" ref="modify">
          <el-row type="flex" justify="center">
            <el-col :span="6">输入用户名</el-col>
            <el-col :span="10">
              <el-form-item prop="name">
                <el-input placeholder="输入用户名" v-model="modify.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="6">输入手机号</el-col>
            <el-col :span="10">
              <el-form-item prop="mobile">
                <el-input placeholder="输入手机号" v-model="modify.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <div>
            <el-button type="primary" size="small" round @click="getUpdate('modify')">确认</el-button>
            <el-button type="info" size="small" plain round @click="perEditClose">取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
     <el-dialog title="新增用户" :visible.sync="isAdd.add" :before-close="AddClose">
      <div class="addPerson">
        <el-form :model="addPerData" :rules="editrules" ref="addPerData">
          <el-form-item label="用户名:" prop="name">
            <el-input v-model="addPerData.name"></el-input>
          </el-form-item>
           <el-form-item label="手机号:" prop="mobile">
            <el-input v-model="addPerData.mobile"></el-input>
          </el-form-item>
           <el-form-item label="用户密码:" prop="password">
            <el-input v-model="addPerData.password"></el-input>
          </el-form-item>
        </el-form>
         <div>
            <el-button type="primary" size="small" round @click="getAdd('addPerData')">确认</el-button>
            <el-button type="info" size="small" plain round @click="AddClose('addPerData')">取消</el-button>
          </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("密码不能为空"));
      } else {
        return callback();
      }
    };
    var checkname = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("用户名不能为空"));
      } else {
        return callback();
      }
    };
    var checkmobile = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("手机号不能为空"));
      } else if (!/^1[3,4,5,7,8,9]\d{9}$/.test(value)) {
        return callback(new Error("手机号码格式不对"));
      } else {
        return callback();
      }
    };
    var checkPass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.editPass.perPass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      statistical: 0,
      input: "",
      tableData: {},
      listpage: {
        pageSize: 15,
        pageNum: 1,
        queryCondition: "",
         queryCondition1: "",
        total: 0,
        listloading: false,
        isEdit: true
      },
      modify: {},
      isAdd: {
        add: false,
        modify: false
      },
      rule: "",
      editPass: {
        perPass: "",
        perPass2: ""
      },
      editrules: {
        perPass: [{ validator: checkPass, trigger: "blur" }],
        perPass2: [{ validator: checkPass2, trigger: "blur" }],
        name: [{ validator: checkname, trigger: "blur" }],
        mobile: [{ validator: checkmobile, trigger: "blur" }],
        password:[{validator: checkPass, trigger: "blur" }]
      },
      addPerData:{
        name:"",
        mobile:"",
        password:"",
      },
      userBtn:{
        userBtn2:0,
        userBtn3:0,
        userBtn4:0,
        userBtn5:0,
      }
    };
  },
  created(){
    var userBtn = {}
    this.getButton(1).then(result => {
      if (result.data.statusCode==="1") {
        userBtn = result.data.data
        userBtn.map((item)=>{
          if(item.id==2){
            this.userBtn.userBtn2 = item.checked?1:0 
          }else if(item.id==3){
            this.userBtn.userBtn3 = item.checked?1:0  
          }else if(item.id==4){
            this.userBtn.userBtn4 = item.checked?1:0  
          }else if(item.id==5){
            this.userBtn.userBtn5 = item.checked?1:0  
          }
        })
      }
    });
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      var url = "system/user/list";
      var param = {
        pageSize: this.listpage.pageSize,
        pageNum: this.listpage.pageNum,
        queryCondition:this.listpage.queryCondition
      };
      this.listpage.listloading = true;
      this.axios.post(url, param).then(res => {
        this.listpage.listloading = false;
        if (res.statusCode === "1") {
          this.statistical=res.data.total;
          var data = res.data;
          data.rows.map(item => {
            if (item.createTime)
              item.createTime = item.createTime.split(" ")[0];
            return item;
          });
          this.tableData = res.data;
          this.listpage.total = res.data.total;
        }
      });
    },
    handleSizeChange(val) {
      this.listpage.pageSize = val;
      this.listpage.pageNum = 1;
      this.getUserList();
    },
    click(val) {
      this.listpage.pageNum = val;
      this.getUserList();
    },
    // 新增用户
    AddRegionModal() {
      this.isAdd.add = true;
    },
    // 重置密码
    getCurrSeek(i, row, j) {
      this.listpage.isEdit = j;
      this.modify = row;
      this.modify.title = j ? "重置密码" : "修改信息";
      this.rule = j ? "editPass" : "modify";
      this.isAdd.modify = true;
    },
    getUpdate(formName) {
      var _this = this;
      var a;
      this.$refs[formName].validate(valid => {
        if (valid) {
          a = true;
        } else {
          a = false;
          return false;
        }
      });
      if (!a) return;
      var url = "system/user/update";
      // var url="/use/update"
      var param = {
        userId: this.modify.userId,
        mobile: this.modify.mobile,
        password: this.listpage.isEdit
          ? md5(this.editPass.perPass)
          : this.modify.password,
        name: this.modify.name
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.$alert("修改成功", "更新提示", {
            confirmButtonText: "确定",
            callback: action => {
              _this.isAdd.add = false;
              _this.perEditClose();
            }
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    KickOut(i, row) {
      var _this = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          var url = "system/user/delete";
          var param = { userId: row.userId };
          _this.axios.post(url, param).then(res => {
            if (res.statusCode === "1") {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              _this.getUserList();
            } else {
              _this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      var abc = function() {};
    },
    // 关闭编辑框
    perEditClose() {
      this.$refs[this.rule].resetFields();
      this.isAdd = {};
      this.editPass = {
        perPass: "",
        perPass2: ""
      };
      this.getUserList();
      this.isAdd.modify = false;
    },
    getAdd(formName){
       var _this = this;
      var a;
      this.$refs[formName].validate(valid => {
        if (valid) {
          a = true;
        } else {
          a = false;
          return false;
        }
      });
      if (!a) return;
      var url="system/user/add";
      var param={mobile:this.addPerData.mobile,name:this.addPerData.name,password:this.addPerData.mobile};
      param.password=md5(param.password);
      this.axios.post(url,param).then(res=>{
        if(res.statusCode==="1"){
            this.$alert("新增成功", "提示", {
            confirmButtonText: "确定",
            callback: action => {
              _this.isAdd.add = false;
              _this.getUserList();
            }
          });
        }else{
          this.$message.error(res.message);
        }
      })
    },
    AddClose(){
       this.$refs.addPerData.resetFields();
       this.addPerData={
        name:"",
        mobile:"",
        password:"",
      };
       this.isAdd.add = false;
    },
    search(){
      this.listpage.pageNum=1;
      this.listpage.total=0;
      this.listpage.queryCondition=this.listpage.queryCondition1;-
      this.getUserList();
    }
  }
};
</script>