<template>
  <!-- 员工管理 -->
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="staffQurey">
        <el-form-item label="员工姓名">
          <el-input
            v-model="staffQurey.userName"
            placeholder="员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工手机号">
          <el-input
            v-model="staffQurey.userPhone"
            placeholder="员工手机号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh-right"
            @click="reset()"
            >重置</el-button
          >
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="addstaff()"
            >添加员工</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="conter">
      <el-table
        :data="staffList"
        style="width: 100%; text-align: center"
        border
      >
        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{
              (staffQurey.pageNum - 1) * staffQurey.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="姓名" />
        <el-table-column prop="userSex" label="性别" width="50">
          <template slot-scope="scope">
            {{scope.row.userSex == '0' ? '女' : '男'}}
          </template>
        </el-table-column>
        <el-table-column prop="userPhone" label="手机号" />
        <el-table-column prop="userIdentification" label="身份证" />
        <el-table-column prop="userBankNumber" label="银行卡号" />
        <el-table-column prop="userBankAddress" label="开户银行" />
        <el-table-column label="员工角色" >
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.roleList" :key="item.rlId"  style="margin-right:10px;">{{item.rlName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button style="margin:5px"  size="mini" icon="el-icon-edit" type="info" @click="updataStaff(scope.row)">修改信息</el-button>
            <el-button style="margin:5px" size="mini" icon="el-icon-edit" type="info" @click="staffrole(scope.row)" :disabled="scope.row.roles.indexOf(2)>-1">修改员工角色</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="staffQurey.pageNum"
        :page-size="staffQurey.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="staffdata.userName"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <p>角色</p>

      <el-checkbox-group v-model="staffdata.roles">
        <el-checkbox v-for="item in rolesList" :key="item.rlId" :label="item.rlId" name="type" >{{item.rlName}}</el-checkbox>
      </el-checkbox-group>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updataStaffRole">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {selectAllByCompanyId} from '@/api/role'
import {secletStaff,updateRole} from '@/api/user'

export default {
  data() {
    return {
      staffQurey: {
        companyId: null,
        pageNum: 1,
        pageSize: 10,
        userName: null,
        userPhone: null,
      },
      total: 0,
      staffList: [],
      dialogVisible:false,
      staffdata:{},
      rolesList:[],
    };
  },
  created() {
    this.staffQurey.companyId = this.$store.getters.companyId
    this.getSatff()
    
    this.getRoles();
  },
  methods: {
    //获取权限
    getRoles() {
      selectAllByCompanyId({companyId:this.$store.getters.companyId}).then((res)=>{
        if(res.status == "success"){
          this.rolesList = res.data
        }else{
          this.$message.error(res.data)
        }
      }).catch((error)=>{
        this.$message.error("查询角色失败")
      })
    },
    //获取员工
    getSatff(){
      secletStaff(this.staffQurey).then((res)=>{
        if(res.status == 'success'){
          // console.log(res.status)
          this.staffList = res.data.list
          this.total = res.data.total
        }else{
          this.$message.error(res.data)
        }
      }).catch((error)=>{
        this.$message.error("获取员工失败")
      })
    },
    //查询
    qurey() {
      this.staffQurey.pageNum = 1
      this.getSatff()
    },
    //重置
    reset() {
      this.staffQurey = {
        companyId: this.$store.getters.companyId,
        pageNum: 1,
        pageSize: 10,
        userName: null,
        userPhone: null,
      }
      this.getSatff()
    },
    //添加员工
    addstaff() {
      this.$router.push('/addStaff')
    },
    //换页
    handleCurrentChange(val) {
      this.staffQurey.pageNum = val
      this.getSatff()
    },
    //修改员工信息
    updataStaff(data){

      this.$router.push({
        path: '/updataStaff',
        query:{
          id:data.userId,
        }
      })
    },
    //修改员工角色
    staffrole(data){
      let roles = this.$store.getters.roles
      console.log(data)
      if(roles.indexOf(2) > -1){

        this.staffdata = data
        
        this.dialogVisible = true
      }else{
        this.$message.warning("只有管理员有权限修改员工角色")
      }
    },
 
    //修改员工角色提交方法
    updataStaffRole(){
      // console.log(this.staffdata)
      let param={
        userId:this.staffdata.userId,
        roles:this.staffdata.roles
        
      }
      console.log(param)
      updateRole(param).then(res=>{
        if(res.status == 'success'){
          this.getSatff()
        }else{
          this.$message.error(res.data)
        }
      })
      this.dialogVisible=false
    }
  },
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.conter {
  margin-bottom: 10px;
}
.footer {
  text-align: right;
}
</style>