<template>
  <div class="userList">
    <div v-if="data.votes && data.votes.length">
      <div class="datas" v-for="(item, index) in data.votes" :key="index">
        <div class="avatLeft" v-if="anonymous == 0">{{ item.userName.substring(item.userName.length, item.userName.length - 2) }}</div>

        <img class="avatLeft" src="./img/user-img.png" alt="" v-else />

        <div class="right">
          <div class="top">
            <span class="names" v-if="anonymous && anonymous == 0">{{ item.userName }}</span>
            <span v-else>匿名用户</span>

            <span class="times">{{ item.createTime }}</span>
          </div>

          <div class="bottom">选择了选择了{{ item.item }}</div>
        </div>
      </div>
    </div>

    <AiEmpty description="暂无数据" v-else></AiEmpty>
  </div>
</template>

<script>
export default {
  name: 'userList',
  components: {},
  props: {},
  data() {
    return {
      data: [],
      id: '',
      anonymous: '',
    }
  },
  computed: {},
  watch: {},
  onLoad(o) {
    console.log(o)
    this.anonymous = o.anonymous
    this.id = o.id
    this.getDetail()
  },
  onShow() {
    document.title = '投票详情'
  },
  methods: {
    getDetail() {
      this.$loading()
      this.$http
        .post(`/app/appvillagediscuss/queryDetailById?id=${this.id}`)
        .then((res) => {
          if (res?.data) {
            this.data = res.data
            this.$hideLoading()
          } else {
            this.$hideLoading()
          }
        })
        .catch(() => {
          this.$hideLoading()
        })
    },
  },
}
</script>

<style scoped lang="scss">
uni-page-body {
  height: 100%;
  background: #fff;
}
.userList {
  // height: 100%;

  .datas {
    display: flex;

    padding: 20px 32px 0 32px;

    .avatLeft {
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-radius: 50%;
      background: #4e8eee;

      font-size: 28px;
      font-weight: 500;
      color: #ffffff;
    }
    .right {
      border-bottom: 1px solid #ddd;
      width: 100%;
      margin: 10px 0 0 16px;
      padding-bottom: 32px;
      .top {
        .names {
          font-size: 32px;
          color: #333333;
        }
        .times {
          margin-left: 16px;
          font-size: 28px;
          color: #999999;
        }
      }

      .bottom {
        margin-top: 6px;
        font-size: 30px;
        color: #666666;
      }
    }
  }
}
</style>
