<template>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div v-if="canView">
          <div class="d-flex justify-content-between">
            <span>&nbsp;</span>
            <button-component
              @click="goToNotificationPage"
              type="button"
              classes="btn-primary"
              buttonText="اعلانات"
              title="اعلانات"
            >
            </button-component>
          </div>
          <the-content-loading
            class="absolute-positioning"
            v-if="fetchingData"
          ></the-content-loading>

          <div v-else>
            <notification-item
              :showTitle="false"
              :item="notificationItem"
            ></notification-item>
          </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>
</template>

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

export default {
  extends: notificationMixin,
  mounted() {
    if (this.isRealUser) {
      this.canView = true;
      this.getNotificationItem(this.$route.params.id);
    } else this.canView = false;

    // this.checkPermisionBeforGetList("notification_show").then(() => {
    //   this.getNotificationItem(this.$route.params.id);
    // });
  },
};
</script>

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