<template>
  <div class="header-comments">
    <div class="header-comments__wrapper">
      <h2 class="header-comments__title">Комментарии в&nbsp;эфире</h2>
     
     <v-skeleton-loader v-if="!lastCommentsList.comments"
      class="mx-auto"
      max-width="auto"
      type="paragraph,sentences@2"
    ></v-skeleton-loader>
        <ul v-if="lastCommentsList.comments" class="header-comments__list">
          <HeaderCommentsItem
            v-for="comment in lastCommentsList.comments"
            :key="comment.id"
            :comment="comment"
          />
        </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  mounted() {
    this.getLastCommentsList();
    setInterval(this.getLastCommentsList, 60000);
  },
  computed: {
    ...mapGetters({
      lastCommentsList: "modules/comments/lastCommentsList",
    }),
  },

  methods: {
    ...mapActions({
      getLastCommentsList: "modules/comments/getLastCommentsList",
    }),
  },
};
</script>

<style>
</style>
