<template>
  <div class="OtherUser">
    <!-- <AiTopFixed>
      <div class="seachObjs">
        <u-search v-model="keyword" :clearabled="true" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#E2E8F1" color="#666" height="58" @search="getListInit" @clear="handerClear"></u-search>
      </div>
    </AiTopFixed> -->
    <div class="user-list">
      <div class="item" v-for="(item, index) in list" :key="index" @click="toOtherSta(item.memberId, item.wxUserId)" >
        <div class="left">
          <img src="./components/img/user-icon.png" alt=""><AiOpenData v-if="item.wxUserId" type="userName" :openid="item.wxUserId" style="display:inline-block;" />
        </div>
        <div class="right">
          <span :class="item.status == 1 ? '' : 'color-F5A319'">{{item.status == 1 ? '今日已上报' : '今日未上报'}}</span><img src="./components/img/right-icon.png" alt="">
        </div>
      </div>
      <AiEmpty v-if="!list.length"/>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'OtherUser',
  data() {
    return {
      keyword: '',
      current: 1,
      girdMemberId: '',
      list: [],
      total: 1
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad(option) {
    this.girdMemberId = option.girdMemberId
    this.getUserList()
  },
  onShow() {
    document.title = '其他成员'
  },
  methods: {
    toOtherSta(id, wxUserId) {
      uni.navigateTo({ url: `./OtherStatistics?id=${id}&wxUserId=${wxUserId}`})
    },
    handerClear() {
      this.keyword = ''
      this.getListInit()
    },
    getListInit() {
      this.current = 1
      this.total = 1
      this.list = []
      this.getUserList()
    },
    getUserList() {
      if(this.list.length >= this.total) {
        return
      }
      this.$http.post(`/app/appepidemichealthreport/other-report?girdMemberId=${this.girdMemberId}&name=${this.keyword}&size=20&current=${this.current}`).then((res) => {
        if (res.code == 0) {
          this.total = res.data.total
          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
        }
      })
    }
  },
  onReachBottom() {
    this.current ++
    this.getUserList()
  }
}
</script>

<style scoped lang="scss">
uni-page-body{
  height: 100%;
  background-color: #fff;
}
.OtherUser {
  .user-list{
    .item{
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #E4E5E6;
      padding: 24px 32px 22px 40px;
      background-color: #fff;
      .left{
        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 50px;
        img{
          width: 74px;
          height: 74px;
          margin-right: 34px;
          vertical-align: middle;
        }
      }
      .right{
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999;
        line-height: 74px;
        img{
          width: 32px;
          height: 32px;
          margin-left: 8px;
          vertical-align: middle;
        }
      }
      .color-F5A319{
        color: #F5A319;
      }
    }
  }


  .emptyWrap {
    margin: 0;
  }
  ::v-deep .emptyText{
    text-align: center;
  }
  .seachObjs {
    background: #fff;
  }
  ::v-deep .content{
    padding: 20px 32px;
  }

  ::v-deep  .u-search{
    margin-bottom: 0;
  }
  
}
</style>
