<template>
  <rt-view>
    <rt-header>
      <rt-navbar></rt-navbar>
      <rt-search
        :placeholder="'用户名'"
        :auto-focus="true"
        :show-search-button="true"
        v-model="queryValue"
        @on-search="searchClick"
      ></rt-search>
    </rt-header>
    <rt-content>
      <rt-list ref="listWrapper" :fetch="fetchData">
        <div slot="listHeader">
          <!-- 最近选择人员 -->
          <div class="item-divider" v-if="userWasSelected" style="color:#888;font-size:12px">最近选择人员</div>
          <div
            class="rt-userlookup-item"
            v-for="(v, index) in userWasSelected"
            :key="v.id"
            @click="selectData(v)"
            v-if="userWasSelected"
          >
            <div
              class="rt-object-avatar"
              :style="getBackgroundColor(index)"
            >{{getAvatarName(v.name)}}</div>
            <div class="rt-object-text">
              <div class="username-01">{{v.name}}</div>
              <div class="objectname-01">部门 : {{v.tblbusinessunitidname}}</div>
            </div>
          </div>
          <!-- 所有人员 -->
          <div class="item-divider" style="color:#888;font-size:12px">所有人员</div>
        </div>
        <rt-list-item
          slot-scope="{row, index}"
          @click.native="selectData(row)"
          class="rt-userlookup-item"
          name="index"
        >
          <div
            class="rt-object-avatar"
            :style="getBackgroundColor(index)"
          >{{getAvatarName(row.name)}}</div>
          <div class="rt-object-text">
            <div class="username-01">{{row.name}}</div>
            <div class="objectname-01">部门 : {{row.tblbusinessunitidname}}</div>
          </div>
        </rt-list-item>
      </rt-list>
    </rt-content>
  </rt-view>
</template>

<script>
import eventBus from '../../eventBus.js';
export default {
  data() {
    return {
      paramslist: {
        '@queryValue': ''
      },
      avatarColors: ['#2ec7c9', '#feb358', '#33bc98', '#b6a2de'],
      moduleName: this.$route.params.modulename,
      userWasSelected: [],
      isFiltered: this.$route.params.isfiltered,
      queryValue: ''
    };
  },
  methods: {
    fetchData(page) {
      let vm = this;
      // 读取缓存，获取常用选择人员列表
      let wasSelected = localStorage.getItem(vm.moduleName + 'WasSelected_5bf99df1-dc49-4023-a34a-7bd80a42d6bb');
      vm.userWasSelected = !rt.isNull(wasSelected) ? JSON.parse(wasSelected) : [];
      let apiUrl = 'api/DataService';
      if (vm.isFiltered == 'true') {
        apiUrl += '/FilteredQuery';
      } else {
        apiUrl += '/Query';
      }
      return rt
        .post(apiUrl, {
          GetDataName: 'userinfo.GetAllUserInfo',
          Paramslist: vm.paramslist,
          Orderby: 'name desc',
          PageSize: page.pageSize,
          PageIndex: page.pageIndex
        })
        .then(resp => {
          let data = JSON.parse(decodeURIComponent(resp));
          return data.DataList;
        });
    },
    selectData(item) {
      // 保存到常用选择人员列表：合并之前已缓存的数据，并取不重复的Top5
      if (!rt.isNull(item)) {
        this.userWasSelected = [item].concat(this.userWasSelected);
        this.userWasSelected = _.take(_.uniqBy(this.userWasSelected, 'id'), 5);
      }
      let str = this.moduleName + 'WasSelected_5bf99df1-dc49-4023-a34a-7bd80a42d6bb';
      localStorage.setItem(str, JSON.stringify(this.userWasSelected));
      eventBus.$emit('choose-userWithFrequent' + this.moduleName, item);
      this.$bus.$emit('choose-userWithFrequent' + this.moduleName, item);
      //调用router回退页面
      this.$router.go(-1);
    },
    searchClick(queryValue) {
      this.paramslist = {
        '@queryValue': queryValue
      };
      this.$refs.listWrapper.loadData();
    },
    getAvatarColor(index) {
      let i = index % 4;
      return this.avatarColors[i];
    },
    getAvatarName(name) {
      if (rt.isNull(name)) {
        return '';
      }
      return name.length <= 2 ? name : name.substring(1, 3);
    },
    getBackgroundColor(index) {
      return {
        background: this.getAvatarColor(index)
      };
    }
  }
};
</script>

<style lang="less" scoped>
.rt-userlookup-item {
  height: 55px;
  padding-left: 15px;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
  padding-top: 15px;
}
.rt-userlookup-item .rt-object-avatar {
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  float: left;
}
.rt-userlookup-item .rt-object-text {
  float: left;
  margin-left: 15px;
}
.rt-userlookup-item .username-01 {
  color: #222222;
  font-size: 14px;
}
.rt-userlookup-item .objectname-01 {
  color: #888888;
  font-size: 12px;
}
.item-divider {
  min-height: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  background-color: #f6f6f6;
  font-size: 14px;
}
</style>


