<!--分配用户-->
<template>
  <div class="role-auth-user">
     <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" class="form-box">
      <el-form-item style="margin-right:20px;">
       <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
      </el-form-item>
       <el-col :span="1.5" style="margin-right:20px;">
         <p class="add-button-one-120"
            @click="openSelectUser"
            v-hasPermi="['system:role:add']"
         ><i class="el-icon-plus"></i>添加用户</p>
       </el-col>
      <el-form-item label="姓名" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入姓名"
          clearable
          maxlength="10"
          size="small"
          style="width: 240px"
        />
      </el-form-item>
       <el-form-item label="身份" prop="dictType">
         <el-select v-model="queryParams.userType" placeholder="请选择身份" clearable size="small">
           <el-option
             v-for="dict in userTypeList"
             :key="dict.deptId"
             :label="dict.deptName"
             :value="dict.deptId"
           ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="工号/学号" prop="userName">
         <el-input
           v-model="queryParams.userName"
           placeholder="请输入工号/学号"
           clearable
           maxlength="20"
           size="small"
           style="width: 240px"
         />
       </el-form-item>
      <el-form-item label="联系方式" prop="phonenumber">
        <el-input
          v-model="queryParams.phonenumber"
          placeholder="请输入联系方式"
          clearable
          maxlength="13"
          size="small"
          style="width: 240px"
        />
      </el-form-item>
       <el-form-item label="学院" prop="type">
         <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable size="small">
           <el-option
             v-for="dict in deptOptions"
             :key="dict.deptId"
             :label="dict.deptName"
             :value="dict.deptId"
           ></el-option>
         </el-select>
       </el-form-item>
      <el-form-item>
        <p class="inquire-button-one" @click="handleQuery">查询</p>
        <p class="reset-button-one" @click="resetQuery">重置</p>
      </el-form-item>
    </el-form>

    <div class="sheet-expand-box">
      <i class="el-icon-warning" style="color:#0045AF;"></i>
      <p class="color_99">已选择 {{selectedNum}} 项</p>
      <p class="color_one cursor_hover" @click="selectPage">全选本页</p>
      <p class="color_warn cursor_hover" @click="clearSelection">清除选项</p>
      <p class="color_FF6666 border-solid-color-FF6666  cursor_hover"
         @click="cancelAuthUserAll"
         v-hasPermi="['system:role:remove']">批量取消授权</p>
      <!--<p class="color_FF6666 border-solid-color-FF6666  cursor_hover"-->
         <!--@click="cancelAuthUserAll"-->
         <!--v-hasPermi="['system:role:remove']">取消所有授权</p>-->
    </div>
    <el-table v-loading="loading" border :data="userList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
      <el-table-column type="selection" width="55" align="center" />
      <!--<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />-->
      <el-table-column label="姓名" prop="nickName" align="left" :show-overflow-tooltip="true" />
      <el-table-column label="身份" prop="userType" align="left" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <p>{{scope.row.userType==11?'教职工':(scope.row.userType==22?'学生':'')}}</p>
        </template>
      </el-table-column>
      <el-table-column label="工号/学号" prop="userName" align="left" :show-overflow-tooltip="true" />
      <!--<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />-->
      <el-table-column label="联系方式" prop="phonenumber" align="left" :show-overflow-tooltip="true" />
      <el-table-column label="学院" prop="deptName" align="left" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <div class="table-button-box">
            <p class="table-button-null"></p>
            <p class="table-button-p"
               @click="cancelAuthUser(scope.row)"
               v-hasPermi="['system:role:remove']"
            >取消授权</p>
            <p class="table-button-null"></p>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination :page-sizes="[20, 30, 40, 50]"
      v-show="total>0"
      :total="total"
      layout="total, prev, pager, next, sizes, jumper"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
  </div>
</template>

<script>
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
import { listDepartments } from "@/api/system/dept";
import selectUser from "./selectUser";

export default {
  props: {
    roleId: {},
  },
  name: "AuthUser",
  components: { selectUser },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中用户组
      userIds: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: [],
      // 状态数据字典
      statusOptions: [],
      //学院
      deptOptions:[],
      // 角色身份
      userTypeList:[
        {
          deptId:"11",
          deptName:"教职工"
        },
        {
          deptId:"22",
          deptName:"学生"
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        roleId: undefined,
        userName: undefined,
        nickName: undefined,
        phonenumber: undefined
      },
      //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
      selectedNum:0,
    };
  },
  created() {
    const roleId = this.roleId;
    // const roleId = this.$route.params && this.$route.params.roleId;
    if (roleId) {
      this.queryParams.roleId = roleId;
      this.getList();
      this.getDicts("sys_normal_disable").then(response => {
        this.statusOptions = response.data;
      });
    }
    this.getDeptList();
  },
  methods: {
    /** 查询学院列表 */
    getDeptList()
    {
      listDepartments().then(response => {
        // this.deptOptions = response.data;
        this.$set(this, 'deptOptions', response.data)
      });
    },
    //=========表格扩展选择器方法---开始=========
    //选择本页
    selectPage(){
      console.log(this.$refs.multipleTable)
      this.$refs.multipleTable.toggleAllSelection()
      // console.log(this.$refs.multipleTable.selection)
    },
    //清除选择
    clearSelection(){
      this.$refs.multipleTable.clearSelection()
    },
    /*===记录勾选数据===
      需要再el-table 添加  :row-key="getRowKeys"
      需要在selection 添加 :reserve-selection="true"
    */
    getRowKeys(row) {
      return row.id
    },
    //=========表格扩展选择器方法---结束=========
    //返回按钮
    backPage(){
      this.$parent.clickPage(1);
    },
    /** 查询授权用户列表 */
    getList() {
      this.loading = true;
      allocatedUserList(this.queryParams).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 返回按钮
    handleClose() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/system/role" });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedNum = selection.length;
      this.userIds = selection.map(item => item.userId)
      this.multiple = !selection.length
    },
    /** 打开授权用户表弹窗 */
    openSelectUser() {
      this.$refs.select.show();
    },
    /** 取消授权按钮操作 */
    cancelAuthUser(row) {
      const roleId = this.queryParams.roleId;
      this.$confirm('确认要取消该用户的授权吗？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return authUserCancel({ userId: row.userId, roleId: roleId });
      }).then(() => {
        this.getList();
        this.msgSuccess("取消授权成功");
      }).catch(() => {});
    },
    /** 批量取消授权按钮操作 */
    cancelAuthUserAll(row) {
      if(this.multiple){
        return
      }
      const roleId = this.queryParams.roleId;
      const userIds = this.userIds.join(",");
      this.$confirm('是否取消选中用户授权数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
          return authUserCancelAll({ roleId: roleId, userIds: userIds });
      }).then(() => {
        this.getList();
        this.msgSuccess("取消授权成功");
      }).catch(() => {});
    }
  }
};
</script>

<style scoped lang="scss">
  .role-auth-user {
    flex:1;
    display: flex!important;
    flex-direction: column;
    margin-top:9px;
    padding-bottom:8px;
    overflow: hidden;
    .form-box{
    }
    .button-box{
      width:120px;
      display: flex;
    }
    .sheet-expand-box{
      height:40px;
      display:flex;
      background:rgba(1,131,250,0.1);
      border-radius: 5px;
      margin-bottom:18px;
      font-size:14px;
      i{
        margin:10px 16px 0 14px;
        height:20px;
        width:20px;
        font-size:20px;
        display: block;
      }
      p{
        margin:0;
      }
      p:nth-child(2){
        width:132px;
        font-size:14px;
        height:40px;
        line-height:40px;
      }
      p:nth-child(3){
        width:60px;
        font-size:14px;
        height:40px;
        line-height:40px;
        margin-right:20px;
      }
      p:nth-child(4){
        width:60px;
        font-size:14px;
        height:40px;
        line-height:40px;
        margin-right:20px;
      }
      p:nth-child(5){
        font-size:14px;
        line-height:30px;
        width: 100px;
        height: 30px;
        border-radius: 6px;
        text-align: center;
        margin-top:5px;
        margin-right:20px;
      }
      p:nth-child(6){
        font-size:14px;
        line-height:30px;
        width: 100px;
        height: 30px;
        border-radius: 6px;
        text-align: center;
        margin-top:5px;
      }
    }
  }
</style>
