<template>
  <div class="like">
    <div class="post-list">
      <template v-for="(item, index) in data">
        <!-- 语音贴 -->
        <post-item
          v-if="item.type === 4"
          :ref="
            `audio${item &&
              item.threadAudio &&
              item.threadAudio._jv &&
              item.threadAudio._jv.id}`
          "
          :key="index"
          :item="item"
          :lazy="false"
          @change="changelike"
          @audioPlay="audioPlay"
        />
        <post-item
          v-else
          :key="index"
          :item="item"
          :lazy="false"
          @change="changelike"
        />
      </template>
      <list-load-more
        :loading="loading"
        :has-more="hasMore"
        :page-num="pageNum"
        :length="data.length"
        @loadMore="loadMore"
      />
    </div>
  </div>
</template>

<script>
import { status } from '@/store/modules/jsonapi-vuex/index';
import handleError from '@/mixin/handleError';

export default {
  name: 'Like',
  mixins: [handleError],
  props: {
    userId: {
      type: String,
      default: ''
    },
    likethreadsData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      data: [],
      pageSize: 10,
      pageNum: 1, // 当前页数
      currentLoginId: this.$store.getters['session/get']('userId'),
      loading: false,
      hasMore: false,
      editThreadId: '',
      currentAudioId: '' // 当前播放语音id
    };
  },
  mounted() {
    this.data = this.likethreadsData;
    if (this.data.length === 0) {
      this.loadlikes();
    }
  },
  methods: {
    // 加载当前点赞数据
    loadlikes() {
      this.loading = true;
      const params = {
        include: 'user,user.groups,firstPost,firstPost.images'
          + ',firstPost.postGoods,category,threadVideo,threadAudio,question',
        'page[number]': this.pageNum,
        'page[limit]': this.pageSize,
        'filter[isApproved]': 1,
        'filter[user_id]': this.userId
      };
      status
        .run(() =>
          this.$store.dispatch('jv/get', ['threads/likes', { params }])
        )
        .then(
          res => {
            this.loading = false;
            this.hasMore = res.length === this.pageSize;
            const ress = JSON.parse(JSON.stringify(res));
            // ress.forEach((val) => {
            // val.firstPost.isLiked = true
            // })
            this.data = [...this.data, ...ress];
            if (res._jv) {
              this.hasMore = this.data.length < res._jv.json.meta.threadCount;
            }
            this.pageNum += 1;
          },
          e => {
            this.handleError(e);
          }
        )
        .finally(() => {
          this.loading = false;
        });
    },
    loadMore() {
      if (this.hasMore) {
        // this.pageNum += 1
        this.loadlikes();
      }
    },
    changelike() {
      this.pageNum = 1;
      this.data = [];
      this.$emit('changeFollow', { userId: this.userId });
      this.loadlikes();
    },
    // 语音互斥播放
    audioPlay(id) {
      if (this.currentAudioId && this.currentAudioId !== id) {
        this.$refs[`audio${this.currentAudioId}`][0].pause();
      }
      this.currentAudioId = id;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";
.like {
  min-height: 820px;
}
.empty-icon {
  width: 20px;
  height: 18px;
  margin-right: 10px;
}
.no-more2 {
  text-align: center;
  padding: 20px 0;
  color: #8590a6;
  font-size: 14px;
  min-height: 810px;
}
</style>
