<template>
  <el-dialog class="researchGroupManage-userDialog"
             :close-on-click-modal="false"
             title="选择成员" :visible.sync="userDialogType" v-if="userDialogType"
             @close="userDialogOff" width="1573px" append-to-body>
    <div class="user-dialog-max-big-box">
      <div class="user-dialog-max-left-box">
        <div class="title-top-box">
          <p>待选人员</p>
          <p>{{leftCheckNum}}/{{leftMaxUserNum}}</p>
        </div>
        <div class="table-max-big-box">
          <div class="page-form-title-box">
            <el-form :model="leftQueryParams" class="form-box" ref="queryForm"
                     :inline="true" style="width:100%;">
              <el-form-item label="" prop="searchValue">
                <el-input
                  maxLength="30"
                  v-model="leftQueryParams.searchValue"
                  placeholder="搜索姓名/学号/手机号"
                  style="width: 220px"
                />
              </el-form-item>
              <el-form-item label="" prop="deptId">
                <el-select v-model="leftQueryParams.deptId" placeholder="部门" style="width: 140px">
                  <el-option
                    v-for="dict in sectionOptionList"
                    :key="dict.deptId"
                    :label="dict.deptName"
                    :value="dict.deptId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="userType">
                <el-select v-model="leftQueryParams.userType" placeholder="类型" style="width: 100px">
                  <el-option
                    v-for="dict in classOptionList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <p class="page-inquire-common-style-button" @click="leftHandleQuery">查询</p>
              <p class="page-reset-common-style-button" @click="leftResetQuery">重置</p>
            </el-form>
          </div>
          <div class="page-content-box">
            <el-table class="table-box table-null-img-20" border :data="leftDataList"  ref="leftTable"
                      @selection-change="userChangeLeft" :row-key="getRowKeys">
              <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
              <el-table-column label="姓名" prop="userName"  show-overflow-tooltip/>
              <el-table-column label="联系电话" prop="mobile" width="150" show-overflow-tooltip/>
              <el-table-column label="所在部门" prop="deptName" width="220" show-overflow-tooltip/>
            </el-table>
            <pagination :page-sizes="[10, 20]"
                        v-show="leftTotal>0"
                        :total="leftTotal"
                        :page.sync="leftQueryParams.page"
                        :limit.sync="leftQueryParams.pageSize"
                        @pagination="leftGetList"
            />
          </div>
        </div>
      </div>
      <div class="user-dialog-max-center-box">
        <p class="el-icon-arrow-right" @click="userAdd"></p>
        <p class="el-icon-arrow-left" @click="userDel"></p>
      </div>
      <div class="user-dialog-max-right-box">
        <div class="title-top-box">
          <p>已选人员</p>
          <p>{{rightCheckNum}}/{{userList.length}}</p>
        </div>
        <div class="table-max-big-box">
          <div class="page-form-title-box">
            <el-form :model="rightQueryParams" class="form-box" ref="queryForm"
                     :inline="true" style="width:100%;">
              <el-form-item label="" prop="searchValue">
                <el-input
                  maxLength="30"
                  v-model="rightQueryParams.searchValue"
                  placeholder="搜索姓名/学号/手机号"
                  style="width: 220px"
                />
              </el-form-item>
              <el-form-item label="" prop="deptId">
                <el-select v-model="rightQueryParams.deptId" placeholder="部门" style="width: 140px">
                  <el-option
                    v-for="dict in sectionOptionList"
                    :key="dict.deptId"
                    :label="dict.deptName"
                    :value="dict.deptId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="userType">
                <el-select v-model="rightQueryParams.userType" placeholder="类型" style="width: 100px">
                  <el-option
                    v-for="dict in classOptionList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <p class="page-inquire-common-style-button" @click="rightHandleQuery">查询</p>
              <p class="page-reset-common-style-button" @click="rightResetQuery">重置</p>
            </el-form>
          </div>
          <div class="page-content-box">
            <el-table class="table-box table-null-img-20" border :data="rightDataList" ref="rightTable"
                      @selection-change="userChangeRight" :row-key="getRowKeys">
              <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
              <el-table-column label="姓名" prop="userName"  show-overflow-tooltip/>
              <el-table-column label="联系电话" prop="mobile" width="150" show-overflow-tooltip/>
              <el-table-column label="所在部门" prop="deptName" width="220" show-overflow-tooltip/>
            </el-table>
            <pagination :page-sizes="[10, 20]"
                        v-show="rightTotal>0"
                        :total="rightTotal"
                        :page.sync="rightQueryParams.page"
                        :limit.sync="rightQueryParams.pageSize"
                        @pagination="rightGetList"
            />
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
      <p class="dialog-footer-button-null"></p>
      <p class="dialog-footer-button-info" @click="userDialogOff">取消</p>
      <p class="dialog-footer-button-primary" @click="dialogSubmit">确认</p>
      <p class="dialog-footer-button-null"></p>
    </div>
  </el-dialog>
</template>

<script>
  import { systemUserSelectByPage,getDeptDropList } from "@/api/commonality/permission";
  export default {
    name: 'addDialog',
    props:{
      addDialogData:{},
    },
    data(){
      return{
        userDialogType:false,
        userList:[],
        //左侧数据
        leftQueryParams:{
          page:1,
          pageSize:20,
          searchValue:'',
          deptId:'',
          userType:'',
        },
        leftDataList:[],
        leftTotal:0,
        leftCheckNum:0,
        leftMaxUserNum:0,
        leftCheckUserIds:[],
        //右侧数据
        rightQueryParams:{
          page:1,
          pageSize:20,
          searchValue:'',
          deptId:'',
          userType:'',
        },
        rightDataList:[],
        rightTotal:0,
        rightCheckNum:0,
        rightMaxUserNum:0,
        rightCheckUserIds:[],
        //部门列表
        sectionOptionList:[
          {label:"部门名称一号",value:'1'},
        ],
        //类型列表
        classOptionList:[
          {label:"教职工",value:'1'},
          {label:"学生",value:'2'},
        ],
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //获取二级单位列表
      getDeptDropList(){
        getDeptDropList({level:2 }).then(response => {
          this.$set(this,'sectionOptionList',response.data);
        });
      },
      //新增用户
      userAdd(){
        let self = this;
        if(self.leftCheckUserIds[0]){
          for(let i=0;i<self.leftCheckUserIds.length;i++){
            self.userList.push(self.leftCheckUserIds[i])
          }
          this.$refs.leftTable.clearSelection()
          this.$refs.rightTable.clearSelection()
          this.leftGetList();
          this.rightGetList();
        }
      },
      //删除用户
      userDel(){
        let self = this;
        if(self.rightCheckUserIds[0]){
          for(let i=0;i<self.rightCheckUserIds.length;i++){
            for(let o=0;o<self.userList.length;o++){
              if(self.rightCheckUserIds[i] == self.userList[o]){
                self.userList.splice(o,1)
                o--
              }
            }
          }
          this.$refs.leftTable.clearSelection()
          this.$refs.rightTable.clearSelection()
          this.leftGetList();
          this.rightGetList();
        }
      },
      //开启
      userDialogOpen(){
        this.getDeptDropList();
        this.$set(this,'userList',this.addDialogData.userList);
        this.leftGetList();
        this.rightGetList();
        this.$set(this,'userDialogType',true);
      },
      //关闭
      userDialogOff(){
        this.$set(this,'userDialogType',false);
      },
      //提交
      dialogSubmit(){
        let self = this;
        let list = [];
        for(let i=0;i<self.userList.length;i++){
          list.push(
            {
              userId:self.userList[i],
              isStart:true,
            }
          )
        }
        this.$parent.setUserList(self.userList,list)
        this.$set(this,'userDialogType',false);
      },
      //左侧查询相关
      leftHandleQuery(){
        this.$set(this.leftQueryParams,'page',1);
        this.leftGetList();
      },
      leftResetQuery(){
        this.$set(this,'leftQueryParams',{
          page:1,
          pageSize:20,
          searchValue:null,
          deptId:null,
          userType:null,
        });
        this.leftGetList();
      },
      leftGetList(){
        let obj = JSON.parse(JSON.stringify(this.leftQueryParams))
        obj.excludeUserIds = this.userList;
        systemUserSelectByPage(obj).then(response => {
          this.$set(this,'leftCheckNum',0);
          this.$set(this,'leftCheckUserIds',[]);
          this.$set(this,'leftDataList',response.data.records);
          this.$set(this,'leftTotal',response.data.total);
        });
      },
      userChangeLeft(selection){
        this.leftCheckNum = selection.length;
        this.leftCheckUserIds = selection.map(item => item.userId);
      },
      //右侧查询相关
      rightHandleQuery(){
        this.$set(this.rightQueryParams,'page',1);
        this.rightGetList();
      },
      rightResetQuery(){
        this.$set(this,'rightQueryParams',{
          page:1,
          pageSize:20,
          searchValue:null,
          deptId:null,
          userType:null,
        });
        this.rightGetList();
      },
      rightGetList(){
        let obj = JSON.parse(JSON.stringify(this.rightQueryParams))
        obj.userIds = this.userList[0] ? this.userList : ['-999999999999999999'];
        systemUserSelectByPage(obj).then(response => {
          this.$set(this,'rightCheckNum',0);
          this.$set(this,'rightCheckUserIds',[]);
          this.$set(this,'rightDataList',response.data.records);
          this.$set(this,'rightTotal',response.data.total);
        });
      },
      userChangeRight(selection){
        this.rightCheckNum = selection.length;
        this.rightCheckUserIds = selection.map(item => item.userId);
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.userId
      },
    }
  }
</script>

<style lang="scss">
  .researchGroupManage-userDialog{
    .user-dialog-max-big-box{
      display: flex;
      padding:0 9px;
      .user-dialog-max-left-box{
        height:518px;
        width:700px;
        display: flex;
        flex-direction: column;
        .title-top-box{
          height:40px;
          display: flex;
          background: rgba(1,131,250,0.1);
          padding:0 48px 0 21px;
          p{
            color:#0183FA;
            font-size:16px;
            line-height:40px;
          }
          p:nth-child(2){
            flex:1;
            text-align: right;
          }
        }
        .table-max-big-box{
          display: flex;
          flex-direction: column;
          flex:1;
          border:1px solid #E0E0E0;
          overflow: hidden;
        }
      }
      .user-dialog-max-center-box{
        width:74px;
        display: flex;
        flex-direction: column;
        p{
          cursor: pointer;
          margin:0 22px 40px;
          width:30px;
          height:30px;
          line-height: 30px;
          text-align: center;
          border-radius:50%;
          background-color: #0183FA;
          color:#fff;
        }
        p:nth-child(1){
          margin-top:200px;
        }
      }
      .user-dialog-max-right-box{
        height:518px;
        width:700px;
        display: flex;
        flex-direction: column;
        .title-top-box{
          height:40px;
          display: flex;
          background: rgba(1,131,250,0.1);
          padding:0 48px 0 21px;
          p{
            color:#0183FA;
            font-size:16px;
            line-height:40px;
          }
          p:nth-child(2){
            flex:1;
            text-align: right;
          }
        }
        .table-max-big-box{
          display: flex;
          flex-direction: column;
          flex:1;
          border:1px solid #E0E0E0;
          overflow: hidden;
        }
      }
    }
  }
</style>
