<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 {
  appName: "投票详情",
  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>
