<template> <div class="wrapper detail-page"> <div class="detail-page__header" style="padding-top: 10px !important"> <div class="detail-page__nav container-fluid"> <ul class="list-unstyled"> </ul> </div> </div> <div ref="filterdiv" class="detail-page__filters div-meno" style="top: 80px"> <button id="m1" style="border-radius: 50%;" class="btn buttonshow" @click.prevent="showfilter" > <span class="tavasi tavasi-Component-356--1"></span> </button> <button id="m2" class="btn buttonclose rounded-circle " @click.prevent="hidefilter" > <span class="tavasi tavasi-Component-21--1"></span> </button> <div> <div class="scrollbar" v-if="showAitem"> <p v-for="(item, i) in listindexs" :key="i"> <span v-html="item"></span> </p> <!-- <button type="bu" @click.prevent="hidefilter" class="text__15 btn btn-default popUp-tab__clear button_giveup"> <svg data-v-46e9fe5b="" data-testid="chevron-double-lg-left-icon" class="s12 icon-chevron-double-lg-left " > <use data-v-46e9fe5b="" href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left" ></use> </svg> بستن </button> --> </div> </div> </div> <div> <div class="detail-page__content" style="padding-top: 80px"> <div class="detail-page__tab-content"> <div class="search-items"> <div class="search-items__item"> <h1 class="text__14 text__dark-blue">{{ title }}</h1> <br /> <div v-if="paragraphs.length > 0"> <p v-for="(paragraph, i) in paragraphs" :key="i" style="line-height: 30px" > <span v-html="paragraph"></span> </p> </div> <h3 v-else class="text__14 text__dark-gray"> این جلسه متن ندارد </h3> </div> </div> </div> </div> </div> </div> </template> <script> export default { name: "ShowText", props: ["index", "textSearch"], data() { return { datainput: [], initdata: false, indexitem: this.index, searchText: this.textSearch, text: "", text2: "", showAitem: true, showStatus: 1, }; }, created: function () { let data = JSON.parse(localStorage.getItem("answer")); this.datainput = data[this.indexitem]._source; }, computed: { paragraphs() { this.text = this.datainput.content; if (this.text.length > 0) { this.text2 = this.getHighlight(this.text); return this.text2.split("\n"); } return []; }, listindexs() { var list = this.getHighlight(this.datainput.mindex); return list.split("\n"); }, title() { if (this.datainput.title) return `${this.datainput.title} (کد جلسه: ${this.datainput.meet_code})`; else return `${this.datainput.subtitle} (کد جلسه: ${this.datainput.meet_code})`; }, }, mounted() { //////this.setsummary(); //this.$refs.summarytext.setInfo(this.datainput); this.initdata = true; }, methods: { showfilter: function () { // this.$refs.filterdiv.classList.add("show"); this.showAitem = true; this.showStatus = 1; document.getElementById("m1").style.display = "none"; document.getElementById("m2").style.display = "inline-block"; }, hidefilter: function () { // this.$refs.filterdiv.classList.remove("show"); this.showAitem = false; this.showStatus = 2; document.getElementById("m1").style.display = "inline-block"; document.getElementById("m2").style.display = "none"; // if(showAitem=false){ // this.showfilter=!this.showfilter; // } }, getHighlight(text) { var words = this.searchText.split(" "); var index = 1; words.forEach((w) => { if (w == "" || w == " ") { return; } let classname = `searchHilight${index}`; text = text.replaceAll( w, "<span class='" + classname + "'>" + w + "</span>" ); var w1 = this.normalize(w); if (w1 != w) { text = text.replaceAll( w1, "<span class='" + classname + "'>" + w1 + "</span>" ); } index = index + 1; if (index > 5) index = 1; }); return text; }, normalize(item) { item = item.replaceAll("،", ""); item = item.replaceAll(":", ""); item = item.replaceAll(".", ""); item = item.replaceAll("ک", "ك"); item = item.replaceAll("ی", "ي"); item = item.replaceAll("إ", "ا"); item = item.replaceAll("أ", "ا"); item = item.replaceAll("آ", "ا"); item = item.replaceAll("ة", "ت"); return item; }, }, }; </script> <style lang="scss" scoped> .search-system { .detail-page__content { top: 0; } } @media screen and (min-width: 992px) { .detail-page .detail-page__content .detail-page__tab-content .search-items { height: calc(100vh - 8em) !important; overflow: auto; } } .buttonclose { position: relative; right: 5px; width: 50px; height: 50px; z-index: 99999; } .buttonclose span{ font-size: 35px; color: black; } .buttonshow span{ color: black; } .buttonshow { position: relative; color:inherit; right: 5px; width: 50px; height: 50px; z-index: 99999; } .div-meno{ background-color: #f9f9f9 !important; } #m1{ display: none; } </style>