<template>
  <NuxtLayout name="search-layout" :menu="sidbarMenu">
    <!-- <Head> -->
    <!-- <Title>{{ metaTitle }}</Title> -->
    <!-- <Meta name="description" :content="title" /> -->
    <!-- <Style type="text/css" children="body { background-color: green; }" ></Style> -->
    <!-- </Head> -->
    <div class="container-fluid">
      <div class="row">
        <!-- #region منو سمت راست -->
        <div class="col-auto col-md-3">
          <template v-if="!isMajlesBuild() && showListRight">
            <div
              class="filter-list-container"
              :class="{ expanded: showFilter }"
            >
              <ul
                :class="buildName() + '-header-color'"
                v-if="$route.name != 'research'"
                class="nav nav-tabs pt-1 d-none d-xl-flex"
              >
                <li class="nav-item desktop">
                  <button
                    title=""
                    type="button"
                    @click.prevent="setActiveListType('Navigation', 'simple')"
                    class="btn nav-link"
                    :class="{
                      active: activeListType == 'simple',
                    }"
                  >
                    {{ listTabTitle1 }}
                  </button>
                </li>
                <li class="nav-item desktop">
                  <button
                    title=""
                    type="button"
                    @click.prevent="setActiveListType('UserHistory', 'history')"
                    class="btn nav-link"
                    :class="{
                      active: activeListType == 'history',
                    }"
                  >
                    {{ listTabTitle2 }}
                  </button>
                </li>
              </ul>
              <div class="mobile-mode d-lg-none">
                <button
                  v-if="showFilter"
                  class="btn mb-1"
                  @click.prevnet="showFilter = !showFilter"
                >
                  <svg class="icon icon-chevron-double-right ms-1">
                    <use xlink:href="#icon-chevron-double-right"></use>
                  </svg>
                </button>
              </div>
              <component
                :key="renderResearch"
                class="main-filter"
                :item="getPanelComponent"
                :is="panelComponentName"
                ref="panelComponent"
                @fishHandlerInResearch="researchModalHandler"
                @content-updated="updateMainContent"
              ></component>
            </div>
          </template>
        </div>
        <!-- #endregion -->

        <!-- #region  بخش محتوای اصلی  سایت -->
        <div :class="columnClass">
          <!-- #region بخش هِدر   -->
          <div
            class="row align-items-center"
            :class="buildName() + '-header-color'"
          >
            <div class="pt-2 d-flex justify-content-between align-items-center">
              <div class="d-md-none">
                <div class="d-flex align-items-center">
                  <button
                    name="button"
                    type="button"
                    class="toggle-mobile-nav dropdown-hamburger pe-0"
                    @click.prevent="toggleSidebarMenu()"
                  >
                    <span class="sr-only">باز کردن منوی کنار</span>
                    <svg class="s18" data-testid="sidebar-icon">
                      <use href="~/assets/common/img/icons.svg#sidebar"></use>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="">
                <div class="nav-tabs-container nav-tabs justify-content-start">
                  <ul v-if="navList" class="nav al">
                    <li
                      class="nav-item desktop"
                      v-for="(navItem, index) in navList"
                      :key="index"
                    >
                      <button
                        :title="navItem.title"
                        type="button"
                        class="btn nav-link"
                        @click.prevent="setActiveTab(navItem)"
                        :class="{
                          active: activeTabGetter?.key == navItem.key,
                        }"
                      >
                        {{ navItem.title }}
                      </button>
                    </li>

                    <li
                      class="nav-item mobile tabs-more-btn d-lg-none d-flex align-items-center"
                      v-if="navList?.length > 3"
                    >
                      <div class="dropdown">
                        <button
                          class="btn"
                          type="button"
                          id="dropdownMenuButton"
                          data-bs-toggle="dropdown"
                          aria-haspopup="true"
                          aria-expanded="false"
                        >
                          <svg class="icon icon-Component-81--1">
                            <use xlink:href="#icon-Component-81--1"></use>
                          </svg>
                        </button>
                        <div
                          class="dropdown-menu"
                          aria-labelledby="dropdownMenuButton"
                        >
                          <a
                            class="dropdown-item"
                            href="#"
                            v-for="(navItem, index) in navList"
                            :key="index"
                            @click.prevent="setActiveTab(navItem)"
                            :class="{
                              active: activeTabGetter?.key == navItem.key,
                            }"
                            v-if="index > 2"
                            >{{ navItem.title }}</a
                          >
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>

              <div class="d-none d-lg-block">
                <auto-complation
                  :key="'auto' + renderAutoComplation"
                  :showAppend="false"
                  class="entityTheme entity-auto-complation"
                  ref="autoComplationRef"
                  :contentKey="activeEntityViewSchemaGetter?.key"
                  :textSearch="$route.query?.searchtext ?? ''"
                  :placeholder="autoComplationPlaceholder"
                  @onSelectHistory="onSelectHistory"
                ></auto-complation>
              </div>
              <div class="d-lg-none">
                <a
                  class=""
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#mobileCollapse"
                  aria-expanded="false"
                  aria-controls="collapseExample"
                  name="button"
                >
                  <svg class="icon icon-Component-198--1">
                    <use xlink:href="#icon-Component-198--1"></use>
                  </svg>
                </a>
              </div>
            </div>
            <div id="mobileCollapse" class="collapse d-lg-none">
              <div class="col-12 d-flex justify-content-center">
                <div class="col-10 col-sm-6">
                  <auto-complation
                    :key="'auto' + renderAutoComplation"
                    :showAppend="false"
                    class="my-2 entityTheme entity-auto-complation"
                    ref="autoComplationRef"
                    :contentKey="activeEntityViewSchemaGetter?.key"
                    :textSearch="$route.query?.searchtext ?? ''"
                    :placeholder="autoComplationPlaceholder"
                    @onSelectHistory="onSelectHistory"
                  ></auto-complation>
                </div>
              </div>
            </div>
          </div>

          <!-- #endregion -->
          <!-- #region  بخش محتوای متنی سایت -->
          <div class="row">
            <EntityHeader
              v-if="
                mainComponentName !== ('EntityCompareText2', 'EntityChartGantt')
              "
              @toggle-reading-mode="toggleReadingMode"
              @groupEditComponent="EditComponent"
              @selectedItem="selectedItemlevel"
              @NewComponent="NewComponent"
              @show-compare-modal="showCompareModal"
              @showListHeadline="showListHeadline"
              @close-compare="closeCompare()"
              @change-compare="changeCompare($event)"
              @switch-view="switchView"
              :isCompareState="mainComponentName == 'EntityCompareText2'"
              ref="headers"
              class="col-12"
            >
            </EntityHeader>
            <template v-if="!isMajlesBuild() && showListRight">
              <div class="button-cloce">
                <button
                  v-if="showFilter == false"
                  class="btn_close"
                  @click.prevnet="showFilter = !showFilter"
                >
                  <svg class="icon icon-chevron-double-left">
                    <use xlink:href="#icon-chevron-double-left"></use>
                  </svg>
                </button>
              </div>
            </template>

            <div
              v-if="hideCircleButton == false"
              class="circle--button"
              @click.prevent="circleButton()"
              ref="circle"
            >
              <svg
                class="icon-chevron-double-lg-left"
                data-testid="chevron-double-lg-left-icon"
              >
                <use
                  href="~/assets/common/img/icons.svg#chevron-double-lg-left"
                ></use>
              </svg>
            </div>

            <div class="col">
              <div class="row mx-2">
                <div
                  class="col-12"
                  :class="{
                    'col-lg':
                      mainComponentName != 'PropertyBuilder' &&
                      mainComponentName != 'EntityRepetitionWords' &&
                      mainComponentName !== 'EntityChartGantt',
                  }"
                >
                  <component
                    v-if="mainComponentName"
                    :class="{
                      component_page:
                        mainComponentName !== 'EntityQaSection' ||
                        mainComponentName !== 'LibraryText' ||
                        mainComponentName !== 'EntityChartGantt',
                    }"
                    :readingMode="isReadingModeGetter"
                    :propText="mainComponentName"
                    :is="mainComponentName"
                    :slug="slug"
                    :selectedItem="selectedItemEntityGetter"
                    :editItem="editItem"
                    :editComponent="editComponent"
                    :text1Compare="text1Compare"
                    :text2Compare="text2Compare"
                    :copmareSideBySide="copmareSideBySide"
                    :compareLineByLine="compareLineByLine"
                    :routeEntityid="params.id"
                    :listBooks="listBooks"
                    :viewMode="viewMode"
                    @is-search-mode="closeSearchMode"
                    @fishHandler="fishHandler"
                    @termHandler="termHandler"
                    @statusEdit="statusEdit"
                    @annotationHandler="annotationHandler"
                    @editPropertyTags="editPropertyTags"
                    @close-compare="closeCompare()"
                    @click-node="chartGanttClickNode"
                    @linked-title-click="linkedTitleClick"
                    @column-title-click="columnTitleClick"
                    @handler-icon-click="handlerIconClick"
                    :propertyBuilderForm="
                      activeEntityViewSchemaGetter?.property
                    "
                  ></component>
                  <!-- //:key="renderResearch" -->
                  <!-- این مقدار حذف شد به این دلیل که بعد از فیش زدن به اول صفحه میرفت -->
                </div>

                <div
                  :class="{ 'col-4': buildName() == 'hadith' }"
                  class="col-3 entity-tree-list"
                  v-if="isSearchMode || isHeadingMode"
                >
                  <div class="container-fluid">
                    <!-- <div class="row">
                        <div
                          class="d-flex justify-content-between align-items-center w-100"
                        >
                          <div>سرفصل ها</div>
                          <button
                            class="close"
                            @click="showEntityHeading = false"
                          >
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                      </div> -->
                    <div class="row">
                      <text-search
                        @is-search-mode="closeSearchMode"
                        @showListHeadline="showListHeadline"
                        v-if="isSearchMode"
                        class=""
                      ></text-search>

                      <entity-tree-list
                        :dataTree="dataTree"
                        @showListHeadline="showListHeadline"
                        @is-treelist-mode="closeTreelistMode"
                        v-if="isHeadingMode"
                        class=""
                      ></entity-tree-list>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- <base-modal
                v-if="uploadForFirstTime"
                @close="closeModal"
                @save="saveBaseModal"
                @canel="closeModal()"
                :description="description"
                :showHeaderCloseButton="true"
                :modalTitle="modalTitle"
                class="borhan-modal"
                :height="getModalHeight()"
                maxHeight="30em"
                overflow="hidden"
                :hasFooter="false"
                :showSaveButton="false"
                :showCloseButton="false"
              >
                <component
                  :is="slotComponentName"
                  :uploadForFirstTime="uploadForFirstTime"
                  :listData="listData"
                  :valueModal="valueResearchModal"
                  @canel="closeModal()"
                  @close="closeModal()"
                  @closeAfterSaving="closeAfterSaving"
                  @compare-text="compareText"
                  @load-text="loadText"
                  @word-file="wordFile"
                  @after-select-file="afterSelectFile()"
                ></component>
              </base-modal> -->
            <base-modal-v2
              v-if="uploadForFirstTime"
              @close="closeModal"
              :showHeaderCloseButton="true"
              :hasFooter="false"
              :modalTitle="modalTitle"
              :modalSize="modalWidthManagement"
              :height="modalHeightManagement"
              maxHeight="36em"
              overflow="hidden"
              :showSaveButton="true"
              :showCloseButton="true"
              :showDeleteButton="false"
            >
              <template v-slot:default> {{ modalTitle }}</template>

              <template v-slot:body>
                <component
                  :is="slotComponentName"
                  :uploadForFirstTime="uploadForFirstTime"
                  :listData="listData"
                  :valueModal="valueResearchModal"
                  :sectionItem="sectionItem"
                  :versionItem="versionItem"
                  :listItemsCompare="listItemsCompare"
                  :numberCurrentTab="2"
                  :showCurrentTab="false"
                  @edit-sections="editSections"
                  @canel="closeModal()"
                  @close="closeModal()"
                  @closeAfterSaving="closeAfterSaving"
                  @compare-text="compareText"
                  @load-text="loadText"
                  @word-file="wordFile"
                  @compare-versions-qanon="compareVersionsQanon"
                  :elements="dataOrganhMeta"
                  @after-select-file="afterSelectFile()"
                  height="100%"
                ></component>
              </template>
            </base-modal-v2>
          </div>
          <!-- #endregion -->
        </div>
        <!-- #endregion -->
      </div>
    </div>
  </NuxtLayout>
</template>

<script>
import { mapActions, mapState } from "pinia";

import { useEntityStore } from "@search/stores/entityStore";
import { useSearchStore } from "@search/stores/searchStore";
import { useCommonStore } from "~/stores/commonStore";

import sidbarMenuDefault from "@search/json/entity/entityMenu.json";
import sidbarMenuMajles from "@search/json/entity/entityMenuMajles.json";

import entityApi from "~/apis/entityApi";
import repoApi from "~/apis/repoApi";

export default {
  setup() {
    useHead({
      title: import.meta.env.VITE_ENTITY_PAGE_TITLE,
      meta: [{ name: "description", content: "My page description" }],
      bodyAttrs: {
        class: import.meta.env.VITE_ENTITY_SYSTEM,
      },
    });

    definePageMeta({
      // names: [
      //   "search/key/id",
      //   "search/key/id/show",
      //   "search/key/id/list",
      //   "search/key/id/research",
      // ],
      // middleware: "redirect",
      // alias: [
      //   "/search/key/id",
      //   "/search/key/id/show",
      //   "/search/key/id/list",
      //   "/search/key/id/research",
      // ],
      layout: false,
    });
  },
  created() {
    this.routeKey = this.$route.params.key;
    this.routeId = this.$route.params.id;

    this.httpService = useNuxtApp()["$http"];
  },
  mounted() {
    sidbarMenuDefault.entity.forEach((element) => {
      if (element.link.includes("/key/id/") > 0)
        element.link = element.link
          .replace("id", this.$route.params.id)
          .replace("key", this.$route.params.key);
    });

    console.info("sidbarMenuDefault", sidbarMenuDefault);

    if (this.$route.query?.listkey == "branch")
      this.listTabTitle1 = "جلسات دوره";

    this.setPanelComponentName();

    this.getEntityInfo(this.routeKey, this.routeId);
    this.getListInformation();

    this.listData = this.listEntityGetter;
    this.setShowListRight();

    var font = JSON.parse(localStorage.getItem("settings"));
    this.progress = font?.fontSize;

    // اگر شرط سوم فعال باشه، هر سری که کامپوننت (entityview1) لود بشه ، درخواست به سرور ارسال میشه
    // گرفتن دوباره اسکیما
    // این کامنت موقت

    let isRouterKeyFixed =
      this.activeEntityViewSchemaGetter &&
      this.entityViewSchemaGetter &&
      this.activeEntityViewSchemaGetter?.key == this.$route.params?.key;

    if (isRouterKeyFixed) {
      this.updateMainContent();
    } else this.getSchemas();

    if (window.outerWidth < 992) {
      this.$store.commit("TOGGLE_SIDEBAR_MENU");
    }

    if (this.activeEntityViewSchemaGetter?.tabs) {
      if (this.activeTabGetter) this.setActiveTab(this.activeTabGetter);
      else this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[0]);
    }

    const { $eventBus } = useNuxtApp();
    $eventBus.on("update-component-data", () => {
      this.updateComponentData();
    });

    this.getDataTree();
    if (buildName() == "hadith") {
      this.getBooksList();
    }
  },
  watch: {
    mainComponentName(newVal) {
      this.setShowListRight(newVal);
      // if (this.$route.name !== "show") {
      //   if (
      //     // newVal === "PropertyBuilder" ||
      //     // newVal === "EntityRepetitionWords" ||
      //     newVal === "Gantt"
      //   ) {
      //     this.showListRight = false;
      //   } else {
      //     this.showListRight = true;
      //   }
      // }
    },
    similarInfoGetter(newVal) {
      if (newVal.show) {
        this.openModal("EntitySimilar", newVal.label, newVal.text);
      }
    },
    statusButtonGetter(newVal) {
      this.statusPage = newVal;
    },
    // statusRemovCheckBoxGetter(newVal) {
    //   this.removCheckBox();
    // },
    $route: {
      handler(to, from) {
        this.setPanelComponentName();
      },
      deep: true,
      nested: true,
    },
  },
  data() {
    return {
      routeKey: "",
      routeId: "",

      dataOrganhMeta: "",
      renderAutoComplation: 1,
      listTabTitle1: "از جستجو",
      listTabTitle2: "تاریخچه",
      activeListType: "simple",
      // readingMode: false,
      renderResearch: 1,
      httpService: undefined,
      slotComponentName: null,
      mainComponentName: null,
      tempComponentName: null,
      modalTitle: null,
      slug: null,
      statusPage: 1,
      copmareSideBySide: true,
      compareLineByLine: false,
      uploadForFirstTime: false,
      showFilter: true,
      showListRight: true,
      hideCircleButton: true,
      showSimilar: false,
      isSearchMode: false,
      isHeadingMode: false,
      showEntityHeading: false,
      valueResearchModal: {},
      firstItem: {},
      sidbarMenuDefault: sidbarMenuDefault,
      sidbarMenuMajles: sidbarMenuMajles,
      params: this.$route.params,
      firstList: [],
      listData: [],
      description: "",
      editItem: "",
      editComponent: "",
      newComponent: "",
      panelComponentName: "Navigation",
      text1Compare: "",
      text2Compare: "",
      listBooks: [],
      pagination: {
        page: 0,
        total: 0,
        pageTop: 0,
        pageBottom: 1,
        offset: 0, // page * per_page
        limit: 25, //per_page
      },
      path: this.$route.path,
      dataTree: [],
      listBooks: [],
      pagination: {
        page: 0,
        total: 0,
        pageTop: 0,
        pageBottom: 1,
        offset: 0, // page * per_page
        limit: 25, //per_page
      },
      viewMode: "table",
      sectionItem: {},
      versionItem: [],
      listItemsCompare: {},
      isPrevComponent: "text",
      // text: "",
      // uuid: undefined,
      // texts3: "تحلیل",
      // editDescription: "",
      // editData: "",
      // bedtimeText: "",
      // showchang: true,
      // editTitle: "",
      // editVersion: "",
      // showFish: false,
      // fishModalTitle: "",
    };
  },
  computed: {
    ...mapState(useEntityStore, [
      "selectedItemEntityGetter",
      "listEntityGetter",
      "statusButtonGetter",
      "similarInfoGetter",
      "entityViewSchemaGetter",
      "activeEntityViewSchemaGetter",
      "activeTabGetter",
      "isReadingModeGetter",
    ]),
    ...mapState(useCommonStore, [
      "organNameGetter",
      "isSidebarCollapsed",
      "currentUser",
    ]),

    autoComplationPlaceholder() {
      if (this.activeEntityViewSchemaGetter?.search_placeholder)
        return this.activeEntityViewSchemaGetter.search_placeholder;
      else return "جستجو در عنوان";
    },

    navList() {
      if (!isMajlesBuild()) return this.activeEntityViewSchemaGetter?.tabs;

      if (this.activeEntityViewSchemaGetter?.tabs) {
        let list = this.activeEntityViewSchemaGetter?.tabs;
        if (!this.isDevelopMode)
          list = this.activeEntityViewSchemaGetter?.tabs.filter((item) => {
            item?.isDevelopMode == 1;
          });
        return list;
      } else return [];
    },
    columnClass() {
      if (!isMajlesBuild() && this.showListRight) {
        return "col-12 col-md-9"; // وقتی شرط برقرار باشد
      }
      return "col-12"; // در حالت عادی
    },
    sidbarMenu() {
      if (isMajlesBuild()) return sidbarMenuMajles;
      else return sidbarMenuDefault;
    },
    modalWidthManagement() {
      switch (this.slotComponentName) {
        case "EntitiyModalCompareVersionQa":
          return "modal-md";
          break;

        default:
          return "modal-xl";
          break;
      }
    },
    modalHeightManagement() {
      switch (this.slotComponentName) {
        case "EntitiyModalCompareVersionQa":
          return "430px";
          break;

        default:
          return "556px";
          break;
      }
    },
  },
  methods: {
    ...mapActions(useEntityStore, [
      "SET_ITEM_ENTITY",
      "SET_LIST_ENTITY",
      "SET_STATUS_ENTITY_VIEWPAGE",
      "SET_STATUS_BUTTON",
      "SET_FONT",
      "activeEntityViewSchemaSetter",
      "entityViewSchemaSetter",
      "activeTabSetter",
    ]),
    ...mapActions(useCommonStore, ["TOGGLE_PANEL"]),
    editProperty(innerGroupItem) {
      this.dataOrganhMeta = innerGroupItem;
      this.openModal("TagsEdit", "ویرایش " + innerGroupItem?.label);
    },
    onSelectHistory(payload) {
      let _id = payload.searchItem._source.qanon_id;
      let _listkey = this.$route.query.listkey;
      let name = "navigationView";

      if (_listkey) name = "navigation";

      this.$router
        .push({
          name: name,
          params: {
            id: _id,
            key: this.$route.params?.key,
          },
          query: {
            searchtext: payload.textSearch ?? undefined,
            listkey: _listkey,
          },
        })
        .catch(() => {});
    },
    getBooksList() {
      let field_collapse = "book_title"; //"normal"

      let url = repoUrl() + libraryApi.search.volume;
      url = url.replace("{{field_collapse}}", field_collapse);
      url = url.replace("{{offset}}", this.pagination.offset);
      url = url.replace("{{limit}}", this.pagination.limit);
      url = url.replace("{{filter}}", "none");

      this.httpService
        .postRequest(url)
        .then((response) => {
          this.listBooks = [];

          this.listBooks = response.hits?.hits.map((item) => {
            const source = item._source;
            const publishDate = item._source.publish_date
              ? new Date(source.publish_date).toLocaleDateString("fa-IR")
              : null;
            // console.log(publishDate);

            return {
              ...item,
              _source: {
                ...source,
                publish_date: publishDate,
              },
            };
          });
        })
        .catch((error) => {});
    },
    updateComponentData() {
      if (this.$route.query?.listkey == "branch")
        this.listTabTitle1 = "جلسات دوره";

      this.setPanelComponentName();

      this.getEntityInfo(this.routeKey, this.routeId);
      this.getListInformation();

      this.listData = this.listEntityGetter;
      this.setShowListRight();

      var font = JSON.parse(localStorage.getItem("settings"));
      this.progress = font?.fontSize;

      // اگر شرط سوم فعال باشه، هر سری که کامپوننت (entityview1) لود بشه ، درخواست به سرور ارسال میشه
      // گرفتن دوباره اسکیما
      // این کامنت موقت

      let isRouterKeyFixed =
        this.activeEntityViewSchemaGetter &&
        this.entityViewSchemaGetter &&
        this.activeEntityViewSchemaGetter?.key == this.$route.params?.key;

      if (isRouterKeyFixed) {
        this.updateMainContent();
      } else this.getSchemas();

      if (window.outerWidth < 992) {
        this.$store.commit("TOGGLE_SIDEBAR_MENU");
      }

      if (this.activeEntityViewSchemaGetter?.tabs) {
        if (this.activeTabGetter) this.setActiveTab(this.activeTabGetter);
        else this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[0]);
      }
    },
    // switchViewGraph(event) {
    //   if (event == "show") this.mainComponentName = "EntityChartGraph";
    //   else this.mainComponentName = "EntityQaRelation";
    // },

    switchView(event) {
      if (event == "show") {
        if (this.activeTabGetter?.key == "graph") {
          this.mainComponentName = "EntityChartGraph";
        } else if (this.activeTabGetter?.key == "gantt") {
          this.mainComponentName = "EntityChartGantt";
          this.viewMode = "table";
        }
      } else {
        if (this.activeTabGetter?.key == "graph") {
          this.mainComponentName = "EntityQaRelation";
        } else if (this.activeTabGetter?.key == "gantt") {
          this.mainComponentName = "EntityChartGantt";
          this.viewMode = "chart";
        }
      }
    },
    setActiveListType(componentName, listType) {
      this.panelComponentName = componentName;
      this.activeListType = listType;
    },
    toggleReadingMode(event) {
      // if (event) this.readingMode = false;
      // else this.readingMode = true;
    },

    getModalHeight() {
      return this.slotComponentName === "SelectEntityText" ? "30em" : "auto";
    },

    // removCheckBox() {
    //   let remov = this.statusRemovCheckBoxGetter;
    //   let index;
    //   this.listResearch.forEach((item) => {
    //     if (item === remov) {
    //       index = this.listItem.indexOf(item);
    //       this.listItem.splice(index, 1);
    //     }
    //   });
    // },
    // datefa(item) {
    //   var m = this.selectedItemEntityGetter.begin_date;
    //   var d = new Date(m).toLocaleDateString("fa-IR");
    //   return d;
    // },
    // updateFont(event) {
    //   if (this.progress == "15") {
    //     this.progress = JSON.parse(localStorage.getItem("settings"));
    //   } else {
    //     this.progress = event.target?.value;
    //     this.SET_FONT(this.progress);
    //     const settings = {
    //       fontSize: this.progress,
    //     };
    //     localStorage.setItem("settings", JSON.stringify(settings));
    //   }
    // },

    /**
     * مدیریت نمایش مدال تحقیق.
     * @param {Object} value - مقدار شامل اطلاعات ویرایش آیتم.
     */
    researchModalHandler(value) {
      if (value.itemEdit._source.research_key == "term") {
        this.termHandler(value);
      } else if (value.itemEdit._source.research_key == "note") {
        this.annotationHandler(value);
      } else if (value.itemEdit._source.research_key == "fish") {
        this.fishHandler(value);
      } else {
        // let key = value.itemEdit._source?.research_key;

        let schema = this.activeEntityViewSchemaGetter.contextMenu.find(
          (item) => item.key === value.itemEdit._source?.research_key
        );
        this.valueResearchModal = value;
        this.valueResearchModal.itemSchema = schema;
        this.openModal("ComponentTextFish", schema.title);
      }
    },
    /**
     * مدیریت نمایش مدال حاشیه‌نویسی.
     * @param {Object} item - آیتم شامل اطلاعات schema.
     */

    annotationHandler(item) {
      this.valueResearchModal = item;
      this.openModal("ComponentTextFish", item.itemSchema.title);
    },
    /**
     * مدیریت نمایش مدال فیش.
     * @param {Object} item - آیتم شامل اطلاعات schema.
     */
    fishHandler(item) {
      this.valueResearchModal = item;
      this.openModal("ComponentTextFish", item.itemSchema.title);
    },
    /**
     * مدیریت نمایش مدال اصطلاح.
     * @param {Object} item - آیتم شامل اطلاعات schema.
     */
    termHandler(item) {
      this.valueResearchModal = item;
      this.openModal("SelectTerm", "انتخاب اصطلاح ", "", "term");
    },
    /**
     * تغییر وضعیت نمایش سرخط نهاد.
     */
    showListHeadline({ isSearchMode, isHeadingMode }) {
      this.isSearchMode = isSearchMode;
      this.isHeadingMode = isHeadingMode;

      // this.showEntityHeading = !this.showEntityHeading;
    },
    /**
     * بررسی اینکه آیا کاربر می‌تواند یک کلید خاص را ببیند.
     * @param {String} keyName - نام کلید برای بررسی.
     * @returns {Boolean} - اگر کاربر می‌تواند کلید را ببیند true و در غیر اینصورت false.
     */
    canSee(keyName) {
      if (this.currentUser?.user_level > 1) return true;
      return this.userPermisionGetter.includes(keyName);
    },
    async getEntityText(id) {
      let key = this.routeKey;
      let url = "";

      if (key == "qasection" || key == "rgsection") {
        url = repoUrl() + entityApi.comparison.getParent;
        url = url.replace("@index_key", key);
        url = url.replace("@parent_id", id);
      } else {
        url = repoUrl() + entityApi.comparison.getText;
        url = url.replace("@index_key", key);
        url = url.replace("@id", id);
      }
      // console.log(url)

      return await this.httpService
        .getRequest(url)
        .then((res) => {
          return res.text;
        })
        .catch(() => {
          return "";
        });
    },

    /**
     *   بارگذاری متن برای مقایسه
     * @param {String} text - متنی که باید بارگذاری شود.
     */
    loadText(text) {
      this.text2Compare = text;
      let vm = this;
      this.closeModal();
      this.getEntityText(this.routeId).then((text) => {
        vm.text1Compare = text;
        vm.mainComponentName = "EntityCompareText2";
      });
    },
    /**
     * مدیریت مقایسه فایل ورد.
     * @param {String} text - متنی که باید مقایسه شود.
     */
    wordFile(text) {
      this.text2Compare = text;
      this.closeModal();
      this.getEntityText(this.routeId).then((text) => {
        this.text1Compare = text;
        this.mainComponentName = "EntityCompareText2";
      });
    },
    /**
     * مدیریت مقایسه متن.
     * @param {String} id - شناسه متنی که باید مقایسه شود.
     */
    compareText(id) {
      this.mainComponentName = "EntityCompareText2";
      this.closeModal();

      let vm = this;

      this.getEntityText(id).then((text) => {
        vm.text2Compare = text;
        vm.getEntityText(vm.routeId).then((text) => {
          vm.text1Compare = text;
          vm.mainComponentName = "EntityCompareText2";
        });
      });
    },
    /**
     * بستن نمای مقایسه.
     */
    closeCompare() {
      if (this.activeEntityViewSchemaGetter?.tabs) {
        switch (this.isPrevComponent) {
          case "text":
            this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[0]);
            break;
          case "gantt":
            this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[4]);
            break;
          default:
            this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[0]);
        }
      }
    },
    /**
     * بستن مدال.
     */
    closeModal() {
      // $("#base-modal").modal("hide");
      this.slotComponentName = undefined;
      this.modalTitle = undefined;
      this.description = undefined;
      this.listData = [];
      this.valueResearchModal = {};

      setTimeout(() => {
        this.uploadForFirstTime = false;
      }, 500);
    },
    closeAfterSaving() {
      this.renderResearch++;
      this.closeModal();
    },
    saveBaseModal() {},
    /**
     * باز کردن مدال با کامپوننت و عنوان مشخص.
     * @param {String} componentName - نام کامپوننتی که باید در مدال نمایش داده شود.
     * @param {String} title - عنوان مدال.
     * @param {String} [description=""] - توضیحات مدال.
     * @param {String} [key=undefined] - کلید برای مدال.
     */
    openModal(componentName, title, description, key = undefined) {
      this.slotComponentName = componentName;
      this.modalTitle = title;
      this.description = description;
      this.uploadForFirstTime = true;
      // setTimeout(() => {
      // $("#base-modal").modal({ backdrop: "static", keyboard: false }, "show");
      // }, 500);
    },
    /**
     * تنظیم نمایش موارد مشابه.
     * @param {Boolean} [isShow=true] - نشان می‌دهد که آیا باید موارد مشابه نمایش داده شوند یا خیر.
     */
    setShowSimilar(isShow = true) {
      this.showSimilar = isShow;
    },
    /**
     * نمایش تجزیه‌گر در صورت صحیح بودن شرط.
     * @param {Boolean} isShow - نشان می‌دهد که آیا باید تجزیه‌گر نمایش داده شود یا خیر.
     */
    showParserIfTrue(isShow) {
      if (!isShow) {
        this.tempComponentName = this.mainComponentName;
        this.mainComponentName = "EntityRepetitionWords";
      } else {
        this.mainComponentName = this.tempComponentName ?? "EntityText";
      }
    },
    /**
     * مدیریت دکمه دایره‌ای.
     */
    circleButton() {
      this.hideCircleButton = true;
      this.isVisiablePanel = true;
    },
    /**
     * مدیریت رویداد کامپوننت جدید.
     * @param {Event} event - شیء رویداد.
     */
    NewComponent(event) {
      this.newComponent = event;
      if (event == true) {
        this.statusPage = 2;
      } else {
        this.statusPage = 1;
      }
    },
    /**
     * مدیریت رویداد ویرایش وضعیت.
     * @param {Event} event - شیء رویداد.
     */
    statusEdit(event) {
      if (event == false) {
        this.statusPage = 1;
      }
    },

    /**
     * مدیریت رویداد انتخاب سطح آیتم.
     * @param {Event} event - شیء رویداد.
     */
    selectedItemlevel(event) {
      this.editItem = event;
    },
    /**
     * مدیریت رویداد ویرایش کامپوننت.
     * @param {Event} event - شیء رویداد.
     */
    EditComponent(event) {
      this.editComponent = event;

      if (event.EditComponent == true || event.EditComponent == false) {
        this.statusPage = 2;
      } else {
        this.statusPage = 1;
      }
    },
    /**
     * تنظیم تب فعال.
     * @param {Object} tab - شیء تب که باید فعال شود.
     */
    setActiveTab(tab) {
      this.activeTabSetter(tab);
      // close text headings and search section.
      this.showListHeadline({
        isSearchMode: false,
        isHeadingMode: false,
      });

      if (this.showSimilar) this.showSimilar = tab?.key == "content";

      this.mainComponentName = "EntityText";
      if (tab?.key == "content") {
        // if (this.activeEntityViewSchemaGetter?.key == this.routeKey)
        if (this.activeEntityViewSchemaGetter?.type)
          this.mainComponentName = this.activeEntityViewSchemaGetter?.type;
        else this.mainComponentName = "EntityText";
      } else if (tab.key == "meta") {
        this.mainComponentName = "PropertyBuilder";
      } else if (tab.key == "parser") {
        this.mainComponentName = "EntityRepetitionWords";
      } else if (tab.key == "gantt") {
        this.mainComponentName = "EntityChartGantt";
      } else if (tab.key == "graph") {
        this.mainComponentName = "EntityChartGraph";
      } else if (tab.key == "compare") {
        this.mainComponentName = "EntityQaSection";
      }
    },
    /**
     * تنظیم وضعیت صفحه به ۱ برای ویرایش واگذاری.
     */

    waiverEdit() {
      this.statusPage = 1;
    },
    /**
     * دریافت اطلاعات schema.
     */
    getSchemas() {
      let url = repoUrl() + entityApi.schema.list;

      this.httpService
        .postRequest(url, {
          organ: this.organNameGetter,
          system: "entityView",
          build_state: buildState(),
        })
        .then((response) => {
          const routeParamsKey = this.routeKey;

          let schemaBasedOnRouteKeyIndex = response.data.entityView.findIndex(
            (item) => item.key == routeParamsKey
          );
          schemaBasedOnRouteKeyIndex =
            schemaBasedOnRouteKeyIndex == -1 ? 0 : schemaBasedOnRouteKeyIndex;

          this.entityViewSchemaSetter(response.data.entityView);
          this.activeEntityViewSchemaSetter(
            response.data.entityView[schemaBasedOnRouteKeyIndex]
          );
          this.activeTabSetter(
            response.data.entityView[schemaBasedOnRouteKeyIndex].tabs[0]
          );

          this.renderAutoComplation++;
          this.updateMainContent();
        });
    },
    /**
     * تغییر وضعیت نمایش منوی سایدبار.
     */
    toggleSidebarMenu() {
      this.$store.commit("TOGGLE_SIDEBAR_MENU");
    },
    /**
     * تغییر وضعیت نمایش پنل لیست.
     */
    showToggleListPanel() {
      this.showListPanel = !this.showListPanel;
    },
    /**
     * دریافت مقدار یک داده بر اساس کلید و نوع آن (در صورت وجود).
     * @param {String} key - کلید داده مورد نظر.
     * @param {String} [type=""] - نوع داده (اختیاری).
     * @returns {String} - مقدار داده.
     */
    // getDataValue(key, type = "") {
    //   let value = "";
    //   if (this.selectedItemEntityGetter[key]) {
    //     value = this.selectedItemEntityGetter[key];
    //     if (type == "date") value = this.datefa(value);
    //   }
    //   return value;
    // },

    /**
     * دریافت اطلاعات موجودیت بر اساس نوع و شناسه آن.
     * @param {String} _entityType - نوع موجودیت.
     * @param {String} _entityId - شناسه موجودیت.
     */

    getEntityInfo(_entityType, _entityId) {
      if (this.fetchingData) return;
      this.fetchingData = true;

      this.entity_type = _entityType;

      if (_entityType == "qasection" || _entityType == "rgsection") {
        //در این حالت استفاده ندارد تست کردم
        // // برای تنظیم داده های هدر در تبهای مختلف غیر متن نیاز هست
        // let url = repoUrl() + repoApi.entity.qanonList;
        // url = url.replace("@index_key", _entityType);
        // url = url.replace("@parent_key", "qanon_id");
        // url = url.replace("@parent_id", _entityId);
        // url = url.replace("@from", 0);
        // url = url.replace("@countInPage", 1);
        // this.httpService.getRequest(url).then((response) => {
        //   if (response.hits.total.value > 0) {
        //     let res = response.hits.hits[0];
        //     this.entity = { ...res, ...res._source };
        //     this.SET_ITEM_ENTITY(this.entity);
        //     setDocumentTitle(this.selectedItemEntityGetter);
        //   }
        //   this.fetchingData = false;
        // });
      } else {
        let url = repoUrl() + repoApi.public.get;
        url = url.replace("{{index_key}}", _entityType);
        url = url.replace("{{entity_id}}", _entityId);

        this.httpService.getRequest(url).then((res) => {
          this.entity = { ...res, ...res._source };

          this.SET_ITEM_ENTITY(this.entity);
          this.fetchingData = false;
          useHead({
            title: this.selectedItemEntityGetter,
          });
        });
      }
    },
    /**
     * دریافت اطلاعات لیست موجودیت‌ها از localStorage در صورت عدم وجود در getter.
     */
    getListInformation() {
      const myList = localStorage.getItem("myList");
      this.jsonList = JSON.parse(myList);
      const myItem = localStorage.getItem("myItem");
      this.firstItem = JSON.parse(myItem);
      this.SET_LIST_ENTITY(this.jsonList);
      if (this.selectedItemEntityGetter === undefined) {
        this.SET_ITEM_ENTITY(this.firstItem);
        useHead({
          title: this.selectedItemEntityGetter,
        });
        // setDocumentTitle(this.selectedItemEntityGetter);
      }
    },
    /**
     * به‌روزرسانی تاریخ در عنصر با کلاس begin_date.
     */
    updateDate() {
      const myelement = document.getElementsByClassName("begin_date");
      const date = myelement[0].innerHTML;
    },

    /**
     * تنظیم نام کامپوننت پنل بر اساس مسیر جاری.
     */
    setPanelComponentName() {
      // if (this.$route.name == "entityEdit") {
      //   this.panelComponentName = "EntityTreeList";
      // } else

      if (this.$route.name == "navigationView") {
        this.panelComponentName = "navigation";
      } else if (this.$route.name == "entityResearch") {
        this.panelComponentName = "research";
      } else {
        this.panelComponentName = this.$route.name;
      }
    },
    setShowListRight(mainComponent = undefined) {
      let routeName = this.$route.name;

      if (mainComponent === "EntityChartGantt") {
        this.showListRight = false;
      } else if (routeName == "showEntity") {
        this.showListRight = false;
      } else if (routeName == "navigation" && !this.listEntityGetter) {
        this.showListRight = false;
      } else if (routeName == "research") {
        this.showListRight = false;
      } else this.showListRight = true;
    },
    /**
     * دریافت کامپوننت پنل بر اساس مسیر جاری.
     * @returns {String|null} - نام کامپوننت پنل.
     */
    getPanelComponent() {
      this.setShowListRight();

      if (!this.showListRight) return null;

      if (
        this.activeEntityViewSchemaGetter?.entityPanel &&
        this.activeEntityViewSchemaGetter?.entityPanel[this.$route.name]
      )
        return this.activeEntityViewSchemaGetter?.entityPanel[this.$route.name];
      else return this.activeEntityViewSchemaGetter?.entityPanel[0];
    },
    /**
     * به‌روزرسانی محتوای اصلی بر اساس کلید موجود در مسیر.
     */
    updateMainContent() {
      if (this.routeKey) {
        if (this.activeEntityViewSchemaGetter?.key == this.routeKey)
          this.mainComponentName = this.activeEntityViewSchemaGetter?.type;
        else this.mainComponentName = "EntityText";
      } else this.mainComponentName = "EntityText";
    },
    /**
     * یافتن ایندکس و بازگرداندن نام کامپوننت بر اساس کلید.
     * @param {String} keyName - کلید موجودیت.
     * @returns {String} - نام کامپوننت.
     */
    findIndexAndReturnComponentName(keyName) {
      const contentIndex = this.entityViewSchemaGetter?.findIndex(
        (item) => item.key == keyName
      );
      return this.entityViewSchemaGetter[contentIndex]?.type;
    },
    /**
     * پنهان کردن پنل.
     */
    hidePanel() {
      this.hideCircleButton = false;
      this.isVisiablePanel = false;
    },
    /**
     * تغییر حالت مقایسه.
     * @param {Boolean} item - وضعیت مقایسه.
     */
    changeCompare(item) {
      if (!item) {
        this.copmareSideBySide = false;
        this.compareLineByLine = true;
      } else {
        this.copmareSideBySide = true;
        this.compareLineByLine = false;
      }
    },
    closeSearchMode() {
      this.isSearchMode = false;
    },
    closeTreelistMode() {
      this.isHeadingMode = false;
    },
    getDataTree() {
      if (buildName() === "majles") {
        let url = repoUrl() + buildName() + "/" + entityApi.edit.treeList;
        url = url.replace("@index_key", this.routeKey);
        url = url.replace("@qanon_id", this.routeId);

        this.httpService.getRequest(url).then((res) => {
          this.dataTree = res.data;
          // this.loading = false;
        });
      } else if (buildName() === "hadith") {
        let id = this.routeId;
        let url = repoUrl() + libraryApi.tree.getDataTree;
        url = url.replace("@offset", 0);
        url = url.replace("@limit", 500);
        url = url.replace("@vol_id", id);
        url = url.replace("@q", "none");

        this.httpService.getRequest(url).then((res) => {
          this.dataTree = this.convertToTree(res.hits.hits);
          // this.loading = false;
        });
      }
    },
    /**
     * تبدیل داده‌های خطی به ساختار درختی.
     * @param {Array} rawData - آرایه‌ای از داده‌های ورودی که باید به ساختار درختی تبدیل شوند.
     * @returns {Array} - ساختار درختی شامل آیتم‌های سطح اول و زیرآیتم‌هایشان.
     */
    convertToTree(rawData) {
      let prevlevel = -1; // سطح قبلی برای مقایسه (مقدار اولیه -1 به معنای بدون سطح قبلی)
      let pathItems = []; // آرایه‌ای برای ذخیره مسیر آیتم‌ها در ساختار درختی
      let prevItem = undefined; // آیتم قبلی که در حال پردازش است

      let list = []; // لیست نهایی که شامل آیتم‌های سطح اول درخت است

      rawData.forEach((el) => {
        let jumpPage = el._source?.meta?.page;
        // استخراج سطح و ایجاد آیتم جدید
        let level = el._source?.meta?.level;
        let item = {
          id: el._id,
          text: el._source?.content,
          jumpPage: jumpPage,
          children: [],
        };

        // قرار دادن آیتم در ساختار درختی بر اساس سطح آن
        if (prevlevel == -1 || level == 1) {
          // اگر این اولین آیتم است یا سطح آن 1 است، به سطح اول اضافه می‌شود
          list.push(item);
          pathItems.push(item);
        } else if (level > prevlevel) {
          // اگر سطح فعلی بیشتر از سطح قبلی باشد، آیتم فرزند آیتم قبلی می‌شود
          prevItem.children.push(item);
          pathItems.push(item);
        } else if (level == prevlevel) {
          // اگر سطح فعلی برابر با سطح قبلی باشد، آیتم به خواهر/برادر آیتم قبلی اضافه می‌شود
          if (pathItems.length > 1) {
            pathItems[pathItems.length - 2].children.push(item);
          }
        } else {
          // اگر سطح فعلی کمتر از سطح قبلی باشد
          let diff = prevlevel - level; // اختلاف سطح فعلی و قبلی
          if (pathItems.length > diff + 1) {
            pathItems[pathItems.length - 1 - diff].children.push(item);
          }
        }

        // به‌روزرسانی مقادیر قبلی برای پردازش آیتم بعدی
        prevlevel = level;
        prevItem = item;
      });

      return list; // بازگرداندن ساختار درختی نهایی
    },
    chartGanttClickNode(event) {
      this.openModal("EntityQaSection", event.name, "");
      // .then(
      //   () => {
      //     // this.name = event.name;
      //     // this.y = event.y;
      //     // this.getChartTreeItems(this.name, this.y);
      //   }
      // );
    },
    linkedTitleClick(rowItem, tableColumn, index) {
      this.sectionItem = rowItem;
      setTimeout(() => {
        this.openModal("EntityQaHistory", "وضعیت", "");
      }, 500);
    },
    columnTitleClick(tableColumn) {
      console.log("5555555555");
      this.listItemsCompare = tableColumn;

      let id = this.routeId;

      let payload = {
        qanon_id: id,
        date: tableColumn.title,
      };

      let url = entityApi.chart.version;
      let key = this.activeEntityViewSchemaGetter?.key;
      url = url.replace("@index_key", key);

      this.httpService.postRequest(url, payload).then((res) => {
        this.versionItem = res.data;
        let data = res.data;
        data.forEach((element) => {
          this.text1Compare = element._source.content;
          this.text2Compare = element._source.content;
        });
        this.openModal("EntityShowVersionsQa", tableColumn.titleTooltip, "");
      });
    },
    handlerIconClick(tableColumn) {
      this.listItemsCompare = tableColumn;
      this.openModal("EntitiyModalCompareVersionQa", "مقایسه نسخه ها");
    },
    compareVersionsQanon(versionOneContent, versionTwoContent) {
      this.text1Compare = versionOneContent;
      this.text2Compare = versionTwoContent;

      this.isPrevComponent = "gantt";
      this.closeModal();
      this.mainComponentName = "EntityCompareText2";
    },
    showCompareModal() {
      this.isPrevComponent = "text";
      this.openModal("SelectEntityText", "انتخاب متن مقایسه");
    },
    editSections() {
      this.openModal("DraftImportEffectModal", "ویرایش");
    },
    chartGanttClickNode(event) {
      this.openModal("EntityQaSection", event.name, "");
      // .then(
      //   () => {
      //     // this.name = event.name;
      //     // this.y = event.y;
      //     // this.getChartTreeItems(this.name, this.y);
      //   }
      // );
    },
    linkedTitleClick(rowItem, tableColumn, index) {
      this.sectionItem = rowItem;
      setTimeout(() => {
        this.openModal("EntityQaHistory", "وضعیت", "");
      }, 500);
    },
    columnTitleClick(tableColumn) {
      this.listItemsCompare = tableColumn;

      let id = this.$route.params.id;

      let payload = {
        qanon_id: id,
        date: tableColumn.title,
      };

      let url = entityApi.chart.version;
      let key = this.activeEntityViewSchemaGetter?.key;
      url = url.replace("@index_key", key);

      this.httpService.postRequest(url, payload).then((res) => {
        this.versionItem = res.data;
        let data = res.data;
        data.forEach((element) => {
          this.text1Compare = element._source.content;
          this.text2Compare = element._source.content;
        });
        this.openModal("EntityShowVersionsQa", tableColumn.titleTooltip, "");
      });
    },
    handlerIconClick(tableColumn) {
      this.listItemsCompare = tableColumn;
      this.openModal("EntitiyModalCompareVersionQa", "مقایسه نسخه ها");
    },
    compareVersionsQanon(versionOneContent, versionTwoContent) {
      this.text1Compare = versionOneContent;
      this.text2Compare = versionTwoContent;

      this.isPrevComponent = "gantt";
      this.closeModal();
      this.mainComponentName = "EntityCompareText2";
    },
    showCompareModal() {
      this.isPrevComponent = "text";
      this.openModal("SelectEntityText", "انتخاب متن مقایسه");
    },
    editSections() {
      this.openModal("DraftImportEffectModal", "ویرایش");
    },
  },

  components: {
    AutoComplation: defineAsyncComponent(() =>
      import("@search/components/global/AutoComplation.vue")
    ),
    EntityQaRelation: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityQaRelation.vue")
    ),
    ComponentTextFish: defineAsyncComponent(() =>
      import("@search/components/entity/components/ComponentTextFish.vue")
    ),
    ComparisonEntity: defineAsyncComponent(() =>
      import("@search/components/entity/components/ComparisonEntity.vue")
    ),
    SelectEntityText: defineAsyncComponent(() =>
      import("@search/components/entity/components/SelectEntityText.vue")
    ),
    EntitySelectTerm: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntitySelectTerm.vue")
    ),
    EntityText: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityText.vue")
    ),
    EntityMqSection: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityMqSection.vue")
    ),
    EntityQaSection: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityQaSection.vue")
    ),
    EntityChartGraph: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityChartGraph.vue")
    ),
    EntityChartGantt: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityChartGantt.vue")
    ),
    EntityCompareText: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityCompareText.vue")
    ),
    EntityCompareText2: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityCompareText2.vue")
    ),
    EntitySimilar: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntitySimilar.vue")
    ),
    EntitySanad: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntitySanad.vue")
    ),
    EntityVoice: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityVoice.vue")
    ),
    EntityVideo: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityVideo.vue")
    ),
    EntityFile: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityFile.vue")
    ),
    EntityRepetitionWords: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityRepetitionWords.vue")
    ),
    LibraryText: defineAsyncComponent(() =>
      import("@search/components/entity/components/LibraryText.vue")
    ),
    EntityQaHistory: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityQaHistory.vue")
    ),
    EntityShowVersionsQa: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntityShowVersionsQa.vue")
    ),
    EntitiyModalCompareVersionQa: defineAsyncComponent(() =>
      import("@search/components/entity/components/EntitiyModalCompareVersionQa.vue")
    ),
    UserHistory: defineAsyncComponent(() =>
      import("@search/components/entity/sidebar-panels/UserHistory.vue")
    ),
    TextSearch: defineAsyncComponent(() =>
      import("@search/components/entity/sidebar-panels/TextSearch.vue")
    ),
    NavigationView: defineAsyncComponent(() =>
      import("@search/components/entity/sidebar-panels/Navigation.vue")
    ),
    Navigation: defineAsyncComponent(() =>
      import("@search/components/entity/sidebar-panels/Navigation.vue")
    ),
    Research: defineAsyncComponent(() =>
      import("@search/components/entity/sidebar-panels/Research.vue")
    ),
    EntityTreeList: defineAsyncComponent(() =>
      import("@search/components/entity/sidebar-panels/EntityTreeList.vue")
    ),
    PropertyBuilder: defineAsyncComponent(() =>
      import("~/components/other/PropertyBuilder.vue")
    ),
    TagsEdit: defineAsyncComponent(() =>
      import("~/components/other/TagsEdit.vue")
    ),
    DraftImportEffectModal: defineAsyncComponent(() =>
      import("@search/components/entity/modals/DraftImportEffectModal.vue")
    ),
  },
};
</script>
<style scoped lang="scss">
.button-cloce {
  position: relative;
  right: 3em;
  top: 1em;
  z-index: 100;
  .btn_close {
    border-radius: 50%;
    font-size: 0.8rem;
    width: 2.5em;
    height: 2.5em;
    box-shadow: 0px 0px 7px 1px #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(1.5em);
    background-color: #eee;

    &:hover {
      filter: brightness(0.8);
    }
  }
}

.nav-tabs-container {
  display: flex;
  justify-content: center;
}
.filter-list-container {
  // padding-top: 0.5em;
  // // position: fixed;

  // z-index: 9;
  // width: 20em;
  height: 100dvh;
  .main-filter {
    display: none;
  }
  .mobile-mode {
    display: flex;
    justify-content: flex-end;

    .btn {
      border-radius: 50%;
      // font-size: 0.7rem;
      width: 2.5em;
      height: 2.5em;
      box-shadow: 0px 0px 7px 1px #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateX(1.5em);
      background-color: #eee;

      &:hover {
        filter: brightness(0.8);
      }
    }
  }

  &.expanded {
    top: 0;
    bottom: 0;
    background: #fff;
    justify-content: center;
    box-shadow: -1px 0px 7px 1px #eee;
    // width: 20em;
    .main-filter {
      display: block;
      height: 90dvh;
    }
  }
}
.main-filter {
  padding: 0 1em;
  // overflow: auto;
}
.component_page {
  height: calc(100dvh - 13em);
  overflow: auto;
  padding-left: 1em;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc #eee;
}
.entity-tree-list {
  border-radius: 0.5em;
  overflow-y: auto;
  box-shadow: 0 0.4688rem 2.1875rem rgba(4, 9, 20, 0.03),
    0 0.9375rem 1.4063rem rgba(4, 9, 20, 0.03),
    0 0.25rem 0.5313rem rgba(4, 9, 20, 0.03),
    0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
}

@media (max-width: 575.98px) {
  .component_page {
    height: calc(100dvh - 15em);
    padding-left: 0.5em;
  }
  .button-cloce {
    right: 2em;
  }
  .filter-list-container {
    margin-right: -1em;
  }
  .main-filter {
    width: 20em !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .component_page {
    height: calc(100dvh - 16em);
  }
  .filter-list-container {
    margin-right: -1em;
  }
  .main-filter {
    width: 20em !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .component_page {
    height: calc(100dvh - 16em);
  }
  .filter-list-container {
    width: 20em !important;
    margin-right: -1em;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .main-filter {
    height: calc(100dvh - 11em);
    // overflow: auto;
  }
  .component_page {
    height: calc(100dvh - 15em);
  }
}
@media (min-width: 1200px) {
  .main-filter {
    height: calc(100dvh - 5em);
    // overflow: auto;
  }
}
</style>
