<template>
  <div class="EmployeList">
    <template v-if="empIsShowAdd">
      <div class="head-title">
        用户列表
        <el-button @click="empIsShowAdd=false,clearInfo()" style="float:right;margin-top: -5px;" size="small"
          type="primary">
          添加用户
        </el-button>
      </div>
      <div class="content">
        <div>
          <el-alert title="员工登录入口链接：" :closable='false' type="info" style="margin-bottom:20px;">
            <span id="my_Link">{{LoginUrl}}</span>
            <el-button size="mini" style="margin-left:20px;" @click="copyCode()">复制链接</el-button>
          </el-alert>
          <div class="searchInput">
            <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入用户昵称" v-model="msg.EmpName"
              size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()">
            </el-input>
            <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
              @click="msg.pageIndex=1,getList()"> </span>
          </div>
        </div>
        <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
          <el-table-column prop="EmpId" label="ID" width="80">
          </el-table-column>
          <el-table-column prop="EmpName" label="昵称">
          </el-table-column>
          <el-table-column prop="EmpAccount" label="用户名">
          </el-table-column>
          <el-table-column prop="CreateDateStr" label="添加日期" width="220">
          </el-table-column>
          <el-table-column label="操作" width="260">
            <template slot-scope="scope">
              <el-tooltip slot="label" class="item" effect="dark" content="编辑" placement="top">
                <img @click="EditRole(scope.row)" src="../../assets/img/userman/edit.png" alt="">
              </el-tooltip>
              <el-tooltip slot="label" class="item" effect="dark" content="修改密码" placement="top">
                <img @click="upPwddialog=true,pwdMsg.EmpId=scope.row.EmpId" style="margin:0 10px;"
                  src="../../assets/img/userman/change.png" alt="">
              </el-tooltip>
              <el-tooltip slot="label" class="item" effect="dark" content="删除" placement="top">
                <img @click="RemmoveRole(scope.row)" src="../../assets/img/userman/del.png" alt="">
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
          :page-size="msg.pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </template>
    <template v-else>
      <div class="head-title">
        <span @click="empIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">用户管理</span><span
          style="margin:0 9px;color:#C0C4CC">/</span><span>用户编辑</span>
      </div>
      <div class="content">
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px" style="padding:0 20px;">
          <el-form-item label="用户名" prop="EmpAccount">
            <el-input v-model="addMsg.EmpAccount" class="w400" size="small" maxlength="20" />
          </el-form-item>
          <el-form-item label="密码" prop="EmpPwd">
            <el-input type="password" v-model="addMsg.EmpPwd" size="small" maxlength="20" class="w400" />
          </el-form-item>
          <el-form-item label="昵称" prop="EmpName">
            <el-input type="text" v-model="addMsg.EmpName" size="small" maxlength="20" class="w400" />
          </el-form-item>
          <el-form-item label="角色">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkArr" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="item in RoleList" :label="item.RoleId" :key="item.RoleName">{{item.RoleName}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
      </el-button>
    </template>
    <!-- 修改密码 -->
    <el-dialog title="提示" :visible.sync="upPwddialog" width="400px">
      <el-form label-width="0">
        <p style="padding:10px 0">请输入新密码</p>
        <el-input type="password" v-model="pwdMsg.EmpPwd" maxlength="20"></el-input>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="upPwddialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="UpdatePwd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        //修改密码弹窗
        upPwddialog: false,
        //全选
        checkAll: false,
        checkArr: [], //选中数组
        dataList: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          EmpName: ''
        },
        //修改密码
        pwdMsg: {
          EmpPwd: '',
          EmpId: 0,
        },
        total: 0,
        empIsShowAdd: true,
        addMsg: {
          EmpId: 0, //员工编号
          EmpAccount: '', //用户名
          EmpPwd: '', //密码
          EmpName: '', //昵称
          RoleAuth: '' //角色
        },
        RoleList: [], //角色列表
        rules: {
          RoleName: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }],
          EmpPwd: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }],
          EmpName: [{
            required: true,
            message: "请输入昵称",
            trigger: "blur"
          }]
        },
        LoginUrl:"",//登录地址
      };
    },
    created() {

    },
    methods: {
      GetLoginUrl() {
        var port = window.location.port;
        var hostUrl = "http://";
        if (port == 80) {
          hostUrl += window.location.hostname;
        } else {
          hostUrl += window.location.host;
        }
        hostUrl += "/#/login?mall_id=" + this.getLocalStorage().MallBaseId;
        this.LoginUrl=hostUrl;
      },
      UpdatePwd() {
        this.apipost("/api/Employee/SetEmployeePwd", this.pwdMsg, res => {
          if (res.data.resultCode == 1) {
            this.getList();;
            this.upPwddialog = false;
            this.Success(res.data.message);
            this.pwdMsg.EmpPwd = '';
          } else {
            this.Info(res.data.message);
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getList() {
        this.apipost("/api/Employee/GetEmployeePageList", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      submitform(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.saveMsg();
          } else {
            return false;
          }
        });
      },
      //保存
      saveMsg() {
        this.addMsg.RoleAuth = this.checkArr.join(',');
        this.apipost("/api/Employee/SetEmployee", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.clearInfo();
            this.empIsShowAdd = true;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //清空
      clearInfo() {
        this.addMsg.EmpId = 0;
        this.addMsg.EmpAccount = '';
        this.addMsg.EmpPwd = '';
        this.addMsg.EmpName = '';
        this.addMsg.RoleAuth = '';
      },
      //修改
      EditRole(item) {
        this.apipost("/api/Employee/GetEmployee", {
          EmpId: item.EmpId
        }, res => {
          if (res.data.resultCode == 1) {
            this.checkArr = [];
            this.addMsg = res.data.data;
            this.empIsShowAdd = false;
            let newArr = this.addMsg.RoleAuth.split(',');
            if (this.addMsg.RoleAuth != '') {
              this.checkArr = newArr.map(function (data) {
                return +data;
              })
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //删除
      RemmoveRole(item) {
        var that = this;
        that.Confirm("是否要删除?", function () {
          that.apipost("/api/Employee/RemoveEmployee", {
            EmpId: item.EmpId
          }, res => {
            if (res.data.resultCode == 1) {
              that.getList();
            } else {
              that.Info(res.data.message);
            }
          })
        })
      },
      handleCheckAllChange(val) {
        this.checkArr = [];
        if (val) {
          this.RoleList.forEach(x => {
            this.checkArr.push(x.RoleId);
          });
        }
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.RoleList.length;
      },

      copyCode() {
        var copycode = document.getElementById("my_Link").innerHTML;
        var input = document.createElement("input"); // 直接构建input
        input.value = copycode; // 设置内容
        document.body.appendChild(input); // 添加临时实例
        input.select(); // 选择实例内容
        document.execCommand("Copy"); // 执行复制
        document.body.removeChild(input); // 删除临时实例
      },
      //获取角色列表
      getRoleList() {
        this.apipost("/api/Employee/GetRoleList", {}, res => {
          if (res.data.resultCode == 1) {
            this.RoleList = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.GetLoginUrl();
      this.getRoleList();
      this.getList();
    }
  };

</script>
<style>
  .EmployeList .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  .EmployeList .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .EmployeList .content .searchInput {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
    margin-right: 20px;
  }

  .EmployeList .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .EmployeList .el-alert__content {
    display: flex;
    align-items: center;
  }

  .EmployeList .el-alert {
    padding: 0 0 5px 5px;
  }

  .EmployeList .el-alert__title {
    margin-top: 5px;
  }

</style>
