<template>
  <div
    class="modal fade user-modal__modal notification-modal__modal"
    id="notification-modal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content popUp-tab user-modal notification-modal">
        <div class="popUp-tab__content tab-content overflow-auto">
          <div
            class="tab-pane fade show active"
            id="nav-news"
            role="tabpanel"
            aria-labelledby="nav-news-tab"
          >
            <div v-if="canView">
              <div class="tab-news__container">
                <div
                  class="tab-news__item"
                  v-for="item in lastesNews"
                  :key="item.id"
                >
                  <div class="tab-news__pic">
                    <img :src="item.pic" alt="" />
                  </div>
                  <div class="tab-news__text">
                    {{ item.content }}
                  </div>
                  <div class="tab-news__date">
                    {{ item.date_c }}
                  </div>
                </div>
              </div>
            </div>
            <no-data v-else>
              <the-content-loading v-if="fetchingData"></the-content-loading>

              <div
                v-else
                class="d-flex justify-content-center align-items-center"
              >
                <div
                  class="alert alert-warning d-flex justify-content-center align-items-center"
                >
                  <span
                    class="tavasi tavasi-warning-circle color-inherit ms-1 text__32"
                  ></span>
                  عدم دسترسی
                </div>
              </div>
            </no-data>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import notificationMixin from "~/mixins/notifications/notificationMixin";

export default {
  extends: notificationMixin,
  mounted() {
    this.checkPermisionBeforGetList("notifications_news").then(() => {
      this.getLastesNews();
    });
  },
};
</script>

<style lang="scss"></style>