<template>
  <rt-view>
    <rt-header>
      <rt-navbar>
        <rt-navbar>
          <rt-button @click="confirm()" slot="right" type="sub" text>确定</rt-button>
        </rt-navbar>
      </rt-navbar>
      <rt-search :placeholder="'用户名'" :auto-focus="true" :show-search-button="true" @on-search="searchClick" v-model="queryValue"></rt-search>
    </rt-header>
    <rt-content class="userWithFrequentLookupView">
      <rt-list ref="listWrapper" :fetch="fetchData">
        <div slot="listHeader">
          <!-- 最近选择人员 -->
          <div class="item item-divider" v-if="userWasSelected" style="color:#888;font-size:12px">最近选择人员</div>
          <rt-cell-group hasPadding>
            <rt-checkbox-group v-model="inlineDescListValue" :max="max">
              <rt-checkbox position="right" v-for="(option, index) in inlineDescList" :key="index" :option="option">
                <div class="rt-checkbox-xx">
                  <p>{{option.label}}</p>
                  <span>{{option.inlineDesc}}</span>
                </div>
              </rt-checkbox>
            </rt-checkbox-group>
          </rt-cell-group>
          <!-- 所有人员 -->
          <div class="item item-divider" style="color:#888;font-size:12px">所有人员</div>
          <rt-cell-group hasPadding>
            <rt-checkbox-group v-model="inlineDescListValue" :max="max">
              <rt-checkbox position="right" v-for="(option, index) in inlineDescList2" :key="index" :option="option">
                <div class="rt-checkbox-xx">
                  <p>{{option.label}}</p>
                  <span>{{option.inlineDesc}}</span>
                </div>
              </rt-checkbox>
            </rt-checkbox-group>
          </rt-cell-group>
        </div>
      </rt-list>
    </rt-content>
    <rt-footer>
      <div style="height: 44px;
                  text-align: center;
                  line-height: 44px;
                  border-top: 1px solid #ccc;
                  color: #4a90e2;"
            @click="reset()">
        <i style="padding-right:10px" class="rt-icon-refresh" />重置</div>
    </rt-footer>
  </rt-view>
</template>

<script>
  import {
    XButton,
    Checklist
  } from 'vux';
  export default {
    components: {
      XButton,
      Checklist
    },
    data() {
      return {
        dataList: [],
        paramslist: {
          '@queryValue': ''
        },
        fullValues: [],
        moduleName: this.$route.params.modulename,
        userWasSelected: [], //缓存的选中人员列表数据
        userSelected: [], //选中的人员列表数据
        inlineDescList: [], //最近选择人员
        inlineDescList2: [], //全部人员列表
        inlineDescListValue: [], //已选中的人员列表(根据路由传入)
        isFiltered: this.$route.params.isfiltered,
        ids: JSON.parse(this.$route.params.ids),
        multi: this.$route.params.multi,
        max: Infinity,
        queryValue: ''
      };
    },
    mounted() {
      if (this.multi == false) {
        this.max = 1;
      }
      if (!rt.isNull(this.ids)) {
        this.inlineDescListValue = this.ids;
      }
    },
    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) : [];
        vm.inlineDescList = [];
        vm.userWasSelected.forEach(item => {
          vm.inlineDescList.push({
            value: item.id,
            label: item.name,
            inlineDesc: item.tblbusinessunitidname
          });
        });
        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));
            if (page.pageIndex === 1) {
              vm.dataList = data.DataList;
            } else {
              vm.dataList = vm.dataList.concat(data.DataList);
            }
            vm.inlineDescList2 = [];
            vm.dataList.forEach(item => {
              vm.inlineDescList2.push({
                value: item.id,
                label: item.name,
                inlineDesc: item.tblbusinessunitidname
              });
            });
            return data.DataList;
          });
      },
      confirm() {
        this.selectData().then(resp => {
          if (!rt.isNull(this.userSelected)) {
            this.userWasSelected = this.userSelected.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));
          this.$bus.$emit('choose-user', _.uniqBy(this.userSelected, 'id'));
          //调用router回退页面
          this.$router.back();
        });
      },
      selectData() {
        // 保存到常用选择人员列表：合并之前已缓存的数据，并取不重复的Top5
        // this.fullValues = this.$refs.demoObject.getFullValue();
        this.userSelected = [];
        let promises = [];
        this.inlineDescListValue.forEach(item => {
          promises.push(
            rt.get('api/UserInfo/GetUserInfoDetail?id=' + item).then(resp => {
              // 由于getFullValue方法的bug，造成人员为加载出来时id和name重复，所以根据id查数据，使用name代替item.label
              this.userSelected.push({
                id: item,
                name: resp.name,
                tblbusinessunitidname: resp.BusinessUnitIdName
              });
            })
          );
        });
        return Promise.all(promises).then(() => {
          return true;
        });
      },
      searchClick(queryValue) {
        this.paramslist = {
          '@queryValue': queryValue
        };
        this.$refs.listWrapper.loadData();
      },
      reset() {
        this.inlineDescListValue = [];
      }
    }
  };
</script>

<style lang="less" scoped>
  .rt-cell-group {
    padding: 0 15px;
    .rt-checkbox {
      min-height: 50px;
      &:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: 1px;
        left: -15px;
        right: -15px;
        height: 1px;
        background-color: #f0f0f0;
      }
    }
  }
  .userWithFrequentLookupView {
    .checklist/deep/.weui-cell__bd,
    .rt-checkbox-label p {
      color: #222222;
      font-size: 14px;
    }
    .checklist/deep/.vux-label-des0,
    .rt-checkbox-label span {
      color: #888888;
      font-size: 12px;
    }
    .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%; // display: inline-block;
      width: 40px;
      height: 40px;
      font-size: 12px;
      line-height: 40px;
      vertical-align: middle;
      text-align: center;
      float: left;
    }
    .item-divider {
      min-height: 10px;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 15px;
      background-color: #f6f6f6;
      font-size: 14px;
    }
    .weui-icon {
      font-size: 12px !important;
    }
  }
</style>


