search_ui/components/search/view/SearchSummary.vue

<template>
  <div class="search-items firefox-scrollbar p-3">
    <!-- <div class="body"> -->
    <div class="header font-weight-bold border-bottom mb-4 pb-3">
      <!-- <p class="m-0">{{ summary?.[0]?.title }}</p> -->
      <button class="text__14" @click="hideSummary">
        <svg class="icon icon-Component-294--1">
          <use xlink:href="#icon-Component-294--1"></use>
        </svg>
      </button>
    </div>
    <div class="main">
      <div v-for="(item, index) in searchActiveTabGetter?.summary?.options">
        <div class="text" v-if="info?.[item.key]">
          <div class="item-label mb-3">
            <span class="nowrap no-wrap"> {{ item.label }}: </span>

            <span v-html="Itemvalue(item)" class="item-value"> </span>
          </div>
        </div>
      </div>
    </div>
    <!-- </div> -->
    <!-- <a @click="hideSummary" class="filters__close-btn--bottom text__18">
      بستن
    </a> -->
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
// import summary from "~/json/search/json/summary.json";
import { useSearchStore } from "~/stores/searchStore";
import { useCommonStore } from "~/stores/commonStore";
/**
 * @vue-data {undefined} [info = undefined] - اطلاعاتی که به آن دسترسی نداریم یا اگر داریم یک شیء را نگه می‌دارد
 * @vue-data {Object} summary - خلاصه‌ای از اطلاعات
 * @vue-data {String} [date=""] - تاریخ
 * @vue-data {String} [textSum=""] - خلاصه متن
 */

export default {
  mounted() {
    this.setInfo();
    // this.summary = summary;
  },
  props: {
    currentItem: {
      default: {},
    },
    page: {
      default: 0,
    },
  },
  data() {
    return {
      info: {},
      summary: {},
      date: "",
      textSum: "",
    };
  },

  methods: {
    ...mapActions(useCommonStore, ["SELECTED_LISTS"]),
    /**
     * تنظیم اطلاعات برای نمایش در صفحه
     * این متد اطلاعات مربوط به آیتم جاری را تنظیم می‌کند و تاریخ و خلاصه متن را محاسبه می‌کند.
     */
    setInfo: function () {
      //this.$allert(item.author)
      this.info = this.currentItem._source;
      var d = new Date(this.info.begin_date);
      this.date = d.toLocaleDateString("fa-IR");

      // if (this.info.mintro) {
      //   this.textSum = this.info.mintro;
      // } else {
      //   var items = this.info.mindex?.split("\n");
      //   var tt = "";
      //   if (items)
      //     items.forEach((item) => {
      //       tt = tt + "<p>" + item + "</p>";
      //     });
      //   this.textSum = tt;
      // }
    },
    /**
     * مخفی کردن خلاصه اطلاعات
     * این متد خلاصه اطلاعات را مخفی می‌کند و اطلاعات را برای کاربر نمایش نمی‌دهد.
     */
    hideSummary: function () {
      this.$emit("hideSummary");
    },
    /**
     * دریافت مقدار مورد نظر از آیتم
     * این متد مقدار مورد نظر از آیتم را استخراج می‌کند، اگر آیتم نوع date باشد تاریخ محاسبه می‌شود و اگر نوع textarea باشد متن خلاصه محاسبه می‌شود.
     */
    Itemvalue(item) {
      this.info = this.currentItem._source;

      if (item.key == "begin_date") {
        var d = new Date(this.info.begin_date);
        var date = d.toLocaleDateString("fa-IR");
        return date;
      } else if (item.key == "mindex") {
        var items = this.info.mindex?.split("\n");
        var tt = "";
        if (items)
          items.forEach((item) => {
            tt = tt + "<p>" + item + "</p>";
          });
        var textSum = tt;
        return textSum;
      } else {
        return this.info[item.key];
      }
    },
  },
  computed: {
    ...mapState(useSearchStore, ["searchActiveTabGetter"]),
  },
};
</script>

<style scoped lang="scss">
// .panels__items {
//   height: calc(100vh - 14em);
//   // width: 16% !important;
// }
// .body {
// background-color: red;
// width: 100%;
// height: 100%;
// position: relative;
.header {
  // background-color: green;
  color: black;
  height: auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  button {
    border: none;
    background-color: #fff;
    color: black !important;
  }
}
.main {
  // position: relative;
  // width: auto;
  // padding: 0;
  // right: 0;
  .text_sum {
    // margin-right: 5px;
    .item-label {
      color: black;
    }
    .item-value_text {
      // width: 90%;
      // margin: 0 auto;
      color: #a7a098;
    }
  }
  .text {
    // display: flex;
    // align-items: flex-end;
    // margin-right: 5px;
    .item-label {
      color: #a7a098;
    }
    .item-value {
      margin-right: 1em;
      color: #333;
    }
  }
}
// }
</style>