<template>
  <div class="search-content">
    <div class="" v-if="viewMode == 'list'">
      <div v-if="listAnswer?.length">
        <div class="search-items firefox-scrollbar">
          <div
            class="search-items__item"
            v-for="(item, i) in listAnswer"
            :key="i"
          >
            <div v-if="item.inner_hits?.by_collapse">
              <div class="ifffffffffffff search-items__meta flex-column">
                <div class="mb-3">
                  <a
                    @click.prevent="showMultiText(item._id, 'branch')"
                    @auxclick.prevent.stop="
                      showMultiText(item._id, 'branch')
                    "
                    class="text__15 text__dark ms-1"
                    >دوره : {{ item._source.branch ?? "--" }}</a
                  >
                  <span class="text__15 text__dark-blue ms-1"
                    >/ {{ item._source.author }}
                  </span>
                  <span class="text__15 text__dark-blue ms-1"
                    >/ کد دوره:
                    {{
                      item._source.research_code.length
                        ? item._source.research_code
                        : "--"
                    }}
                  </span>
                </div>
                <div class="search-items__header">
                  <span class="search-items__label text__13 text__dark-gray">{{
                    item._source.format
                  }}</span>

                  <span v-if="item._source.title || item._source.subtitle">
                    {{ item._source.title ?? subtitle }}
                  </span>
                  <span v-else>&nbsp;--</span>


                  <span v-if="item._source.subject.length" class="text__15">
                    &nbsp;/موضوع:&nbsp;
                    <div v-for="(sub, key) in item._source.subject">
                      {{ key == 0 ? "" : ", " }}
                      {{ sub.title }}
                    </div>
                  </span>

                  <span class="text__15" v-else>
                    &nbsp;/&nbsp;واژگان کلیدی:
                    {{
                      item._source.keywords.length
                        ? item._source.keywords
                        : "--"
                    }}
                  </span>
                  <span>
                    &nbsp;/&nbsp;تاریخ:
                    {{ shamsiDate(item._source.begin_date) }}
                  </span>
                  <!-- <a v-else class="text__15 "> -->
                  <!-- {{ item._source.subtitle }} -->
                  <!-- </a> -->
                </div>
              </div>
              <div
                v-html="getInnerItems(item)"
                class="search-items__detail text__15 line-clamp__2"
              ></div>
            </div>
            <div v-else>
              <div class="elseeeeeeeee search-items__header">
                <a class="search-items__label text__13 text__dark-gray">{{
                  item._source.format
                }}</a>

                <a
                  class="search-items__title text__15 text__blue"
                  :href="`navigation/list/${activeTabGetter?.key}/${
                    item._id
                  }/searchtext=${textSearch ?? undefined}`"
                  @click.prevent="
                    showtext(item._source, listAnswer, i, item._id)
                  "
                  @auxclick.prevent.stop="
                    showtext(item._source, listAnswer, i, item._id)
                  "
                  v-html="highlightKey(item, 'title', 'subtitle')"
                >
                </a>

                <!-- <span v-if="item._source.subject.length" class="text__15">
                  موضوع:
                  <div v-for="(sub, key) in item._source.subject">
                    {{ key == 0 ? "" : ", " }}
                    {{ sub.title }}
                  </div>
                </span>
                <span v-else-if="item._source.keywords.length" class="text__15">
                  واژگان کلیدی:
                  {{ item._source.keywords }}
                </span> -->
              </div>
              <div                
                class="text__15 text__dark-gray search-items__code"
              >
                <span style="margin-left: 10px"
                  >کد داخلی :
                  {{
                    item._source.meet_lid && item._source.meet_lid.trim() !== ""
                      ? item._source.meet_lid
                      : "--"
                  }}</span
                >
                <span style="margin-left: 10px"
                  >کد جلسه :
                  {{
                    item._source.meet_code &&
                    item._source.meet_code.trim() !== ""
                      ? item._source.meet_code
                      : "--"
                  }}
                </span>
                <span style="margin-left: 10px"
                  >کد دوره :
                  {{
                    item._source.research_code &&
                    item._source.research_code.trim() !== ""
                      ? item._source.research_code
                      : "--"
                  }}
                </span>
                <span style="margin-left: 10px"
                  >کد پورتال : {{ item._source.id ?? "--" }}
                </span>
                <span
                  style="margin-left: 10px"
                  v-if="
                    !item?.highlight && selectedlists?.list_key == 'lasttitle'
                  "
                  >تاریخ : {{ datefa(item._source.begin_date) }}</span
                >
              </div>
              <div class="search-items__content">
                <div class="search-items__meta">
                  <a
                    @click.prevent="showMultiText(item._id, 'branch')"
                    @auxclick.prevent.stop="
                      showMultiText(item._id, 'branch')
                    "
                    class="text__15 text__dark ms-1"
                    >دوره :
                    <span v-html="highlightKey(item, 'branch')"></span> ،</a
                  >
                  <span class="text__15 text__dark-blue ms-1"
                    >{{ item._source.author }}
                  </span>
                </div>

                <div
                  v-html="highlightText(item)"
                  class="search-items__detail text__15 line-clamp__2"
                ></div>
                <div v-if="item._source.keywords" class="search-items__meta">
                  <span class="text__15 ms-1">واژه‌گان :</span>
                  <span class="text__15 text__dark-gray search-items__code">{{
                    item._source.keywords
                  }}</span>
                </div>
                <div class="text__15 text__dark-gray search-items__code">
                  <span v-if="item._source.films" style="margin-left: 10px"
                    >فیلم : {{ item._source.films }}</span
                  >
                  <span v-if="item._source.voices" style="margin-left: 10px"
                    >صوت : {{ item._source.voices }}</span
                  >
                  <span v-if="item._source.photos" style="margin-left: 10px"
                    >تصاویر : {{ item._source.photos }}</span
                  >
                </div>
                <div
                  v-if="countAudio(item) || item._source?.subject?.length"
                  class="search-items__meta"
                >
                  <span
                    v-if="item._source?.subject?.length"
                    class="text__15 ms-1"
                    >موضوع :
                    <span
                      v-for="(subj, j) in item._source.subject"
                      :key="j"
                      class="text__15 text__dark-gray"
                      style="margin-left: 10px"
                      >{{ subj.title }}</span
                    >
                  </span>
                </div>
              </div>
              <!-- <div v-if="showActionMenu" class="search-item__actions"> -->
              <div class="search-item__actions" v-if="showActions">
                <span class="tavasi tavasi-more-vert"></span>
                <button
                  v-can="'favorite_create'"
                  @click.pevent="AddToFavorites(item, i)"
                  title="علاقه مندی ها"
                  class="btn show-detail-btn favorites"
                  type="button"
                >
                  <svg
                    class="icon"
                    :class="
                      item._source.tbookmark == 1
                        ? 'icon-bookmark-1'
                        : 'icon-bookmark-2'
                    "
                  >
                    <use
                      :xlink:href="
                        item._source.tbookmark == 1
                          ? '#icon-bookmark-1'
                          : '#icon-bookmark-2'
                      "
                    ></use>
                  </svg>
                </button>
                <!-- <button
                v-can="'search_analyze'"
                @click="showDetails(item)"
                title="نمایش جزییات"
                class="btn show-detail-btn"
                type="button"
              >
                <span class="tavasi tavasi-eye"></span>
              </button> -->
                <button
                  v-can="'search_summary'"
                  @click="changeCurrent(i)"
                  title="مشخصات"
                  class="btn show-detail-btn -rotate-180"
                  type="button"
                >
                  <span class="tavasi tavasi-Component-71--1"></span>
                </button>
                <button-component
                  :title="copyButtonTitleMaker(item._id)"
                  buttonText=""
                  class="btn show-detail-btn px-1"
                  @click="copyToClipboard('', urlResolver(item._id))"
                >
                  <svg class="icon icon-copy2 fz-8">
                    <use xlink:href="#icon-copy2"></use>
                  </svg>
                </button-component>
              </div>
            </div>
          </div>
        </div>
        <jahat-pagination
          class="pagination"
          style="font-size: 13px"
          v-if="page.total"
          :paginationInfo="page"
          @page-changed="pageChanged"
          @page-limit-changed="pageLimitChanged"
          @sort-changed="sortChanged"
        >
        </jahat-pagination>
      </div>
      <no-data v-else></no-data>
    </div>
    <div class="container-fluid" v-if="viewMode == 'table'">
      <div class="row">
        <div class="col-12 px-0">
          <my-table
            :height="'calc(-16em + 100vh)'"
            :items="listAnswer"
            :tableColumns="domainActiveGetter?.table_columns"
            :tableActions="tableActions"
            :paginationInfo="pagination"
            :sortingInfo="sorting"
            @page-changed="pageChanged"
            @page-limit-changed="pageLimitChanged"
            @show-details="showDetailsHandler"
            @copy-link="copyLinkHandler"
            @on-linked-title-click="onOnLinkedTitleClick"
            @show-text="showTextPage"
            :showHeaderSortButton="false"
            class="my-table px-0"
          >
          </my-table>
        </div>
      </div>
    </div>
    <base-modal-v2
      :hasFooter="false"
      v-if="showModal"
      :selectedItem="selectedItem"
      @close-modal="closeModal"
    >
      <SubjectModal></SubjectModal>
      <!-- <template v-slot:footer> This is a new modal footer. </template> -->
    </base-modal-v2>
  </div>
</template>

<script>
import favoriteApi from "~/apis/favoriteApi";

import tableActions from "~/json/search/json/listTableContextMenu";
import { mapState, mapActions } from "pinia";
import idbUtil from "~/mixins/idb.js";

/**
 * @vue-prop {Array} [summeryKeys=] - کلیدهای خلاصه
 * @vue-prop {Object} [pagination=] - صفحه بندی
 * @vue-prop {Object} [listSelectedPoint=] - نقطه انتخاب شده در لیست
 *
 * @vue-data {Boolean} showModal - وضعیت نمایش مدال
 * @vue-data {undefined} selectedItem - آیتم انتخاب شده
 * @vue-data {Number} page - شماره صفحه فعلی
 * @vue-data {Array} listAnswer - لیست پاسخ‌ها
 * @vue-data {Number} totalCount - تعداد کل آیتم‌ها
 * @vue-data {String} typeCount - نوع تعداد
 * @vue-data {Number} countInPage - تعداد در هر صفحه
 * @vue-data {Number} maxPage - تعداد بیشینه صفحات
 * @vue-data {Number} currentPage - صفحه فعلی
 * @vue-data {Number} beginPage - صفحه آغازین
 * @vue-data {Number} endPage - صفحه پایانی
 * @vue-data {Array} listPage - لیست صفحات
 * @vue-data {String} textSearch - متن جستجو
 * @vue-data {undefined|Object} httpService - سرویس HTTP
 * @vue-data {Object} sorting - تنظیمات مرتب‌سازی
 * @vue-data {String} sorting.sortby - فیلد مرتب‌سازی بر اساس
 * @vue-data {String|undefined} sorting.sortorder - ترتیب مرتب‌سازی (asc | desc | none)
 *
 * @vue-computed {Object} [mapState.userPermisionGetter] - دریافت مجوزهای کاربر
 * @vue-computed {Object} [mapState.currentUser] - کاربر فعلی
 * @vue-computed {Object} [mapState.selectedlists] - بازگرداندن لیست‌های انتخاب شده
 * @vue-computed {Object} [mapState.activeTabGetter] - دریافت تب فعال جستجو
 * @vue-computed {Object} [mapState.selectedItemEntityGetter] - بازگرداندن آیتم انتخاب شده
 * @vue-computed {Boolean} [showActionMenu] - نمایش منوی اقدام
 *
 * @vue-event {Function} mapActions.SET_LIST_ENTITY - تنظیم لیست انتیتی
 * @vue-event {Function} mapActions.SET_ITEM_ENTITY - تنظیم ایتم  انتیتی
 */

export default {
  mixins: [idbUtil],
  props: {
    viewMode: {
      default: "table",
    },
    summeryKeys: {
      default() {
        return [];
      },
    },
    courseKeys: {
      default() {
        return [];
      },
    },
    pagination: {
      default() {
        return {};
      },
    },
    listSelectedPoint: {
      default() {
        return [];
      },
    },
    // tableColumns: {
    //   default() {
    //     return [];
    //   },
    // },
    activeTabGetter: {
      default() {
        return {};
      },
    },
    listItem: {
      default() {
        return {};
      },
    },
    showActions: {
      default: true,
    },
  },
  async beforeMount() {
    this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
    this.db = await this.getDb(this.activeTabGetter.key);
    this.ready = true;
  },
  mounted() {
    window.scrollTo(0, 0);
    if (this.$route.query.q) this.searchText = this.$route.query.q;
  },
  watch: {
    listSelectedPoint(newVal) {
      this.listAnswer = newVal;
    },
    listItem(newVal) {
      this.listAnswer = newVal;
    },
    
  },
  data() {
    return {
      tableActions: tableActions,
      tableColumns: [
        { key: "title", title: "عنوان", width: "6", trancate_word: 6 },
        { key: "ts_ref", title: "مرجع تصویب", width: "2" },
        { key: "ts_date", title: "تاریخ تصویب", width: "1" },
      ],

      showModal: false,
      selectedItem: undefined,
      page: this.pagination,
      listAnswer: [],
      totalCount: 0,
      typeCount: "",
      countInPage: 0,
      maxPage: 0,
      currentPage: 1,
      beginPage: 1,
      endPage: 1,
      listPage: [],
      textSearch: "",
      httpService: undefined,
      sorting: {
        sortby: "created",
        sortorder: undefined, // asc | desc | none
      },

      //بلا استفاده ها

      // navigationOptions: [],
      // maxLength: 250,
      // listId: undefined,
      // projectId: undefined,
    };
  },
  computed: {
    ...mapState(["userPermisionGetter", "currentUser", "selectedlists"]),
    // ...mapState(useSearchStore, ["activeTabGetter"]),
    ...mapState("entity", ["selectedItemEntityGetter"]),
    ...mapState(useSearchStore, ["searchActiveTabGetter", "domainActiveGetter"]),

    showActionMenu() {
      let show = false;
      if (this.userPermisionGetter?.length)
        ["search_analyze", "search_summary"].forEach(
          (item) =>
            (show =
              this.currentUser.user_level > 1 ||
              this.userPermisionGetter.includes(item))
        );

      return show;
    },
  },
  methods: {
    // ...mapActions("list", ["SET_SELECTED_ITEM", "SET_LIST"]),
    ...mapActions("entity", ["SET_ITEM_ENTITY", "SET_LIST_ENTITY"]),
    shamsiDate(begin_date) {
      return new Date(begin_date).toLocaleString("fa").split(",")[0];
    },
    showTextPage(index) {
      const item = this.listAnswer[index];
      this.showtext(item._source, this.listAnswer, index, item._id);
    },

    onOnLinkedTitleClick({ rowItem, tableColumn, index }) {
      this.showtext(rowItem._source, this.listAnswer, index, rowItem._id);
    },
    showDetailsHandler(event) {
      this.$emit("changeCurrent", this.listAnswer[event.index]);
    },
    copyLinkHandler(event) {
      let id = this.listAnswer[event]._id;

      copyToClipboard("", this.urlResolver(id));
    },
    copyButtonTitleMaker(id) {
      return `کپی لینک: link:\n${location.origin + this.urlResolver(id)}`;
    },
    //This function adds a new favorite to the user's favorites
    /**
     * افزودن یا حذف آیتم به/از علاقه‌مندی‌ها
     * این متد بررسی می‌کند که آیا آیتم در علاقه‌مندی‌ها قرار دارد یا خیر. اگر ندارد، آن را اضافه می‌کند و اگر دارد، آن را حذف می‌کند.
     *
     * @param {Object} item - آیتم مورد نظر
     * @param {Number} index - اندیس آیتم در لیست
     */
    AddToFavorites(item, index) {
      if (item._source.tbookmark == 0) {
        let url = favoriteApi.favorite.add;
        url = url.replace("{{data_type}}", "bookmark");
        url = url.replace("{{ref_key}}", this.activeTabGetter?.key);
        const formData = {
          ref_id: item._id,
          title: item._source.title,
        };
        this.httpService.postRequest(url, formData).then((res) => {
          // this.UpdateList();
          //refresh After removing or adding favorites
          //this.$emit("UpdateList", item.tbookmark);
          this.updateListAnswer(index, "tbookmark", 1);
        });
      } else {
        let url = favoriteApi.favorite.deleteByRefid;
        url = url.replace("{{data_type}}", "bookmark");
        url = url.replace("{{index_key}}", this.activeTabGetter?.key);
        url = url.replace("{{ref_id}}", item._id);

        const formData = {};
        this.httpService.postRequest(url, formData).then((res) => {
          //refresh After removing or adding favorites
          //this.$emit("UpdateList", item.tbookmark);
          this.updateListAnswer(index, "tbookmark", 0);
        });
      }
    },

    /**
     * به‌روزرسانی مقدار مشخصی از آیتم در لیست پاسخ‌ها
     * @param {Number} index - اندیس آیتم در لیست
     * @param {String} key - کلید مورد نظر برای به‌روزرسانی
     * @param {Any} value - مقدار جدید برای کلید مورد نظر
     */
    updateListAnswer(index, key, value) {
      if (index in this.listAnswer) {
        if (key in this.listAnswer[index]["_source"])
          this.listAnswer[index]["_source"][key] = value;
      }
    },

    /**
     * تبدیل تاریخ به فرمت فارسی
     * @param {String|Date} item - تاریخ مورد نظر
     * @return {String} - تاریخ به فرمت فارسی
     */
    datefa(item) {
      var m = item;
      var d = new Date(m).toLocaleDateString("fa-IR");
      return d;
    },

    /**
     * شمارش تعداد فایل‌های صوتی
     * @param {Object} item - آیتم مورد نظر
     * @return {Number} - تعداد فایل‌های صوتی
     */
    countAudio(item) {
      return item._source.voices;
    },

    /**
     * نمایش جزئیات آیتم انتخاب شده
     * @param {Object} selectedItem - آیتم انتخاب شده
     */
    showDetails(selectedItem) {
      this.selectedItem = selectedItem;
      this.openModal();
    },

    /**
     * بستن مدال
     */
    closeModal() {
      $("#subject-modal")?.modal("hide");

      setTimeout(() => {
        this.showModal = false;
      }, 500);
    },

    /**
     * باز کردن مدال
     */
    openModal() {
      this.showModal = true;

      setTimeout(() => {
        $("#subject-modal")?.modal(
          { backdrop: "static", keyboard: false },
          "show"
        );
      }, 500);
    },
    /**
     * دریافت آیتم‌های داخلی
     * @param {Object} item - آیتم مورد نظر
     * @return {String} - متن حاوی آیتم‌های داخلی
     */
    getInnerItems(item) {
      if (!item.inner_hits?.by_collapse) return "";
      let text = "";
      let index = -1;
      item.inner_hits.by_collapse.hits.hits.forEach((el) => {
        index++;
        if (index > 0) {
          let content = this.highlightText(el);
          if (content.length == 0) {
            content = `<span class="text__15 text__dark-gray search-items__code">
          <span style="margin-left: 10px">کد داخلی : ${
            el._source.meet_lid ?? "--"
          }</span>
          <span style="margin-left: 10px">کد جلسه : ${
            el._source.meet_code ?? "--"
          }</span>
          <span style="margin-left: 10px">کد دوره : ${
            el._source.research_code ?? "--"
          }</span>
          <span style="margin-left: 10px">کد پورتال : ${
            el._source.id ?? "--"
          }</span>
        </span>`;
          }

          // show/hide content label(title) if it is valid.
          let hasTitle = el._source.title.length ? "" : "d-none";
          // convert date to shamsi date.
          let shamsiDate = new Date(el._source.begin_date)
            .toLocaleString("fa")
            .split(",")[0];

          // set init value.
          let subjectsOrKeywords = el._source.keywords.length
            ? el._source.keywords
            : "--";
          // set label init value.
          let keyTitle = "<span>/&nbsp;واژگان کلیدی</span>";
          // check if subject exists, because it has higher priority than keywords.
          let hasSubject = el._source.subject?.length;
          // check if subjects if filled.
          if (hasSubject) {
            // reset variable.
            subjectsOrKeywords = "";
            // make subjects string.
            el._source.subject.forEach((item, index) => {
              subjectsOrKeywords += index == 0 ? "" : ", ";
              subjectsOrKeywords += item.title;
            });
            // reset label
            keyTitle = "<span>/&nbsp;موضوع</span>";
          }

          // making the content based on the top variables.
          text += `<div class="search-items__header ">
            <span class="search-items__label text__13 text__dark-gray ${hasTitle}">${el._source.format}</span>
            <span class='one-line mb-2'>${content}</span>
            <span> ${keyTitle} : ${subjectsOrKeywords}</span>
            <span>/&nbsp;تاریخ : ${shamsiDate}</span>
            </div>`;
        }
      });
      return text;
    },

    /**
     * برجسته‌سازی کلیدهای مورد نظر در متن
     * @param {Object} item - آیتم مورد نظر
     * @param {String} key1 - کلید اول
     * @param {String} [key2=""] - کلید دوم (اختیاری)
     * @param {String} [key3=""] - کلید سوم (اختیاری)
     * @return {String} - متن برجسته‌سازی شده
     */
    highlightKey(item, key1, key2 = "", key3 = "") {
      var text = "";
      if (item.highlight) {
        if (item.highlight[key1]) text = item.highlight[key1].join("... ");
        else if (key2 && item.highlight[key2])
          text = item.highlight[key2].join("... ");
        else if (key3 && item.highlight[key3])
          text = item.highlight[key3].join("... ");
      }

      if (text == "") {
        if (item._source[key1]) text = item._source[key1];
        else if (key2 && item._source[key2]) text = item._source[key2];
        else if (key3 && item._source[key3]) text = item._source[key3];

        if (text.length > 500) text = text.substring(0, 500);
      }
      return text;
    },
    /**
     * برجسته‌سازی متن بر اساس کلیدهای خلاصه
     * @param {Object} item - آیتم مورد نظر
     * @return {String} - متن برجسته‌شده
     */
    highlightText(item) {
      let key_one = this.summeryKeys[0];
      let key_two = this.summeryKeys[1];

      // branch = عنوان دوره
      if (this.domainActiveGetter.key == "branch") {
        key_one = this.courseKeys[0];
        key_two = this.courseKeys[1];
      }

      var text = this.highlightKey(item, key_one, key_two, "mindex");
      return text;
    },

    /**
     * تولید URL بر اساس شناسه
     * @param {String} _id - شناسه آیتم
     * @return {String} - URL تولیدشده
     */
    urlResolver(_id) {
      const routeData = this.$router.resolve({
        name: "navigationView",
        params: {
          id: _id,
          key: this.activeTabGetter?.key,
        },
        query: {},
      });
      return routeData.href;
    },

    /**
     * نمایش متن چندگانه در یک تب جدید
     * @param {String} id - شناسه آیتم
     * @param {String} _listkey - کلید لیست
     */
    showMultiText(id, _listkey) {
      let _name = "navigation";
      const routeData = this.$router.resolve({
        name: _name,
        params: {
          id: id,
          key: this.activeTabGetter?.key,
        },

        query: {
          searchtext: this.textSearch ?? undefined,
          listkey: _listkey,
        },
      });

      window.open(routeData.href, "_blank");
    },

    /**
     * نمایش متن آیتم در یک تب جدید
     * @param {Object} item - آیتم مورد نظر
     * @param {Array} listAnswer - لیست پاسخ‌ها
     * @param {Number} i - اندیس آیتم
     * @param {String} _id - شناسه آیتم
     */
    async showtext(_source, listAnswer, rowItem, _id) {
      let cloneList = structuredClone(listAnswer);

      cloneList.forEach((item, index) => {
        cloneList[index] = { ...item, ..._source };
      });

      let cloneItem = structuredClone(rowItem);
      cloneItem = { ...rowItem, _id: _id };

      const enableIdb = Boolean(import.meta.env.VITE_ENABLE_IDB);
      if (enableIdb) {
        this.addDisabled = true;
        await this.addToIdb(this.activeTabGetter?.key, cloneItem);
        this.addDisabled = false;
      }

      this.SET_ITEM_ENTITY(cloneItem);
      this.SET_LIST_ENTITY(cloneList);
      localStorage.setItem("myList", JSON.stringify(cloneList));
      localStorage.setItem("myItem", JSON.stringify(cloneItem));

      const domainName = buildName() + "";
      let _name = "navigationView";

      const routeData = this.$router.resolve({
        name: _name,
        params: {
          id: cloneItem._id,
          key: this.activeTabGetter?.key,
        },

        query: {
          searchtext: this.textSearch ?? undefined,
        },
      });

      window.open(routeData.href, "_blank");
    },

    /**
     * تنظیم پاسخ‌ها و به‌روزرسانی صفحه‌بندی
     * @param {Array} list - لیست پاسخ‌ها
     * @param {Number} [count=-1] - تعداد کل آیتم‌ها
     * @param {String} [_typeCount=""] - نوع تعداد
     */
    setAnswer: function (list, count = -1, _typeCount = "") {
      if (count != -1) {
        this.totalCount = count;
        this.typeCount = _typeCount == "eq" ? "مساوی با " : "بیشتر از ";
        this.maxPage =
          this.totalCount == 0
            ? 0
            : Math.floor(this.totalCount / this.countInPage) + 1;
        this.currentPage = 1;
        this.beginPage = 2;
        this.endPage = this.beginPage + 3;
        if (this.endPage > this.maxPage - 1) {
          this.endPage = this.maxPage - 1;
          if (this.beginPage > 2) this.beginPage = this.beginPage - 1;
        }
        this.updateListPage();
      }

      const total = count;
      const pages = Math.ceil(total / this.page.limit);
      const pagination = {
        total: total,
        pages: pages == 0 ? 1 : pages,
      };

      this.page = { ...this.pagination, ...pagination };

      this.listAnswer = list;
      this.scrollToTop();
      localStorage.setItem("answer", JSON.stringify(this.listAnswer));
    },

    /**
     * به‌روزرسانی لیست صفحات
     */
    updateListPage: function () {
      this.listPage = [];
      for (let i = this.endPage; i >= this.beginPage; i--) {
        this.listPage.push(i);
      }

      setTimeout(() => {
        this.scrollToTop();
      }, 700);
    },

    /**
     * رفتن به صفحه بعدی یا قبلی
     * @param {Number} item - جهت حرکت (1 برای بعدی، -1 برای قبلی)
     */
    nextPage: function (item) {
      if (item > 0) this.setPage(this.currentPage + 1);
      else this.setPage(this.currentPage - 1);
    },

    /**
     * تنظیم صفحه مورد نظر
     * @param {Number} item - شماره صفحه
     */
    setPage: function (item) {
      if (item == -1) {
        // begin ...
        item = 3;
        this.beginPage = 2;
        this.endPage = 5;
      } else if (item == -2) {
        // end ...
        item = this.maxPage - 3;
        this.beginPage = this.maxPage - 5;
        this.endPage = this.maxPage - 1;
      } else if (item == this.beginPage) {
        this.beginPage--;
        if (this.beginPage > 5) {
          this.beginPage--;
          this.endPage--;
        } else {
          this.beginPage = 2;
          this.endPage = 5;
        }
      } else if (item == this.endPage) {
        if (this.endPage < this.maxPage - 5) {
          this.endPage++;
          this.beginPage++;
        } else {
          this.beginPage = this.maxPage - 5;
          this.endPage = this.maxPage - 1;
        }
      }
      this.updateListPage();

      this.currentPage = item;
      this.$emit("changePage", item - 1);
    },

    /**
     * تغییر آیتم فعلی و ارسال آن با استفاده از رویداد
     * @param {Number} i - اندیس آیتم در لیست پاسخ‌ها
     */
    changeCurrent: function (i) {
      this.$emit("changeCurrent", this.listAnswer[i]);
    },

    /**
     * تنظیم متن جستجو و تعداد آیتم‌ها در هر صفحه
     * @param {String} item - متن جستجو
     * @param {Number} countInPage - تعداد آیتم‌ها در هر صفحه
     */
    setTextSearch(item, countInPage) {
      this.textSearch = item;
      this.countInPage = countInPage;
    },

    /**
     * اسکرول به بالای صفحه
     */
    scrollToTop() {
      window.scrollTo(0, 0);
    },

    /**
     * تغییر محدودیت صفحه‌بندی و ارسال آن با استفاده از رویداد
     * @param {Object} paging - تنظیمات صفحه‌بندی
     */
    pageLimitChanged(paging) {
      this.resetPagination();
      this.page.limit = paging.limit;

      this.$emit("changePage", this.page);
    },

    /**
     * تغییر صفحه فعلی و ارسال آن با استفاده از رویداد
     * @param {Object} paging - تنظیمات صفحه‌بندی
     */
    pageChanged(paging) {
      let page = paging.pageNumber;
      page -= 1;
      this.page.offset = page * paging.limit;
      this.page.limit = paging.limit;
      this.page.page = paging.pageNumber;

      this.$emit("changePage", this.page);
    },

    /**
     * تغییر مرتب‌سازی و ارسال آن با استفاده از رویداد
     * @param {Object} sorting - تنظیمات مرتب‌سازی
     */
    sortChanged(sorting) {
      this.page.page = this.page.offset = 0;
      this.sorting = sorting;

      this.$emit("changePage", this.sorting);
    },

    /**
     * بازنشانی تنظیمات صفحه‌بندی به حالت اولیه
     */
    resetPagination() {
      this.page = {
        pages: 0,
        total: 0,
        page: 1,
        offset: 0,
        limit: 10,
      };
    },

    /**
     * دریافت لیست آیتم‌ها بر اساس نوع موجودیت
     * @param {String} _entityType - نوع موجودیت
     */
    getList(_entityType) {
      if (this.fetchingData) return;
      this.fetchingData = true;

      this.entity_type = _entityType;

      let url =
        searchApi.Farhanghestan.search_normal +
        `/${this.page.offset}/${this.page.limit}`;

      this.httpService.getRequest(url).then((res) => {
        this.listEntity = res.hits.hits;

        const total = res.hits.total.value;
        const pages = Math.ceil(total / this.page.limit);
        const pagination = {
          total: total,
          pages: pages == 0 ? 1 : pages,
        };

        this.page = { ...this.pagination, ...pagination };

        this.fetchingData = false;
      });
    },
  },

};
</script>

<style lang="scss" scoped>
// .detail-page__tab-content {
// width: 90%;
// margin-right: 0 !important;
// position: relative;
// &.serve-majles {
// width: 100%;
// }
// }
// .search-items {
//     overflow-y: auto;
//     height: calc(100vh - 13em);
// }

.search-items__item {
  position: relative;
  padding: 1em;
  overflow: hidden;

  &:not(:last-child) {
    margin-bottom: 30px;
  }

  &:hover,
  &.active {
    background-color: var(--list-background-color);

    .search-item__actions {
      // width: 6.5em;
      width: auto;

      transition: width 0.5s;
      background: #fff;
      border-radius: 0 0.5em 0.5em 0;

      .tavasi-more-vert {
        transition: all 0.2s;
        display: none;
      }
    }
  }
}

.search-item__actions {
  position: absolute;
  left: 0;
  width: 1.6em;
  top: 1em;
  // overflow: hidden;
  transition: all 0.5s;
  display: flex;
  align-items: center;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.175rem 0.35rem;

    &:hover {
      filter: brightness(0.7);
    }
    .icon-copy2 {
      font-size: 0.8rem;
    }

    &.favorites {
      color: calc(--primary-color);
      .icon-bookmark-1,
      .icon-bookmark-2 {
        height: 1.3em;
      }
    }
  }
}
// .detail-page__content {
// top: 35px !important;
// }

// @media only screen and (min-width: 576px) and (max-width: 767.98px) {
//   .detail-page__content {
//     top: 170px !important;
//   }
// }
// @media (max-width: 575.98px) {
//   .detail-page__content {
//     top: 170px !important;
//   }
// }

// @media (max-width: 575.98px) {
// }
// @media only screen and (min-width: 576px) and (max-width: 767.98px) {
//     .detail-page__tab-content {
//         max-width: 500px;
//     }
// }
// @media only screen and (min-width: 768px) and (max-width: 900.98px) {
//     .detail-page__tab-content {
//         max-width: 600px;
//     }
// }
// @media only screen and (min-width: 901px) and (max-width: 1049.98px) {
//     .detail-page__tab-content {
//         max-width: 900px;
//     }
// }
// @media (min-width: 1050px) {
// }
</style>
