<template>
  <div
    class="modal fade"
    id="subject-modal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content popUp-tab user-modal">
        <div class="modal-header p-0 border-0">
          <div class="popUp-tab__header">
            <h1 class="popUp-tab__header-title">
              {{ buttonText }} فهرست
              <button
                type="button"
                @click="cancel()"
                data-dismiss="modal"
                class="d-none close-btn"
              >
                &times;
              </button>
            </h1>
            <nav class="popUp-tab__menu">
              <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a
                  @click="setTab(1)"
                  class="nav-item nav-link active"
                  id="nav-myAccount-tab"
                  data-bs-toggle="tab"
                  href="#nav-myAccount"
                  role="tab"
                  aria-controls="nav-myAccount"
                  aria-selected="true"
                  >تک کلمه ای</a
                >
                <a
                  @click="setTab(2)"
                  class="nav-item nav-link"
                  id="nav-changepass-tab"
                  data-bs-toggle="tab"
                  href="#nav-changepass"
                  role="tab"
                  aria-controls="nav-changepass"
                  aria-selected="false"
                  >دو کلمه ای</a
                >
                <a
                  @click="setTab(3)"
                  class="nav-item nav-link"
                  id="nav-changepass-tab"
                  data-bs-toggle="tab"
                  href="#nav-changepass"
                  role="tab"
                  aria-controls="nav-changepass"
                  aria-selected="false"
                  >سه کلمه ای</a
                >
                <a
                  @click="setTab(4)"
                  class="nav-item nav-link"
                  id="nav-changepass-tab"
                  data-bs-toggle="tab"
                  href="#nav-changepass"
                  role="tab"
                  aria-controls="nav-changepass"
                  aria-selected="false"
                  >کلمات کم وزن</a
                >
                <a
                  @click="setTab(5)"
                  class="nav-item nav-link"
                  id="nav-changepass-tab"
                  data-bs-toggle="tab"
                  href="#nav-changepass"
                  role="tab"
                  aria-controls="nav-changepass"
                  aria-selected="false"
                  >افزودن موضوع</a
                >
                <!-- <a
                  @click="mehdiTest()"
                  class="nav-item nav-link"
                  id="nav-changepass-tab"
                  data-bs-toggle="tab"
                  href="#nav-changepass"
                  role="tab"
                  aria-controls="nav-changepass"
                  aria-selected="false"
                  >mmm</a
                > -->
              </div>
            </nav>
          </div>
        </div>
        <div class="modal-body">
          <div class="popUp-tab__content tab-content">
            <div
              class="tab-pane fade show active"
              id="nav-myAccount"
              role="tabpanel"
              aria-labelledby="nav-myAccount-tab"
            >
              <div class="my-profile__container" style="position: relative">
                <div class="my-profile">
                  <div class="my-profile__form d-flex">
                    <div v-if="currentTab < 4">
                      <div class="flex-grow-1 ms-3">
                        <h6 class="mb-4">تعداد تکرار</h6>

                        <!-- <div 
                        @scroll="loadMore"
                          class="overlay-plugin"
                          id="overlay-plugin2"
                        >
                          <ul
                            class="list-group list-group-flush-action"
                            id="stop-words"
                          >
                            <li
                             
                              v-for="(key, text, index) of repeats[
                                'word' + currentTab
                              ]"
                              :class="{
                                m1: currentTab == 1,
                                m2: currentTab == 2,
                                m3: currentTab == 3,
                              }"
                              :key="index"
                              :ref="'index' + index"
                              class="list-group-item d-flex justify-content-between align-items-center p-0 px-2"
                              :id="'id-' + index"
                            >
                              <div class="context-menu">
                                <context-menu
                                  class="width-auto"
                                  :parentComponent="'subject-modal'"
                                  :contextMenu="stopWordContextMenu"
                                  @remove-item="removeItem(text, index)"
                                  @import="removeInStopWords(text)"
                                >
                                </context-menu>
                              </div>
                              <button
                                class="btn btn-block text-end pe-0 repeat-btn"
                                type="button"
                                :class="{ change: validationText }"
                              >
                                <span>{{ text }}</span>
                                <span class="badge badge-pill">
                                  ( {{ key }} )
                                </span>
                              </button>

                              <span class="d-flex align-items-center">
                                <span
                                  v-if="index == 0"
                                  class="tavasi tavasi-arrow-down"
                                ></span>
                              </span>
                            </li>
                          </ul>
                        </div> -->

                        <div
                          v-if="currentTab == 1"
                          @scroll="loadMore1($event)"
                          class="overlay-plugin firefox-scrollbar"
                          id="overlay-plugin2"
                        >
                          <ul
                            class="list-group list-group-flush-action"
                            id="stop-words"
                          >
                            <li
                              v-for="(key, index) of oneWordArray1"
                              :class="{
                                m1: currentTab == 1,
                              }"
                              :key="index"
                              :ref="'index' + index"
                              class="list-group-item d-flex justify-content-between align-items-center p-0 px-2"
                              :id="'id-' + index"
                            >
                              <div class="context-menu">
                                <context-menu
                                  class="width-auto"
                                  :parentComponent="'subject-modal'"
                                  :contextMenu="stopWordContextMenu"
                                  @remove-item="removeItem(key[0], index)"
                                  @import="removeInStopWords(key[0])"
                                >
                                </context-menu>
                              </div>
                              <button
                                class="btn btn-block text-end pe-0 repeat-btn"
                                type="button"
                                :class="{ change: validationText }"
                              >
                                <span>{{ key[0] }}</span>
                                <span class="badge badge-pill">
                                  ( {{ key[1] }} )
                                </span>
                              </button>

                              <span class="d-flex align-items-center">
                                <span
                                  v-if="index == 0"
                                  class="tavasi tavasi-arrow-down"
                                ></span>
                              </span>
                            </li>
                          </ul>
                        </div>

                        <div
                          v-if="currentTab == 2"
                          @scroll="loadMore2($event)"
                          class="overlay-plugin firefox-scrollbar"
                          id="overlay-plugin2"
                        >
                          <ul
                            class="list-group list-group-flush-action"
                            id="stop-words"
                          >
                            <li
                            v-for="(key,index) of oneWordArray2"
                              :class="{
                                m2: currentTab == 2,
                              }"
                              :key="index"
                              :ref="'index' + index"
                              class="list-group-item d-flex justify-content-between align-items-center p-0 px-2"
                              :id="'id-' + index"
                            >
                              <div class="context-menu">
                                <context-menu
                                  class="width-auto"
                                  :parentComponent="'subject-modal'"
                                  :contextMenu="stopWordContextMenu"
                                  @remove-item="removeItem(key[0], index)"
                                  @import="removeInStopWords(key[0])"
                                >
                                </context-menu>
                              </div>
                              <button
                                class="btn btn-block text-end pe-0 repeat-btn"
                                type="button"
                                :class="{ change: validationText }"
                              >
                                <span>{{ key[0] }}</span>
                                <span class="badge badge-pill">
                                  ( {{ key[1] }} )
                                </span>
                              </button>

                              <span class="d-flex align-items-center">
                                <span
                                  v-if="index == 0"
                                  class="tavasi tavasi-arrow-down"
                                ></span>
                              </span>
                            </li>
                          </ul>
                        </div>

                        <div
                        @scroll="loadMore3($event)"
                          v-if="currentTab == 3"
                          class="overlay-plugin firefox-scrollbar"
                          id="overlay-plugin2"
                        >
                          <ul
                            class="list-group list-group-flush-action"
                            id="stop-words"
                          >
                            <li
                            v-for="(key,index) of oneWordArray3"
                              :class="{
                                m3: currentTab == 3,
                              }"
                              :key="index"
                              :ref="'index' + index"
                              class="list-group-item d-flex justify-content-between align-items-center p-0 px-2"
                              :id="'id-' + index"
                            >
                              <div class="context-menu">
                                <context-menu
                                  class="width-auto"
                                  :parentComponent="'subject-modal'"
                                  :contextMenu="stopWordContextMenu"
                                  @remove-item="removeItem(key[0], index)"
                                  @import="removeInStopWords(key[0])"
                                >
                                </context-menu>
                              </div>
                              <button
                                class="btn btn-block text-end pe-0 repeat-btn"
                                type="button"
                                :class="{ change: validationText }"
                              >
                                <span>{{ key[0] }}</span>
                                <span class="badge badge-pill">
                                  ( {{ key[1] }} )
                                </span>
                              </button>

                              <span class="d-flex align-items-center">
                                <span
                                  v-if="index == 0"
                                  class="tavasi tavasi-arrow-down"
                                ></span>
                              </span>
                            </li>
                          </ul>
                        </div>
                      </div>

                      <div class="flex-grow-2">
                        <h6 class="mb-4">
                          انتخاب عنوان با استفاده از موضوعات پیشنهادی
                        </h6>
                        <search-accordion></search-accordion>
                      </div>
                    </div>

                    <div v-if="currentTab == 5">
                      <div class="parent_select">
                        <div class="selected_word_subject">
                          <select class="text__14 form-control">
                            <option
                              class="select_word"
                              v-for="(selectedWord, index) of selectedWords"
                              :key="index"
                            >
                              {{ selectedWord }}
                            </option>
                          </select>
                        </div>
                        <div class="subject">
                          <subject-form
                            @update-list="updateList"
                            @delete-item="deleteItem"
                          ></subject-form>
                        </div>
                      </div>
                    </div>

                    <div v-if="currentTab == 4">
                      <div
                        class="overlay-plugin firefox-scrollbar"
                        id="overlay-plugin1"
                      >
                        <form>
                          <div class="form-group">
                            <textarea
                              class="form-control textarea-form"
                              v-model="stopWords"
                              id="stop-words"
                              rows="10"
                            ></textarea>
                          </div>

                          <!-- <button-component
                          type="submit"
                          classes="btn-primary"
                          :buttonText="saveButtonText"
                        >
                        </button-component> -->
                          <button-component
                            classes="btn btn-default popUp-tab__clear button_giveup"
                            @click="ReturnToInitialSettings()"
                            buttonText="تنظیم به پیشفرض"
                            :buttonLoading="buttonLoading"
                            data-dismiss="modal"
                            id="button-component"
                          ></button-component>
                          <button
                            type="button"
                            class="popUp-tab__submit button-form"
                            @click="save()"
                          >
                            ذخیره
                          </button>
                          <!-- <P>{{ stopWords }}</P> -->
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="popUp-tab__buttonssds">
            <button-component
              classes="btn btn-default popUp-tab__clear button_giveup"
              @click="closeModal()"
              buttonText="انصراف"
              :buttonLoading="buttonLoading"
              data-dismiss="modal"
              id="button-component"
            ></button-component>
            <button
              type="button"
              class="popUp-tab__submit button-form"
              @click="savedata()"
            >
              بازسازی
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { repetitionWordsMixin } from "~/entity/mixins/repetitionWordsMixin.js";

export default {
  mixins: [repetitionWordsMixin],
};
</script>

<style scoped lang="scss">
.list-group-item {
  &.active,
  &:hover {
    background-color: #e8fcff;
  }
}
// .change{
//   background-color: red;
// }

.context-menu {
  position: absolute;
  left: 18px;
}

.user-modal {
  width: 53em;
  height: 30em;
  // display: none;
}

.repeat-btn {
  color: #9f9f9f;
}

.form-control-textarea {
  position: absolute;
  height: 300px !important;
  width: 550px;
  overflow-y: scroll;
}

#overlay-plugin1 {
  position: absolute;
  width: 560px;
  height: 360px;
}
#overlay-plugin2 {
  position: absolute;
  width: 260px;
  height: 300px;
  overflow-y: scroll;
}
.button-form {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.modal-footer {
  height: 60px;
}
.button_giveup {
  position: absolute;
  bottom: 10px;
  left: 70px;
}
.textarea-form {
  position: relative;
  width: 560px !important;
  height: 310px !important;
  overflow-y: scroll !important;
}
.change-active {
  text-decoration: line-through;
}
.change-active span {
  color: brown !important;
}
.parent_select {
  position: relative;
  // background-color: yellow;
  width: 650px;
  height: auto;
  padding: 60px;
  left: 50px;
  top: 0px;
}
.subject {
  position: relative;

  // background-color: red !important;
  top: -50px;
  width: 650px !important;
  height: auto;
  // padding-right: 70px;
  // padding-left: 70px;
  right: -60px;
}
.selected_word_subject {
  // background-color: green;
  position: relative;
  right: 150px;
  top: -55px;
  width: 150px;
}
.selected_word_subject select {
  width: 150px !important;

  color: #00b6e3;
}
.select_word {
  border-radius: 20px;
  border: 2px solid #00b6e3;
  font-size: 14px;

  color: #00b6e3;
}
</style>

<style lang="scss">
.context-menu-dropdown {
  &.width-auto {
    .dropdown .dropdown-menu {
      width: 188px !important;
    }
  }
}
</style>
