<template>
  <div class="user">
    <div class="user-item" :key="i" v-for="(item, i) in list">
      <image :src="anonymous === '1' ? '/static/img/avatar.png' : item.avatar" />
      <div class="user-item__right">
        <div class="left">
          <h2>{{ anonymous === '1' ? '居民' : item.userName }}</h2>
          <p>{{ item.createTime }}</p>
        </div>
        <span>选择了{{ item.item }}</span>
      </div>
    </div>
    <AiEmpty v-if="!list.length"></AiEmpty>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        pageShow: false,
        id: '',
        current: 1,
        list: [],
        isMore: false,
        info: '',
        anonymous: ''
      }
    },

    onLoad (query) {
      this.$loading()
      this.anonymous = query.anonymous
      this.getList(query.id)
    },

    methods: {
      getList(id) {
        if (this.isMore) return

        this.$instance.post(`/app/appvillagediscussvote/list?discussId=${id}`, null, {
          params: {
            current: this.current,
            size: 15
          }
        }).then(res => {
          if (res.code == 0) {
            this.total = res.data.total
            if (this.current > 1) {
              this.list = [...this.list, ...res.data.records]
            } else {
              this.list = res.data.records
            }
            uni.hideLoading()
            this.pageShow = true
            if (res.data.records.length < 15) {
              this.isMore = true

              return false
            }

            this.current = this.current + 1
          } else {
            uni.hideLoading()
          }
        }).catch(() => {
          uni.hideLoading()
        })
      }
    },

    onReachBottom() {
      this.getList()
    }
  }
</script>

<style lang="scss" socped>
  .user {
    padding: 32px 32px 40px;

    .user-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 160px;
      margin-bottom: 24px;
      padding: 0 32px;
      border-radius: 16px;
      background-color: #fff;

      image {
        width: 96px;
        height: 96px;
        margin-right: 16px;
        border-radius: 50%;
      }

      .user-item__right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;

        span {
          color: #999999;
          font-size: 28px;
        }

        h2 {
          margin-bottom: 10px;
          color: #333333;
          font-size: 32px;
        }

        p {
          color: #999999;
          font-size: 28px;
        }
      }
    }
  }
</style>
