<template>
  <div class="detail-page__content main_page">
    <div class="detail-page__tab-content pb-0">
      <div
        class="search-items"
        element="div"
        :options="{
          paddingAbsolute: true,
          
         
        }"
        defer
      >
        <div
          class="search-items__item"
          v-for="(item, i) in listAnswer"
          :key="i"
        >
          <div class="search-items__header">
            <a
              @click.prevent=""
              class="search-items__title text__15 text__blue"
            >
              {{ item.key }}
            </a>
          </div>
          <div class="text__15 text__dark-gray search-items__code">
            <span style="margin-left: 10px"
              >تعداد جلسات : {{ item.doc_count }}</span
            >
          </div>

          <div class="search-item__actions">
            <span class="tavasi tavasi-more-vert"></span>
            <!-- <button
              v-can="'search_summary'"
              @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_summary'"
              @click="changeCurrent(i)"
              title="مشخصات"
              class="btn show-detail-btn -rotate-180"
              type="button"
            >
              <span class="tavasi tavasi-Component-71--1"></span>
            </button>
          </div>
        </div>
      </div>
      <!-- <div v-if="maxPage > 0" class="search-items__pagination mt-4" style="font-family: Sahel">
        <ul>
          <li class="prev"><a @click="nextPage(1)">بعدی</a></li>
          <li :class="{ active: maxPage === currentPage }">
            <a @click="setPage(maxPage)">{{ maxPage }}</a>
          </li>
          <li v-if="endPage < maxPage - 1">
            <a @click="setPage(-2)">...</a>
          </li>
          <li v-for="(item, i) in listPage" :key="i" :class="{ active: item === currentPage }">
            <a @click="setPage(item)">{{ item }}</a>
          </li>
          <li v-if="beginPage > 2"><a @click="setPage(-1)">...</a></li>
          <li :class="{ active: 1 === currentPage }">
            <a @click="setPage(1)">1</a>
          </li>
          <li class="next"><a @click="nextPage(-1)">قبلی</a></li>
        </ul>
      </div> -->
      <jahat-pagination
        style="font-size: 13px"
        v-if="pagination.total"
        :paginationInfo="pagination"
        @page-changed="pageChanged"
        @page-limit-changed="pageLimitChanged"
        @sort-changed="sortChanged"
      >
      </jahat-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["pagination", "tq"],
  data() {
    return {
      listAnswer: [],
      totalCount: 0,
      typeCount: "",
      countInPage: 0,
      maxPage: 0,
      currentPage: 1,
      beginPage: 1,
      endPage: 1,
      listPage: [],
      textSearch: "",
      iscode: true,
      sorting: {
        sortby: "created",
        sortorder: undefined, // asc | desc | none
      },
      pag: this.pagination,
    };
  },

  beforeCreate: function () {},
  methods: {
    
    pageLimitChanged(paging) {
      this.resetPagination();
      this.pag.limit = paging.limit;

      this.$emit("changePage", this.pag);
    },
    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);
    },
    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,
      };
    },
    // getListSpecial(_entityType, _specialType) {

    //   if (this.fetchingData) return;
    //   this.fetchingData = true;

    //   this.entity_type = _entityType;

    //   let url = searchApi.Farhanghestan.search_normal;

    //   url = url + `/${this.pagination.offset}/${this.pagination.limit}/`;

    //   this.httpService.getRequest(url).then((res) => {

    //     this.listEntity = res.hits.hits;

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

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

    //     this.fetchingData = false;
    //   });
    // },
    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;
      });
    },

    //mehdi

    highlightText(item) {
      var text = "";
      if (item.highlight) {
        if (item.highlight.branch) text = item.highlight.branch.join("... ");
      } else {
        if (item._source.branch) text = item._source.branch;

        if (text.length > 500) text = text.substring(0, 500);
      }
      return text;
    },
    datefa(item) {
      var d = new Date(item._source.begin_date).toLocaleDateString("fa-IR");
      return d;
    },
    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);
      }
    },
    nextPage: function (item) {
      if (item > 0) this.setPage(this.currentPage + 1);
      else this.setPage(this.currentPage - 1);
    },
    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);
    },
    changeCurrent: function (i) {
      this.$emit("changeCurrent", this.listAnswer[i]);
    },
    setTextSearch(item, countInPage) {
      this.textSearch = item;
      this.countInPage = countInPage;
    },
    scrollToTop() {
      window.scrollTo(0, 0);
    },
  },
  
  
  mounted() {
    window.scrollTo(0, 0);
    this.textSearch = this.tq;
    if (this.$route.query.q) this.searchText = this.$route.query.q;
  },
};
</script>
<style lang="scss" scoped>
// .search-items {
  //height: calc(100vh - 17em);
  // border-left: 1px solid #f2f2e6;
// }

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

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

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

    .search-item__actions {
      width: 3em;
      transition: all 0.5s;

      .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;

    .tavasi {
      color: #adbec4;
    }
  }
}

.detail-page__tab-content {
  margin-right: 0px !important;
}
.detail-page__content {
  position: initial;
  // right: 366px !important;
}
</style>