<template>
  <el-dialog class="userCheckComponent"
             :close-on-click-modal="false"
             title="添加成员" :visible.sync="userCheckComponentType" v-if="userCheckComponentType"
             @close="addDialogAllOff" width="1383px" append-to-body>
    <div class="userCheckComponent-user-box">
      <div class="userCheckComponent-user-content-box">
        <div class="left-max-box">
          <div class="dept-table-title-box">
            <p>待选人员</p>
            <p>{{userNumLeft}}/{{userTotalLeft}}</p>
          </div>
          <div class="dept-table-max-box">
            <el-form :model="userQueryParamsLeft" class="form-box" ref="queryForm" :inline="true" label-width="50px">
              <el-form-item label="" prop="deptId">
                <el-select v-model="userQueryParamsLeft.deptId" clearable @change="userHandleQueryLeft" placeholder="选择部门" style="width: 214px">
                  <el-option
                    v-for="item in deptSelectList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="searchValue" class="form-index" style="margin-right:0;">
                <el-input
                  maxLength="30"
                  v-model="userQueryParamsLeft.searchValue"
                  placeholder="搜索姓名/工号"
                  style="width: 300px">
                  <p class="el-icon-search" slot="append" @click="userHandleQueryLeft"></p>
                </el-input>
              </el-form-item>
              <el-form-item style="margin-right:0;margin-left: 10px;">
                <p class="page-submit-common-style-button" @click="userResetQueryLeft" style="width:60px;margin-right:0;">重置</p>
              </el-form-item>
            </el-form>
            <el-table class="table-box" ref="leftUserTable" border :data="userTableListLeft" @selection-change="userChangeLeft" :row-key="getRowKeys">
              <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
              <el-table-column label="姓名" align="center" prop="userName" show-overflow-tooltip/>
              <el-table-column label="工号" align="center" prop="account" show-overflow-tooltip width="150"/>
              <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip width="270"/>
            </el-table>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="userTotalLeft>0"
                        :total="userTotalLeft"
                        :page.sync="userQueryParamsLeft.page"
                        :limit.sync="userQueryParamsLeft.pageSize"
                        @pagination="userGetListLeft"/>
          </div>
        </div>
        <div class="center-box">
          <p class="el-icon-arrow-left" @click="userArrowButton(1)">到左边</p>
          <p class="el-icon-arrow-right" @click="userArrowButton(2)">到右边</p>
        </div>
        <div class="right-max-box">
          <div class="dept-table-title-box">
            <p>已选成员</p>
            <p>{{userNumRight}}/{{userTotalRight}}</p>
          </div>
          <div class="dept-table-max-box">
            <el-form :model="userQueryParamsRight" class="form-box" ref="queryForm" :inline="true" label-width="50px">
              <el-form-item label="" prop="deptId">
                <el-select v-model="userQueryParamsRight.deptId" clearable @change="userHandleQueryRight" placeholder="选择部门" style="width: 214px">
                  <el-option
                    v-for="item in deptSelectList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="searchValue" class="form-index" style="margin-right:0;">
                <el-input
                  maxLength="30"
                  v-model="userQueryParamsRight.searchValue"
                  placeholder="搜索姓名/工号"
                  style="width: 300px">
                  <p class="el-icon-search" slot="append" @click="userHandleQueryRight"></p>
                </el-input>
              </el-form-item>
              <el-form-item style="margin-right:0;margin-left: 10px;">
                <p class="page-submit-common-style-button" @click="userResetQueryRight" style="width:60px;margin-right:0;">重置</p>
              </el-form-item>
            </el-form>
            <el-table class="table-box" ref="rightUserTable" border :data="userTableListRight" @selection-change="userChangeRight" :row-key="getRowKeys">
              <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
              <el-table-column label="姓名" align="center" prop="userName" show-overflow-tooltip/>
              <el-table-column label="工号" align="center" prop="account" show-overflow-tooltip width="150"/>
              <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip width="270"/>
            </el-table>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="userTotalRight>0"
                        :total="userTotalRight"
                        :page.sync="userQueryParamsRight.page"
                        :limit.sync="userQueryParamsRight.pageSize"
                        @pagination="userGetListRight"/>
          </div>
        </div>
      </div>
      <div class="dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="addDialogAllOff">取消</p>
        <p class="dialog-footer-button-primary" @click="addUserButton">确定</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    findUserList
  } from "@/api/safetyCheck/index";
  import { getDeptDropList } from '@/api/commonality/permission'
  export default {
    name: 'userCheckComponent',
    props:{
      userCheckComponentData:{},
    },
    data(){
      return{
        userCheckComponentType:true,
        checkDataList:[],
        checkList:[],
        checkType:false,
        /*===================================人员选择相关===================================*/
        deptSelectList:[],
        userQueryParamsLeft:{
          page:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
          filtType:1,
        },
        userTableListLeft:[],
        userTotalLeft:0,
        userNumLeft:0,
        userIdsLeft:[],
        userQueryParamsRight:{
          page:1,
          pageSize:20,
          deptId:"",
          searchValue:"",
          filtType:2,
        },
        userTableListRight:[],
        userTotalRight:0,
        userNumRight:0,
        userIdsRight:[],
        //选中巡查人员列表
        dialogTableList:[],
        //选中页面人员列表数据
        dialogTableDataList:[],
        //选中的人员数据
        selectedUserIds:[],
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      //初始化
      initialize() {
        this.$set(this,'selectedUserIds',this.userCheckComponentData);
        this.listDepartments();
        this.userResetQueryLeft();
        this.userResetQueryRight();
      },
      //选择器
      checkboxChange(val){
        if(val[0]){
          let num = 0;
          for(let i=0;i<val.length;i++){
            if(val[i] == '4'){
              num++
            }
          }
          this.$set(this,'checkType',num != 0?true:false);
        }else{
          this.$set(this,'checkType',false);
        }
      },
      //窗口关闭
      addDialogAllOff(){
        this.$parent.tableButton(4)
      },
      addUserButton(){
        if(!this.selectedUserIds[0]){
          this.msgError('请勾选人员')
          return
        }
        if(this.userTotalRight>50){
          this.msgError('督导组最大成员数量为50人')
          return
        }
        this.$parent.tableButton(5,this.selectedUserIds)
      },
      /*===================================人员选择相关===================================*/
      //查询
      userHandleQueryLeft(){
        this.$set(this.userQueryParamsLeft,'page',1);
        this.$set(this,'userNumLeft',0);
        this.$set(this,'userIdsLeft',[]);
        if (this.$refs.leftUserTable){
          this.$refs.leftUserTable.clearSelection();
        }
        this.userGetListLeft();
      },
      //重置
      userResetQueryLeft(){
        this.$set(this,'userQueryParamsLeft',{
          page:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
          filtType:1
        });
        this.userHandleQueryLeft();
      },
      //查询接口
      userGetListLeft(){
        let self = this;
        let leftObj = JSON.parse(JSON.stringify(this.userQueryParamsLeft));
        leftObj.selectedUserIds = [];
        for(let i=0;i<self.selectedUserIds.length;i++){
          leftObj.selectedUserIds.push(self.selectedUserIds[i].userId);
        }
        findUserList(leftObj).then(response => {
          this.userTotalLeft = response.data.total;
          this.userTableListLeft = response.data.records;
        });
      },
      //查询
      userHandleQueryRight(){
        this.$set(this.userQueryParamsRight,'page',1);
        this.$set(this,'userNumRight',0);
        this.$set(this,'userIdsRight',[]);
        if(this.$refs.rightUserTable){
          this.$refs.rightUserTable.clearSelection();
        }
        this.userGetListRight();
      },
      //重置
      userResetQueryRight(){
        this.$set(this,'userQueryParamsRight',{
          page:1,
          pageSize:20,
          deptId:"",
          searchValue:"",
          filtType:2
        });
        this.userHandleQueryRight();
      },
      //查询接口
      userGetListRight(){
        let self = this;
        let rightObj = JSON.parse(JSON.stringify(this.userQueryParamsRight));
        rightObj.userIds = [];
        for(let i=0;i<self.selectedUserIds.length;i++){
          rightObj.userIds.push(self.selectedUserIds[i].userId);
        }
        findUserList(rightObj).then(response => {
          this.userTotalRight = response.data.total;
          this.userTableListRight = response.data.records;
        });
      },
      //穿梭按钮
      userArrowButton(type){
        let self = this;
        if(type == 1){
          //右至左
          if(self.$refs.rightUserTable.selection[0]){
            for(let i=0;i<self.$refs.rightUserTable.selection.length;i++){
              for(let o=0;o<self.selectedUserIds.length;o++){
                if(self.$refs.rightUserTable.selection[i].userId == self.selectedUserIds[o].userId){
                  self.selectedUserIds.splice(o,1);
                }
              }
            }
            self.$refs.rightUserTable.clearSelection();
            self.userHandleQueryLeft();
            self.userHandleQueryRight();
          }else{
            self.msgError('请先勾选右侧列表')
          }
        }else if(type == 2){
          //左至右
          if(self.$refs.leftUserTable.selection[0]){
            for(let i=0;i<self.$refs.leftUserTable.selection.length;i++){
              self.selectedUserIds.push({
                userId: self.$refs.leftUserTable.selection[i].userId,
                userType: self.$refs.leftUserTable.selection[i].userType,
                account: self.$refs.leftUserTable.selection[i].account,
                userName: self.$refs.leftUserTable.selection[i].userName,
                deptId: self.$refs.leftUserTable.selection[i].deptId,
                deptName: self.$refs.leftUserTable.selection[i].deptName,
              })
            }
            self.$refs.leftUserTable.clearSelection();
            self.userHandleQueryLeft();
            self.userHandleQueryRight();
          }else{
            self.msgError('请先勾选左侧列表')
          }
        }
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.id
      },
      userChangeLeft(selection){
        this.userNumLeft = selection.length;
        this.userIdsLeft = selection.map(item => item.userId);
      },
      userChangeRight(selection){
        this.userNumRight = selection.length;
        this.userIdsRight = selection.map(item => item.userId);
      },
      //获取学院列表
      listDepartments(){
        getDeptDropList({deptName:"",level:2,deptType:1}).then(response => {
          this.$set(this, 'deptSelectList', response.data)
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .userCheckComponent{
    overflow: hidden;
    .userCheckComponent-user-box{
      height:600px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .userCheckComponent-user-content-box{
        flex:1;
        display: flex;
        overflow: hidden;
        .dept-table-title-box{
          display: flex;
          padding:0 20px;
          background: rgba(1,131,250,0.1);
          p{
            flex:1;
            color:#0183FA;
            font-size:16px;
            line-height:40px;
          }
          p:nth-child(1){
            text-align: left;
          }
          p:nth-child(2){
            text-align: right;
          }
        }
        .dept-table-max-box{
          border: 1px solid #e0e0e0;
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          padding:20px;
          .form-index{
            .el-input__inner{
              border-right:none;
              padding-right:0;
            }
            .el-input-group__append{
              background: #fff;
              cursor: pointer;
              padding:0 10px;
            }
          }
          input{
            border: 1px solid #DCDFE6;
          }
        }
        .left-max-box{
          height:550px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          width:639px;
        }
        .right-max-box{
          height:550px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          width:639px;
        }
        .center-box{
          width:70px;
          p{
            display: block;
            width:60px;
            height:30px;
            line-height:30px;
            text-align: center;
            background: #fff;
            color:#0183FA;
            border-radius:4px;
            border:1px solid #0183FA;
            cursor: pointer;
            font-size:12px;
          }
          p:nth-child(1){
            margin:270px 5px 0;
          }
          p:nth-child(2){
            margin:14px 5px 0;
          }
          p:hover{
            background: #0183FA;
            color:#fff;
            border:1px solid #0183FA;
          }
        }
        ::v-deep .el-range-editor--small .el-range__icon{
          display: none;
        }
        ::v-deep .el-range-editor--small .el-range__close-icon{
          display: none;
        }
        ::v-deep .el-date-editor .el-range-input{
          width:45%;
        }
        ::v-deep .el-range-editor--small .el-range-separator{
          line-height:30px;
        }
        ::v-deep .el-input-group__append, .el-input-group__prepend{
          background-color: #fff;
        }
        .form-index{
          ::v-deep .el-input--medium .el-input__inner{
            border:1px solid #DCDFE6;
            border-right:none;
            padding-right:0;
          }
          ::v-deep .el-input-group__append{
            padding:0 10px;
            cursor: pointer;
          }
        }
      }
      .dialog-footer-box{
        display: flex;
      }
    }
    ::v-deep .el-dialog__body{
      padding: 30px 20px!important;
    }
  }
</style>
