<template>
  <div class="majles-qaSection-content">
    <div class="" v-if="viewMode == 'list'">
      <div class="search-items firefox-scrollbar">
        <div
          class="search-items__item mx-3 border-bottom"
          v-for="(item, i) in listAnswer"
          :key="i"
        >
          <!-- محدودن عنوان اصلی -->
          <div
            class="search-items__header"
            :class="'search-items__header-' + myKey"
          >
            <a
              class="search-items__label text__13 text__dark-gray"
              :style="getQanonEtebarClass(item._source?.qanon_etebar)"
              v-if="item._source?.qanon_etebar"
              >{{ item._source.qanon_etebar }}</a
            >
            <!-- <a class="search-items__label text__13 text__dark-gray">
              {{ full_path(item) }}</a
            > -->
            <span style="margin-left: 10px"
              ><span class="font-weight-semi-bold"
                >{{ name_type(item) }} :
              </span>
              <a
                @click.prevent="showtext(item._source, listAnswer, i, item)"
                @auxclick.prevent.stop="
                  showtext(item._source, listAnswer, i, item)
                "
                class="search-items__title text__blue"
                :href="urlResolver(item._source.qanon_id)"
                target="_blank"
                v-html="highlightKey(item, 'qanon_title')"
              >
              </a>
              <span v-if="!item.inner_hits?.by_collapse">
                >
                <a
                  class="search-items__title text__light-blue"
                  :href="getDetailUrl(item)"
                  target="_blank"
                >
                  {{ item?._source?.other_info?.full_path }}
                </a></span
              >

              <span v-if="isRuleMode()">
                >
                <a
                  class="search-items__title text__pink"
                  @click.prevent="selectThis(item)"
                >
                  انتخاب و ادامه طبق همین ماده
                </a></span
              >
            </span>
          </div>

          <!-- محدوده زیر اطلاعات فراداده ای زیر عنوان -->
          <div class="text__15 search-items__code">
            <span v-if="item._source.ts_ref" style="margin-left: 10px"
              ><span class="font-weight-semi-bold">مرجع تصویب :</span>
              {{ item._source.ts_ref }}</span
            >
            <span v-if="item._source.ts_date" style="margin-left: 10px"
              ><span class="font-weight-semi-bold">تاریخ تصویب :</span>
              {{ item._source.ts_date }}</span
            >
            <span v-if="item._source.expire_date" style="margin-left: 10px"
              ><span class="font-weight-semi-bold">تاریخ انقضاء :</span>
              {{ item._source.expire_date }}
            </span>

            <!-- #region tcod_* block -->
            <span
              v-if="item._source.tcod_main?.length"
              style="margin-left: 10px"
              ><span class="font-weight-semi-bold"> باب اصلی تنقیح :</span>
              <span v-for="item in item._source.tcod_main">{{ item }}</span>
            </span>
            <span v-if="item._source.tcod_sub?.length" style="margin-left: 10px"
              ><span class="font-weight-semi-bold"> ابواب فرعی تنقیح :</span>
              <span v-for="item in item._source.tcod_sub">{{ item }}</span>
            </span>
            <span
              v-if="item._source.tcod_main_old?.length"
              style="margin-left: 10px"
            >
              <span class="font-weight-semi-bold"> باب اصلی تنقیح-قدیم :</span>
              <span v-for="item in item._source.tcod_main_old">{{ item }}</span>
            </span>

            <span
              v-if="item._source.tcod_sub_old?.length"
              style="margin-left: 10px"
              ><span class="font-weight-semi-bold">
                ابواب فرعی تنقیح-قدیم :</span
              >
              <span v-for="item in item._source.tcod_sub_old">{{ item }}</span>
            </span>
            <!-- #endregion -->
          </div>

          <!-- اگر حالت کولپسی متن چند پاسخ باید تجمیع نمایش داده شوند -->
          <div
            v-if="item.inner_hits?.by_collapse"
            v-html="getInnerItems(item, 'content')"
            class="search-items__detail text__15 line-clamp__2"
          ></div>
          <!-- اگر حالت عادی ، متن هر پاسخ جداگانه نمایش داده شود -->
          <div
            v-else
            v-html="highlightKey(item, 'content')"
            class="search-items__detail text__15 line-clamp__2"
          ></div>

          <!-- فراداده های آخر هر متن پاسخ -->
          <div v-if="item._source.topics?.length" class="search-items__content">
            <div class="text__15 line-clamp__2">
              <span style="margin-left: 10px">موضوعات : </span>
              <span class="text__dark-gray" style="color: #4b5567"
                >{{ textTopics(item) }}
              </span>
            </div>
          </div>
          <div v-if="item._source.tags?.length" class="search-items__content">
            <div class="text__15 line-clamp__2">
              <span style="margin-left: 10px">برچسب : </span>
              <span class="text__dark-gray">{{ textTags(item) }} </span>
            </div>
          </div>
          <div class="search-items__content">
            <div
              v-if="item._source.categories?.length"
              class="text__15 line-clamp__2"
            >
              <span style="margin-left: 10px">دسته‌ها : </span>
              <span class="text__dark-gray">{{ textCategories(item) }} </span>
            </div>
          </div>

          <!-- مخصوص حالت نمایش فهرست ماده‌های برای احکام مدل سازی -->
          <div v-if="isRuleMode()" class="search-items__content">
            <div
              class="text__15 line-clamp__2"
              v-html="getQModelRuleText(item)"
            ></div>
          </div>

          <!-- دکمه های عملیات هر پاسخ در صورت هاور شدن -->
          <div v-if="showActions">
            <div class="search-item__actions" v-if="!isMajlesBuild">
              <span class="tavasi tavasi-more-vert"></span>
              <button
                v-can="'favorite_create'"
                @click.prevent="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_summary'"
                v-if="displayMode == 'normal'"
                @click="changeCurrent(i)"
                title="مشخصات"
                class="btn show-detail-btn show-btn  -rotate-180"
                type="button"
              >
                <span class="tavasi tavasi-Component-71--1"></span>
              </button>
              <button-component
                title=" کپی پیوند"
                buttonText=""
                class="btn show-detail-btn px-1"
                @click="myCopyToClipboard(item)"
              >
                <svg class="icon icon-copy2 fz-8">
                  <use xlink:href="#icon-copy2"></use>
                </svg>
              </button-component>
            </div>
          </div>
        </div>
      </div>
      <jahat-pagination
        style="font-size: 13px"
        v-if="pag.total"
        :paginationInfo="pag"
        @page-changed="pageChanged"
        @page-limit-changed="pageLimitChanged"
        @sort-changed="sortChanged"
      >
      </jahat-pagination>
    </div>
    <div class="container-fluid" v-if="viewMode == 'table'">
      <div class="row">
        <div class="col-12 pb-3 px-0">
          <my-table
            :items="listAnswer"
            :tableColumns="curTableColumns"
            :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 majles-search-table"
          >
          </my-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

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

/**
 * @vue-prop {Array} [summeryKeys=] - کلیدهای خلاصه
 * @vue-prop {Object} [pagination=] - صفحه بندی
 *
 * @vue-data {Number} [totalCount=0] - تعداد کل
 * @vue-data {Number} [countInPage=0] - تعداد در صفحه
 * @vue-data {Number} [maxPage=0] - حداکثر صفحه
 * @vue-data {Number} [currentPage=1] - صفحه جاری
 * @vue-data {Number} [beginPage=1] - صفحه شروع
 * @vue-data {Number} [endPage=1] - صفحه پایان
 * @vue-data {Number} [maxLength=250] - حداکثر طول
 * @vue-data {String} [typeCount=""] - نوع شمارش
 * @vue-data {String} [textSearch=""] - متن جستجو
 * @vue-data {undefined} [httpService=undefined] - سرویس HTTP
 * @vue-data {Object} [pag=] - شیء صفحه بندی
 * @vue-data {Object} [sorting={sortby: "created",sortorder: undefined,}] - مرتب‌  سازی
 * @vue-data {Array} [listAnswer=[]] - لیست پاسخ‌ها
 * @vue-data {Array} [listPage=[]] - لیست صفحات
 *
 * @vue-computed {Object} [userPermisionGetter] - دریافت مجوزهای کاربر
 * @vue-computed {Object} [currentUser] - کاربر فعلی
 * @vue-computed {Object} [searchActiveTabGetter] - دریافت تب فعال جستجو
 * @vue-computed {Boolean} [showActionMenu] - نمایش منوی اقدام
 *
 * @vue-event {Function} mapActions.SET_LIST_ENTITY - تنظیم لیست انتیتی
 * @vue-event {Function} mapActions.SET_ITEM_ENTITY - تنظیم ایتم  انتیتی
 */
export default {
  name: "MajlesQaSectionContent",

  // mixins: [idbUtil],
  props: {
    displayMode: {
      default: "normal", // or rulelist, rulelogic, ruletriple    or  tanghihlist
    },
    qruleText: {
      default: "",
    },
    viewMode: {
      default: "list",
    },
    key_data: {
      default: "",
    },
    summeryKeys: {
      default() {
        return [];
      },
    },
    tableColumns: {
      default() {
        return [];
      },
    },
    listItem: {
      default() {
        return {};
      },
    },
    pagination: {
      default() {
        return {
          pages: 0,
          total: 0,
          page: 1,
          offset: 0,
          limit: 10,
        };
      },
    },
    showActions: {
      default: true,
    },
  },
  watch: {
    pagination(newVal) {
      {
        this.pag = newVal;
      }
    },
    async $route(to, from) {
      this.db = await this.getDb(this.searchActiveTabGetter.key);
      this.ready = true;
    },
    listItem(newVal) {
      this.listAnswer = newVal;
    },
  },
  data() {
    return {
      // tableColumns: [
      //   { key: "title", title: "عنوان", width: "6", trancate_word: 6 },
      //   { key: "ts_ref", title: "مرجع تصویب", width: "2" },
      //   { key: "ts_date", title: "تاریخ تصویب", width: "1" },
      // ],
      curTableColumns : this.tableColumns,
      tableActions: tableActions,
      httpService: undefined,

      pag: this.pagination,
      listAnswer: [],
      listPage: [],

      totalCount: 0,
      countInPage: 0,
      maxPage: 0,
      currentPage: 1,
      beginPage: 1,
      endPage: 1,
      maxLength: 250,
      typeCount: "",
      textSearch: "",

      sorting: {
        sortby: "created",
        sortorder: undefined, // asc | desc | none
      },

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

      // navigationOptions: [],
      // selectedItem: undefined,
      // iscode: true,
      // showModal: false,
      // listId: undefined,
      // projectId: undefined,
    };
  },
  async beforeMount() {
    this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
    this.db = await this.getDb(this.searchActiveTabGetter.key);
    this.ready = true;
  },
  computed: {
    ...mapState(["userPermisionGetter", "currentUser", "selectedlists"]),
    ...mapState(useSearchStore, ["searchActiveTabGetter", "domainActiveGetter"]),

    myKey() {
      if (this.key_data) return this.key_data;
      return this.searchActiveTabGetter?.key;
    },
    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;
    },
  },
  mounted() {
    this.setTableColumns();
    window.scrollTo(0, 0);
    if (this.$route.query.q) this.searchText = this.$route.query.q;
  },
  methods: {
    ...mapActions("entity", ["SET_ITEM_ENTITY", "SET_LIST_ENTITY"]),
    ...mapActions("common", ["addUserHistory"]),

   
    showTextPage(index) {
      const item = this.listAnswer[index];
      window.open(this.getDetailUrl(item), "_blank");
    },
    onOnLinkedTitleClick({ rowItem, tableColumn, index }) {
      //  console.log("🚀 ~ onOnLinkedTitleClick ~ rowItem:", rowItem);

      const item = this.listAnswer[index];
      if (tableColumn?.key == "qanon_title")
        this.showtext(item._source, this.listAnswer, index, item);
      else window.open(this.getDetailUrl(item), "_blank");
    },




    getQanonEtebarClass(qanon_etebar) {
      if (!qanon_etebar) return {};
      const colors = this.searchActiveTabGetter?.colors_qanon_etebar;
      if (!colors) return {};
      if (qanon_etebar in colors) {
        const color = colors[qanon_etebar];
        return {
          color: color,
          borderColor: color,
        };
      }
    },
    // onOnLinkedTitleClick({ rowItem, tableColumn, index }) {
    //   this.showtext(rowItem._source, this.listAnswer, index, rowItem);
    // },
    showDetailsHandler(event) {
      this.$emit("changeCurrent", this.listAnswer[event.index]);
    },
    copyLinkHandler(event) {
      let id = this.listAnswer[event]._id;

      copyToClipboard("", this.urlResolver(id));
    },
    setTableColumns() {
      if (this.domainActiveGetter?.table_columns)
        this.curTableColumns = this.domainActiveGetter?.table_columns;
    },
    isRuleMode() {
      if (
        this.displayMode == "rulelist" ||
        this.displayMode == "rulelogic" ||
        this.displayMode == "ruletriple"
      )
        return true;
      return false;
    },
    /**
     * اضافه کردن به علاقه‌مندی‌ها
     * @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.myKey);
        const formData = {
          ref_id: item._source.qanon_id,
          title:
            item._source?.qanon_title + item._source?.other_info?.full_path,
        };
        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.myKey);
        url = url.replace("{{ref_id}}", item?._source?.qanon_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 {Object} item - آیتم
     * @param {Number} index - اندیس
     */
    updateListAnswer(index, key, value) {
      if (index in this.listAnswer) {
        if (key in this.listAnswer[index]["_source"])
          this.listAnswer[index]["_source"][key] = value;
      }
    },
    /**
     * تبدیل به تاریخ شمسی
     * @param {String} item - آیتم ورودی
     * @returns {String} تاریخ شمسی
     */
    datefa(item) {
      var m = item;
      var d = new Date(m).toLocaleDateString("fa-IR");
      return d;
    },
    /**
     * دریافت مسیر کامل یک مورد.
     * @param {Object} item - مورد
     * @returns {string} - مسیر کامل
     */
    full_path(item) {
      return "عنوان";
      // if(item.inner_hits?.by_collapse)
      //     if(this.domainActiveGetter?.key == "title")
      //       return "عنوان";
      // if (item._source.other_info?.full_path) return item._source.other_info.full_path;
      // return "";
    },
    /**
     * دریافت نوع نام یک مورد.
     * @param {Object} item - مورد
     * @returns {string} - نوع نام
     */
    name_type(item) {
      if (item._source?.main_type) return item._source?.main_type;
      return "";
    },
    /**
     * دریافت موارد داخلی.
     * @param {Object} item - مورد
     * @param {string} key - کلید
     * @returns {string} - موارد داخلی
     */
    getInnerItems(item, key) {
      if (!item.inner_hits?.by_collapse) return "";
      if (this.domainActiveGetter?.key == "title") return "";

      let text = "";

      item.inner_hits.by_collapse.hits.hits.forEach((el) => {
        if (el._source.other_info?.full_path != "عنوان") {
          // عنوان در ابتدای هر پاسخ نمایش داده می شود و اینجا نیازی نیست

          // let cont = this.highlightKey(el, key, "content");
          let cont = this.highlightKey(el, key);
          text +=
            '<div class="search-items__header ">' +
            '<a class="search-items__label text__13 text__dark-gray">' +
            el._source.other_info?.full_path +
            "</a>" +
            "<p class='one-line search-items__description'>" +
            cont +
            "</p></div>";
        }
      });
      return text;
    },
    /**
     * برجسته‌سازی یک کلید خاص.
     * @param {Object} item - مورد برای برجسته‌سازی.
     * @param {String} key - کلید برای برجسته‌سازی.
     * @returns {String} متن برجسته‌شده.
     */
    highlightKey(item, key, posfix = ["fa", "ph"]) {
      var text = "";

      if (item.highlight) {
        let key_highlight = key;
        let i = 0;
        while (i < posfix.length) {
          if (key_highlight in item.highlight) break;
          key_highlight = key + "." + posfix[i];
          i++;
        }

        if (key_highlight in item.highlight) {
          let value = "";
          value = item.highlight[key_highlight];

          if (Array.isArray(value)) text = value.join("... ");
          else text = value;
        }
      }

      text = text.replaceAll("\n", " ");
      text = text.replaceAll("\t", "");

      //اگر هایلایت نشده باشد یا کلید آن نباشد
      if (text == "" && key in item._source) {
        text = item._source[key];
        if (text?.length > this.maxLength)
          text = text.substr(0, this.maxLength);
      }

      return text;
    },
    /**
     * برجسته‌سازی متن محتوای یک مورد.
     * @param {Object} item - مورد برای برجسته‌سازی.
     * @returns {String} متن برجسته‌شده.
     */
    highlightText(item) {
      var text = "";
      if (item.highlight) {
        if (item.highlight.content) text = item.highlight.content.join("... ");
      }
      text = item._source.content;
      if (text.length > this.maxLength) text = text.substr(0, this.maxLength);
      return text;
    },
    selectThis(item) {
      this.$emit("select-item", item);
    },
    getQModelRuleText(item) {
      let html = "";
      if (this.displayMode == "rulelist") {
        html = `<span class="text__pink" style="margin-left: 10px"
                >متن حکم مرتبط :
              </span>
              <span class="text__black" >${this.qruleText}</span>
          `;
      } else if (this.displayMode == "rulelogic") {
        // یافتن شناسه حکم مرتبط با گزاره منطقی جاری
        let logic = undefined;
        // console.log(item._source?.rules_logics)

        item._source?.rules_logics.forEach((el) => {
          if (el.text == this.qruleText) {
            logic = el;
            return;
          }
        });
        // console.log(logic)

        // یافتن شیء حکم اصلی با شناسه بالا
        let ruleText = undefined;
        if (logic) {
          item._source?.rules.forEach((el) => {
            if (el.id == logic.rule_text_id) {
              ruleText = el;
              return;
            }
          });
        }
        // console.log(ruleText)

        if (ruleText) {
          html = `<span class="text__pink" style="margin-left: 10px"
                >متن حکم مرتبط :
              </span>
              <span class="text__black" >${ruleText.text}</span>
              <br>
              <span class="text__pink" style="margin-left: 10px"
                >متن گزاره مرتبط :
              </span>
              <span class="text__black" >${logic.text}</span>
          `;
        }
      }

      return html;
    },
    myCopyToClipboard(item) {
      if (item.inner_hits?.by_collapse)
        copyToClipboard("", this.urlResolver(item._source.qanon_id));
      else copyToClipboard("", this.getDetailUrl(item));
    },
    /**
     * ساخت نشانی پیوند انتقال به جزئیات هر بخش قانون.
     * @param {Object} item - شیء اصلی.
     */
    getDetailUrl(item) {
      
      let key = "";
      key = this.myKey;
      if (!key) key = "qasection"; // برای شرایطی که بصورت مدال استفاده می  شود  گتر بالا پر نیست

      let id = item._id;
      let hash = "";
      if (this.$route.name == "qrule") {
        hash = "#qmodel";
        key = "qsection";
        id = item._source?.ref_id ? item._source.ref_id : id;
      }
      if (key == "qasection") {
        key = "qsection";
      }

      let name = "detail";
      const routeData = this.$router.resolve({
        name: name,
        params: {
          id: id,
          key: key,
        },
        hash: hash,
        query: {},
      });
      return routeData.href;
    },

    /**
     * حل تارنمای مربوط به نمایش یک مورد خاص.
     * @param {String} _id - شناسه مورد.
     * @param {String} [key=""] - کلید مورد.
     * @returns {String} آدرس تارنما برای نمایش.
     */
    urlResolver(_parent, key = "") {
      if (key == "") key = this.myKey;
      if (!key) key = "qasection"; // برای شرایطی که بصورت مدال استفاده می  شود  گتر بالا پر نیست

      let name = "navigationView";
      if (key == "qsection") name = "detail";

      const routeData = this.$router.resolve({
        name: name,
        params: {
          id: _parent,
          key: key,
        },
        query: {},
      });
      return routeData.href;
    },
    /**
     * باز کردن یک تب جدید با جزئیات مورد انتخاب شده.
     * @param {Object} item - مورد انتخاب شده.
     * @param {Array} listAnswer - لیست پاسخ‌ها.
     * @param {Number} i - اندیس مورد.
     * @param {Object} t - شیء نماینده مورد.
     */
    async showtext(_source, listAnswer, index, rowItem) {
      let cloneList = structuredClone(listAnswer);
      cloneList.forEach((item, index) => {
        cloneList[index] = { ...item, ...item._source };
      });
      let qanon_id = _source.qanon_id;

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

      // this.addUserHistory({ key: this.myKey, historyItem: cloneItem });
      // await addData({ key: this.myKey, historyItem: cloneItem });
      // await this.addCat(this.myKey, cloneItem);

      const enableIdb = Boolean(import.meta.env.VITE_ENABLE_IDB);
      if (enableIdb) {
        this.addDisabled = true;
        await this.addToIdb(this.searchActiveTabGetter.key, cloneItem);
        this.addDisabled = false;
      }
      // console.log("🚀 ~ showtext ~ cloneList:", cloneList)
      // console.log("🚀 ~ showtext ~ cloneItem:", cloneItem)

      this.SET_ITEM_ENTITY(cloneItem);
      this.SET_LIST_ENTITY(cloneList);

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

      window.open(this.urlResolver(qanon_id), "_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.pag.limit);
      const pagination = {
        total: total,
        pages: pages == 0 ? 1 : pages,
      };

      this.pag = { ...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} item - مورد موردنظر.
     * @returns {String} متن دسته‌بندی‌ها.
     */
    textCategories(item) {
      let text = "";
      if (item._source.categories) {
        if (Array.isArray(item._source.categories))
          text = item._source.categories.join("، ");
        else text = item._source.categories;
      }
      return text;
    },
    /**
     * بازگرداندن متن برچسب‌ها برای یک مورد.
     * @param {Object} item - مورد موردنظر.
     * @returns {String} متن برچسب‌ها.
     */
    textTags(item) {
      let text = "";
      if (item._source.tags) {
        if (Array.isArray(item._source.tags))
          text = item._source.tags.join("، ");
        else text = item._source.tags;
      }
      return text;
    },
    /**
     * بازگرداندن متن اجراکننده‌ها برای یک مورد.
     * @param {Object} item - مورد موردنظر.
     * @returns {String} متن اجراکننده‌ها.
     */
    textExceuter(item) {
      let text = "";
      if (item._source.exceuter_organs)
        item._source.exceuter_organs.forEach((element) => {
          text += element.title + ",";
        });
      return text;
    },
    /**
     * بازگرداندن متن گیرنده‌ها برای یک مورد.
     * @param {Object} item - مورد موردنظر.
     * @returns {String} متن گیرنده‌ها.
     */
    textReceiver(item) {
      let text = "";
      if (item._source.receiver_organs)
        item._source.receiver_organs.forEach((element) => {
          text += element.title + ",";
        });
      return text;
    },
    /**
     * بازگرداندن متن موضوعات برای یک مورد.
     * @param {Object} item - مورد موردنظر.
     * @returns {String} متن موضوعات.
     */
    textTopics(item) {
      let text = "";
      item._source.topics.forEach((element) => {
        text += element.title + ", ";
      });
      return text;
    },

    /**
     * تغییر اندازه صفحه در جدول رویدادها.
     * @param {Object} paging - اطلاعات صفحه‌بندی.
     */
    pageLimitChanged(paging) {
      this.resetPagination();
      this.pag.limit = paging.limit;

      this.$emit("changePage", this.pag);
    },
    /**
     * تغییر صفحه در جدول رویدادها.
     * @param {Object} paging - اطلاعات صفحه‌بندی.
     */
    pageChanged(paging) {
      let page = paging.pageNumber;
      page -= 1;
      this.pag.offset = page * paging.limit;
      this.pag.limit = paging.limit;
      this.pag.page = paging.pageNumber;

      this.$emit("changePage", this.pag);
    },
    /**
     * تغییر ترتیب مرتب‌سازی در جدول رویدادها.
     * @param {Object} sorting - اطلاعات مرتب‌سازی.
     */
    sortChanged(sorting) {
      this.pag.page = this.pag.offset = 0;
      this.sorting = sorting;

      this.$emit("changePage", this.sorting);
    },
    /**
     * بازنشانی اطلاعات صفحه‌بندی به حالت اولیه.
     */
    resetPagination() {
      this.pag = {
        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.pag.offset}/${this.pag.limit}`;

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

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

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

        this.fetchingData = false;
      });
    },
  },
};
</script>


<style>
/* .one-line { */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
/* overflow: hidden; */
/* width: 100%; */
/* max-width: 46em; */
/* padding-left: 3em; */
/* margin-left: 3em; */
/* } */
</style>

<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 - 14.5em);
}

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

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

  &:hover,
  &.active {
    background-color: var(--list-background-color);
    // box-shadow: 0 0px 21px -6px rgba(0, 0, 0, 0.1) !important;
    // border-radius: 10px;
    .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;
    color: #000 !important;
    &:hover {
      // filter: brightness(0.7);
    }

    
    .icon-copy2 {
      font-size: 0.8rem;
    }

    &.favorites {
      color: #000 !important;
      .icon-bookmark-1,
      .icon-bookmark-2 {
        height: 1.3em;
      }
    }
  }
}

</style>