<template>
  <div
    class="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 show active fade support__tab--scroll"
            id="nav-support"
            role="tabpanel"
            aria-labelledby="nav-support-tab"
          >
            <div v-if="canView">
              <div class="support__container">
                <div class="support__scroll-static">
                  <div
                    v-for="item in lastesMsg"
                    :key="item.id"
                    :class="
                      item.isme == 1
                        ? 'support__item support__item--me'
                        : 'support__item support__item--support'
                    "
                  >
                    <div class="support__content">
                      <div class="support__text">
                        {{ item.body }}
                      </div>
                      <div class="support__date">{{ item.time }}</div>
                    </div>
                    <div class="support__pic" v-show="item.isme == 0">
                      <img :src="item.user.avatar" :alt="item.user.last_name" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="support__send">
                <div class="support__input">
                  <input type="text" placeholder="بنویسید" v-model="usertext" />
                  <a class="support__send-btn" @click="addMsg()">ارسال</a>
                </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_support').then(() => {
      this.getMsg();
    });
  },
};
</script>

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