<template>
  <div class="read">
    <AiTopFixed>
      <u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" :current="current" @change="change"></u-tabs>
    </AiTopFixed>
    <div class="body">
      <div class="item" v-for="(item,index) in (current==0 ? list.read : list.unRead)" :key="index">
        <u-avatar :src="item.avatar" mode="square" size="76" style="margin-right: 8px;"></u-avatar>
        <AiOpenData type="userName" :openid="item.id"></AiOpenData>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
  name: "read",
  data() {
    return {
      current: 0,
      list: [],
      id: null,
    }
  },
  onLoad(opt) {
    this.id = opt.id;
    this.getList();
  },
  created() {
    document.title = "接收对象";
    this.injectJWeixin().then(() => {
      this.getList();
    })
  },
  methods: {
    ...mapActions(['previewFile', 'injectJWeixin']),
    getList() {
      this.$http.post("/app/appannouncementreader/list-unread", null, {
        params: {
          id: this.id
        }
      }).then(res => {
        if (res && res.data) {
          this.list = res.data;
        }
      })
    },
    change(val) {
      this.current = val;
      this.list = [];
      this.getList();
    }
  },
  computed: {
    tabs() {
      return [
        {name: (this.list?.read?.length || 0) + "人已读"},
        {name: (this.list?.unRead?.length || 0) + "人未读"},
      ];
    }
  },
}
</script>

<style lang="scss" scoped>
.read {
  min-height: 100%;
  background-color: #F5F5F5;

  ::v-deep .content {
    padding: 0 !important;
  }

  .body {
    padding: 16px 0;

    .item {
      height: 120px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 50px;
      background-color: #ffffff;
      border-bottom: 1px solid #eeeeee;

      & > .name {
        font-size: 36px;
        font-weight: 600;
        color: #333333;
        line-height: 50px;
        margin-left: 32px;
      }
    }
  }
}
</style>
