<template>
  <div class="sui-slider" v-bind:id="id?id:'userSelector'">
    <div class="sui-slider-main">
      <div class="sui-slider-title" style="z-index: 1933">
        <h2>
          <span class="sui-slider-title-text">选择人员</span>
        </h2>
        <span class="sui-icons sui-icons-close sui-slider-title-x"></span>
      </div>
      <div class="sui-slider-content" style="position: absolute; top: 0; left: 0; padding-top: 80px; padding-bottom: 70px; width: 100%; height: 100%;">
        <div class="oa-ulist-main">
          <div class="oa-ulist-l">
            <div class="oa-ulist-title clearfix" v-if="statusFlag==1">
              <div class="oa-ulist-title-l-single">
                <el-input v-model="searchVal" @enter="doSearch" @change="doKeySearch" placeholder="请输入..." size="small">
                  <i id="userSearch1" style="cursor: pointer;" slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </div>
            </div>
            <div class="oa-ulist-title clearfix" v-else>
              <div class="oa-ulist-title-r" @click="userSelAll">全选</div>
              <div class="oa-ulist-title-l">
                <el-input v-model="searchVal" @on-enter="doSearch" @on-change="doKeySearch" placeholder="请输入..." style="width: 215px" size="small">
                  <i id="userSearch2" style="cursor: pointer;" slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </div>
            </div>

            <div class="oa-ulist-lcon">
              <ul class="oa-ulist-list">
                <template v-if="userListFilterData && userListFilterData.length > 0">
                  <li v-for="item in userListFilterData" @click="selectUserHandler(item)"  :key="item.id" :class="{'oa-ulist-list-sed': isContainsInSed(item.id)}">
                    <img  class="oa-ulist-list-p" :src="$store.state.imgBaseUrl + item.logo" v-if="item.logo">
                    <img class="oa-ulist-list-p" src="../../../static/img/photo-default.png" alt="头像" v-else>
                    <span class="st-icons st-icons-success oa-ulist-list-i"></span>
                    <h3>{{ item.username }}</h3>
                    <p class="st-ellipsis">{{ item.deptName }}<span v-if="item.duty">&nbsp;-&nbsp;{{item.duty}}</span></p>
                  </li>
                </template>
                <template v-else>
                  <li class="oa-ulist-liste">无数据</li>
                </template>
              </ul>
            </div>
          </div>
          <div class="oa-ulist-r">
            <div class="oa-ulist-title clearfix">
              <div class="oa-ulist-title-r" @click="userSedClear">清空</div>
              <div class="oa-ulist-title-l">
                <span>已选人数：{{ sumSed }}</span>
              </div>
            </div>
            <div class="oa-ulist-lcon">
              <ul class="oa-ulist-list">
                <template v-if="userSedDataList && userSedDataList.length > 0">
                  <li v-for="item in userSedDataList" :key="item.id"
                      @click="deleteUserHandler(item)">
                    <img  class="oa-ulist-list-p" :src="$store.state.imgBaseUrl + item.logo" v-if="item.logo">
                    <img class="oa-ulist-list-p" src="../../../static/img/photo-default.png" alt="头像" v-else>
                    <!--<img class="oa-ulist-list-p" src="../../../static/img/photo-default.png" alt="头像">-->
                    <span class="st-icons st-icons-del oa-ulist-list-i2"></span>
                    <h3>{{ item.username }}</h3>
                    <p class="st-ellipsis">{{ item.deptName }}<span v-if="item.duty">&nbsp;-&nbsp;{{item.duty}}</span></p>
                  </li>
                </template>
                <template v-else>
                  <li class="oa-ulist-liste">暂无选择</li>
                </template>
              </ul>
            </div>
          </div>
        </div>
        <div class="oa-ulist-bottom" style="bottom: 25px;">
          <div style="float: left; position: relative; margin-left: 20px;">
            <el-pagination small :total="pageTotal" :current="pageIndex" :page-size="pageSize" @size-change="signUserListsTageToSize"
                           @current-change="signUserListsTageTo" layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 30, 40]"></el-pagination>
          </div>
          <div style="float: right; margin-right: 20px;">
            <el-button @click="userListSubmit" type="primary" style="width: 200px;" size="small">确&nbsp;&nbsp;定</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="sui-slider-cover"></div>
    <!-- child slider -->
  </div>
</template>
<script>
import {removeOrAddEleFormArrayObj, trimStr} from '@/utils/util.js';
let searchValue = '', searchTimeout = null;
export default {
  props: ['userListSedData', 'id', 'statusFlag', 'selectedUser', 'selectedFlag', 'documentFlag'],
  data () {
    return {
      searchVal: '',
      // 所有用户
      userListAllData: [],
      // 临时存储用户
      usertempAllData: [],
      // 过滤后的用户
      userListFilterData: [],
      // 选中值经常变化，避免直接操作props
      userSedDataList: [],
      // 判断点击的标识
      flag: 1,

      pageIndex: 1,
      pageSize: 20,
      pageTotal: 0
    }
  },
  computed: {
    sumSed () {
      return this.userSedDataList.length;
    }
  },
  watch: {
    userListSedData () {
      let _this = this;
      _this.searchVal = '';
      searchValue = '';
      _this.userListFilterData = _this.userListAllData;
      let aoParam = [];
      for (let i in _this.userListSedData) {
        aoParam.push({
          id: _this.userListSedData[i].id
        });
      }
      if (aoParam && aoParam.length > 0) {
        _this.axios.post('/core/auth/user/doQueryPartWeb',
          [{
            users: aoParam
          }]
        ).then(function (response) {
          if (response) {
            for (let i in response.data.data) {
              if (response.data.data[i] === null) {
                // 如果查出来的数据里面有空对象，直接从数组里面删掉这个null
                response.data.data.splice(i, 1);
              }
            }
            _this.userSedDataList = response.data.data;
          }
          _this.getUsersInfo();
        }).catch(function () {
          _this.userSedDataList = [];
          _this.getUsersInfo();
        });
      } else {
        _this.userSedDataList = [];
        _this.getUsersInfo();
      }
    },

    selectedFlag () {
      let _this = this;
      if (_this.userSedDataList.length <= 0) {
        setTimeout(function () {
          _this.userSedDataList = _this.userListAllData.filter(function (obj) {
            for (let item of _this.selectedUser) {
              if (item === obj.id) {
                return true;
              }
            }
          });
        }, 100)
      } else {
        _this.userSedDataList = _this.userListAllData.filter(function (obj) {
          for (let item of _this.selectedUser) {
            if (item === obj.id) {
              return true;
            }
          }
        });
      }
    }
  },
  mounted () {
    let _this = this;
    this.getUsersInfo();
    $('#userSearch1').on('click', function () {
      _this.doKeySearch();
    });
    $('#userSearch2').on('click', function () {
      _this.doKeySearch();
    });
  },
  methods: {
    doKeySearch () {
      let _this = this;
      if (!_this.searchVal) { _this.searchVal = ''; }
      _this.searchVal = trimStr(_this.searchVal);
      if (_this.searchVal === searchValue) { return; }
      if (searchTimeout) { clearTimeout(searchTimeout); }
      let reg = /^[a-zA-Z0-9_\-\u4e00-\u9fa5]+$/;
      if (reg.test(_this.searchVal) || _this.searchVal === '') {
        searchTimeout = setTimeout(function () {
          _this.doSearchUser(_this.searchVal);
        }, 600);
      }
    },
    doSearch () {
      let _this = this;
      if (!_this.searchVal) { _this.searchVal = ''; }
      _this.searchVal = trimStr(_this.searchVal);
      if (_this.searchVal === searchValue) { return; }
      let reg = /^[a-zA-Z0-9_\-\u4e00-\u9fa5]+$/;
      if (reg.test(_this.searchVal) || _this.searchVal === '') {
        if (searchTimeout) { clearTimeout(searchTimeout); }
        _this.doSearchUser(_this.searchVal);
      }
    },
    doSearchUser (sval) {
      let _this = this;
      if (sval === '') {
        searchValue = '';
      } else {
        searchValue = sval;
      }
      _this.pageIndex = 1;
      _this.getUsersInfo();
    },
    // 选中或删除人员
    selectUserHandler (oUser) {
      if (this.statusFlag === 1) {
        this.userSedDataList = [oUser];
      } else {
        this.userSedDataList = removeOrAddEleFormArrayObj(this.userSedDataList, oUser, 'id');
      }
    },
    // 删除已选中人员
    deleteUserHandler (oUser) {
      this.userSedDataList = removeOrAddEleFormArrayObj(this.userSedDataList, oUser, 'id');
    },
    // 判断是否在已选列表中
    isContainsInSed (userId) {
      let sedData = this.userSedDataList, flag = false;
      if (sedData && sedData.length > 0) {
        for (let i = 0; i < sedData.length; i++) {
          if (sedData[i].id === userId) {
            flag = true;
            break;
          }
        }
      }
      return flag;
    },
    // 清空选中
    userSedClear () {
      let userSedDataListA = [];
      this.userSedDataList = userSedDataListA;
    },
    // 全选
    userSelAll () {
      let _this = this;
      let listData = _this.userListFilterData, aNew = [];
      for (let i = 0; i < listData.length; i++) {
        if (!_this.isContainsInSed(listData[i].id)) {
          aNew.push(listData[i]);
        }
      }
      if (aNew && aNew.length > 0) {
        this.userSedDataList = this.userSedDataList.concat(aNew);
      }
    },
    // 确定提交
    userListSubmit () {
      for (let i = 0; i < this.userSedDataList.length; i++) {
        this.userSedDataList[i].person_name = this.userSedDataList[i].username;
        this.userSedDataList[i].person_no = this.userSedDataList[i].id;
        if (this.documentFlag) {
          this.userSedDataList[i].image = this.userSedDataList[i].logo;
        }
      }
      this.$emit('userSelectorSubmit', this.userSedDataList);
    },

    signUserListsTageTo (iIndex) {
      this.pageIndex = iIndex;
      this.getUsersInfo();
    },
    signUserListsTageToSize (iSize) {
      this.pageSize = iSize;
      this.getUsersInfo();
    },
    // 获取所有用户信息
    getUsersInfo () {
      let _this = this;
      _this.axios.post('/core/auth/user/allUserInfoWeb',
        [{
          object: {
            username: _this.searchVal,
            deptName: _this.searchVal,
            valid_flag: '1'
          },
          pageIndex: _this.pageIndex,
          pageSize: _this.pageSize
        }]
      ).then(function (response) {
        if (response) {
          let aoUsers = response.data.data.rows;
          _this.userListAllData = aoUsers;
          _this.usertempAllData = aoUsers;
          _this.userListFilterData = aoUsers;
          _this.pageTotal = response.data.data.total;
        }
      }).catch(function () {
      });
    }
  }
}
</script>
<style>
  .oa-ulist-main {
    display: flex;
    position: relative;
    height: 100%; width: 560px; margin: 0 auto;
  }
  .oa-ulist-l, .oa-ulist-r { height: 100%; position: relative; border: 1px solid #ccc; }
  .oa-ulist-l { width: 300px; }
  .oa-ulist-r { width: 300px; margin-left: 20px; }
  .oa-ulist-title {
    position: absolute; top: 0; left: 0; z-index: 2;
    width: 100%; height: 35px;
    border-bottom: 1px solid #ccc;
  }
  .oa-ulist-title-l {
    width: 210px;
    margin-right: 60px; padding-top: 1px;
    color: #333; text-align: left;
  }

  .oa-ulist-title-l-single {
    width: 260px;
    margin-right: 60px; padding-top: 1px;
    color: #333; text-align: left;
  }
  .oa-ulist-title-l > span { display: inline-block; margin-top: 5px; padding-left: 10px; }
  .oa-ulist-title-r {
    float: right;
    width: 50px; height: 34px; line-height: 34px; vertical-align: middle;
    border-left: 1px solid #ccc;
    text-align: center; color: #333; cursor: pointer;
  }
  .oa-ulist-title .ivu-input {
    border: 0 !important;
    box-shadow: none !important;
  }
  .oa-ulist-lcon {
    position: absolute; top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%; padding-top: 35px;
  }
  .oa-ulist-list { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; }
  .oa-ulist-liste {
    padding: 10px 0;
    color: #666; text-align: center;
  }
  .oa-ulist-list > li {
    position: relative;
    padding: 5px 40px 0 60px;
    height: 50px;
    cursor: pointer; text-align: left;
  }
  .oa-ulist-list > li:hover { background-color: #fbfbfb; }
  .oa-ulist-list-p {
    position: absolute; top: 5px; left: 10px;
    width: 36px; height: 36px;
    border-radius: 18px;
  }
  .oa-ulist-list-sed { background-color: #f5f5f5; }
  .oa-ulist-list-i {
    display: none;
    position: absolute; top: 15px; right: 20px;
  }
  .oa-ulist-list-i2 { position: absolute; top: 15px; right: 20px; }
  .oa-ulist-list-sed .oa-ulist-list-i { display: block; }
  .oa-ulist-list > li > h2 { color: #333; }
  .oa-ulist-list > li > p { color: #666; font-size: 12px;
    height: 20px;
    line-height: 20px;
    vertical-align: middle; }
  .oa-ulist-bottom {
    position: absolute; bottom: 20px; left: 0;
    width: 100%;
    overflow: hidden;
  }
  .oa-ulist-bottom .el-pagination {
    float: none;
  }
  .oa-ulist-title-l .el-input__inner {
    border: none;
  }
  .oa-ulist-title-l-single .el-input__inner {
    border: none;
  }
</style>
