<template>
  <div class="wrapper search-page">
    <div v-if="canView">
      <TopHeader :actionMode="actionMode" ref="topheader"></TopHeader>
      <!-- <router-view actionMode="actionMode" ref="topheader" name="top" ></router-view> -->

      <div class="search-page__container">
        <div class="search-page__logo">
          <img src="assets/common/img/logo.png" alt="جستجو">
        </div>
        <SearchLine mode="1">
        </SearchLine>
      </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>
</template>

<script>
import SearchLine from "~/search/view/layout/SearchLine.vue";
import TopHeader from "~/search/view/layout/Top.vue";
import { mapActions } from "pinia";

export default {

  name: "Home",
  data() {
    return {
      canView: false,
      actionMode: 1,
      fetchingData: false,
    };

  },

  methods: {
    ...mapActions(["checkPermissions"]),

  },
  computed: {
  },
  beforeMount() {
    //this.$refs.topheader.setUsername(this.$username);
    //this.$refs.searchline.setMode(1);
    // HtmlClass.init(this.layoutConfig());
  },
  mounted() {
    if (this.fetchingData) return;
    this.fetchingData = true;

    this.checkPermissions({ permission: 'result_view', _this: this })
      .then(() => {
        this.canView = true;
        this.fetchingData = false;

      })
      .catch(() => {
        this.canView = false;
        this.fetchingData = false;
      })

    // if (!this.canView) {
    // this.$nextTick(() => {
    // this.$refs.topheader.state = 1;
    // this.actionMode = 1;
    // })
    // }

  }
};
</script>