<template>
  <div class="main-page" ref="myInput3">
    <div v-if="showMainpag">
      <div class="home-list p-3 main" id="main">
        <div class="row">
          <div class="col-md-12 col-sm-12 main-button">
            <div class="button-change">
              <div @click="nextNumber" title="پهنای بیشتر">
                <span>
                  <svg
                    data-testid="chevron-double-lg-left-icon"
                    class="s12 icon-chevron-double-lg-right span1"
                  >
                    <use
                      data-v-46e9fe5b=""
                      href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
                    ></use>
                  </svg>
                </span>
              </div>

              <p>پهنای {{ numberPag }}</p>

              <div @click="beforeNumber" title="پهنای کمتر">
                <span>
                  <svg
                    data-testid="chevron-double-lg-left-icon"
                    class="s12 icon-chevron-double-lg-right"
                  >
                    <use
                      data-v-46e9fe5b=""
                      href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
                    ></use>
                  </svg>
                </span>
              </div>
            </div>
            <button
              title="بستن"
              @click="hidenPanel()"
              type="button"
              class="popUp-tab__clear btn button-hiden"
              style="margin-right: -20px"
            >
              <span class="tavasi tavasi-Component-21--1"></span>
            </button>

            <button
              :class="{ 'text-primary borderBottom': showNavigation }"
              type="button"
              class="popUp-tab__clear btn p-2 ms-2"
              style="font-size: 11px"
              @click.prevent="showNavigation = true"
            >
              مشخصات
            </button>

            <button
              :class="{ 'text-primary borderBottom': !showNavigation }"
              type="button"
              class="popUp-tab__clear btn p-2 me-2"
              @click.prevent="showNavigation = false"
              style="font-size: 11px"
            >
              موضوعات
            </button>
          </div>
        </div>
        <hr />

        <div class="row mt-4" style="position: relative">
          <div class="col-md-12">
            <div v-if="showNavigation">
              <div class="collapses-main">
                <div class="accordion" id="accordionExample">
                  <div class="card rounded-0">
                    <div
                      class="card-header"
                      id="headingOne"
                      style="height: 3rem"
                    >
                      <div class="d-flex justify-content-between">
                        <p style="font-size: 12px; color: black">مشخصات اصلی</p>
                        <button
                          class="btn btn-link btn-block text-end collapsed button-meno"
                          type="button"
                          data-bs-toggle="collapse"
                          data-bs-target="#collapseOne"
                          aria-expanded="false"
                          aria-controls="collapseOne"
                        >
                          <span class="tavasi tavasi-Component-358--1"></span>
                        </button>
                      </div>
                    </div>
                    <div
                      id="collapseOne"
                      class="collapse"
                      aria-labelledby="headingOne"
                      data-parent="#accordionExample"
                    >
                      <div class="card-body">
                        <form>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                              >عنوان
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="عنوان را وارد نمایید."
                              v-model="cloneItem.title"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput2"
                              style="font-size: 11px"
                              >صاحب اثر
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput2"
                              placeholder=" عنوان را وارد نمایید."
                              v-model="cloneItem.author"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="d-flex">
                            <div class="form-group">
                              <label
                                for="formGroupExampleInput2"
                                style="font-size: 11px"
                              >
                                کد داخلی
                              </label>
                              <input
                                type="text"
                                class="form-control select-text"
                                id="formGroupExampleInput2"
                                placeholder="کد داخلی را وارد کنید "
                                v-model="cloneItem.meet_lid"
                                style="font-size: 11px"
                              />
                            </div>
                            <div class="form-group me-1">
                              <label
                                for="formGroupExampleInput2"
                                style="font-size: 11px"
                              >
                                نوع
                              </label>
                              <select
                                type="text"
                                class="custom-select select-text"
                                id="formGroupExampleInput2"
                                v-model="cloneItem.format"
                                style="
                                  font-size: 11px;
                                  border-color: rgba(
                                    150,
                                    243,
                                    243,
                                    0.4588235294
                                  );
                                "
                                placeholder="نوع جلسه را وارد کنید ."
                              >
                                <option
                                  v-if="cloneOptions"
                                  v-for="(cloneOption, index) in cloneOptions"
                                  :key="index"
                                >
                                  {{ cloneOption.title }}
                                </option>
                              </select>
                            </div>
                          </div>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                              >دوره
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="نام دوره را وارد  فرمایید"
                              v-model="cloneItem.branch"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput2"
                              style="font-size: 11px"
                            >
                              تاریخ
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput2"
                              placeholder="تاریخ را وارد کنید ."
                              :value="datefa()"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="" style="position: relative; right: 80%">
                            <button
                              type="submit"
                              class="btn btn-primary"
                              style="font-size: 11px"
                              @click.prevent="save2()"
                            >
                              ثبت
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>

                  <div class="card rounded-0">
                    <div
                      class="card-header"
                      id="headingTwo"
                      style="height: 3rem"
                    >
                      <div class="d-flex justify-content-between">
                        <p style="font-size: 12px; color: black">مشخصات فرعی</p>
                        <button
                          class="btn btn-link btn-block text-end collapsed button-meno"
                          type="button"
                          data-bs-toggle="collapse"
                          data-bs-target="#collapseTwo"
                          aria-expanded="false"
                          aria-controls="collapseTwo"
                        >
                          <span class="tavasi tavasi-Component-358--1"></span>
                        </button>
                      </div>
                    </div>
                    <div
                      id="collapseTwo"
                      class="collapse"
                      aria-labelledby="headingTwo"
                      data-parent="#accordionExample"
                    >
                      <div class="card-body">
                        <form>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                              >عنوان موضوعی
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="عنوان را وارد کنید"
                              v-model="cloneItem.subtitle"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput2"
                              style="font-size: 11px"
                            >
                              پیوند
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput2"
                              placeholder="پیوند اینترنتی را وارد کنید "
                              v-model="cloneItem.link"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="d-flex">
                            <div class="form-group">
                              <label
                                for="formGroupExampleInput2"
                                style="font-size: 11px"
                              >
                                شهر
                              </label>
                              <input
                                type="text"
                                class="form-control select-text"
                                id="formGroupExampleInput2"
                                placeholder=" شهر"
                                v-model="cloneItem.city"
                                style="font-size: 11px"
                              />
                            </div>
                            <div class="form-group me-1">
                              <label
                                for="formGroupExampleInput2"
                                style="font-size: 11px"
                              >
                                مکان
                              </label>
                              <input
                                type="text"
                                class="form-control select-text"
                                id="formGroupExampleInput2"
                                placeholder=" مکان"
                                v-model="cloneItem.place"
                                style="font-size: 11px"
                              />
                            </div>
                          </div>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                            >
                              نشانی
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="نشانی را وارد کنید"
                              v-model="cloneItem.address"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput2"
                              style="font-size: 11px"
                            >
                              تاریخ پایان
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput2"
                              placeholder=" تاریخ پایان را وارد کنید"
                              v-model="cloneItem.end_date"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="" style="position: relative; right: 80%">
                            <button
                              type="submit"
                              class="btn btn-primary"
                              style="font-size: 11px"
                              @click.prevent="save2()"
                            >
                              ثبت
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>

                  <div class="card rounded-0">
                    <div
                      class="card-header"
                      id="headingThree"
                      style="height: 3rem"
                    >
                      <div class="d-flex justify-content-between">
                        <p style="font-size: 12px; color: black">
                          اطلاعات جلسه
                        </p>
                        <button
                          class="btn btn-link btn-block text-end collapsed button-meno"
                          type="button"
                          data-bs-toggle="collapse"
                          data-bs-target="#collapseThree"
                          aria-expanded="false"
                          aria-controls="collapseThree"
                        >
                          <span class="tavasi tavasi-Component-358--1"></span>
                        </button>
                      </div>
                    </div>
                    <div
                      id="collapseThree"
                      class="collapse"
                      aria-labelledby="headingThree"
                      data-parent="#accordionExample"
                    >
                      <div class="card-body">
                        <form>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                              >نوع مخاطب
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="عنوان را وارد کنید."
                              v-model="cloneItem.audience"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput2"
                              style="font-size: 11px"
                            >
                              مناسبت
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput2"
                              placeholder="عنوان را وارد کنید."
                              v-model="cloneItem.ralation"
                              style="font-size: 11px"
                            />
                          </div>

                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                              >حاضرین
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="عنوان را با ، جدا کنید"
                              v-model="cloneItem.attendees"
                              style="font-size: 11px"
                            />
                          </div>

                          <div class="" style="position: relative; right: 80%">
                            <button
                              type="submit"
                              class="btn btn-primary"
                              style="font-size: 11px"
                              @click.prevent="save2()"
                            >
                              ثبت
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>

                  <div class="card rounded-0">
                    <div
                      class="card-header"
                      id="headingFour"
                      style="height: 3rem"
                    >
                      <div class="d-flex justify-content-between">
                        <p style="font-size: 12px; color: black">کدها</p>
                        <button
                          class="btn btn-link btn-block text-end collapsed button-meno"
                          type="button"
                          data-bs-toggle="collapse"
                          data-bs-target="#collapseFour"
                          aria-expanded="false"
                          aria-controls="collapseFour"
                        >
                          <span class="tavasi tavasi-Component-358--1"></span>
                        </button>
                      </div>
                    </div>
                    <div
                      id="collapseFour"
                      class="collapse"
                      aria-labelledby="headingFour"
                      data-parent="#accordionExample"
                    >
                      <div class="card-body">
                        <form>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                            >
                              کد جلسه
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="کد جلسه را وارد کنید "
                              v-model="cloneItem.meet_code"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput2"
                              style="font-size: 11px"
                            >
                              کد شخصی
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput2"
                              placeholder="کد شخصی را وارد کنید "
                              v-model="cloneItem.person_code"
                              style="font-size: 11px"
                            />
                          </div>

                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                              >کد پژوهش
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="کد پژوهش را وارد کنید "
                              v-model="cloneItem.research_code"
                              style="font-size: 11px"
                            />
                          </div>

                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                              >کد 1
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="کد داخلی را وارد کنید "
                              v-model="cloneItem.meet_lid"
                              style="font-size: 11px"
                            />
                          </div>

                          <div class="" style="position: relative; right: 80%">
                            <button
                              type="submit"
                              class="btn btn-primary"
                              style="font-size: 11px"
                              @click.prevent="save2()"
                            >
                              ثبت
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>

                  <div class="card rounded-0">
                    <div
                      class="card-header"
                      id="headingFive"
                      style="height: 3rem"
                    >
                      <div class="d-flex justify-content-between">
                        <p style="font-size: 12px; color: black">خلاصه</p>
                        <button
                          class="btn btn-link btn-block text-end collapsed button-meno"
                          type="button"
                          data-bs-toggle="collapse"
                          data-bs-target="#collapseFive"
                          aria-expanded="false"
                          aria-controls="collapseFive"
                        >
                          <span class="tavasi tavasi-Component-358--1"></span>
                        </button>
                      </div>
                    </div>
                    <div
                      id="collapseFive"
                      class="collapse"
                      aria-labelledby="headingFive"
                      data-parent="#accordionExample"
                    >
                      <div class="card-body">
                        <form>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                              >فعل
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              placeholder="عنوان را وارد کنید"
                              v-model="cloneItem.verb"
                              style="font-size: 11px"
                            />
                          </div>
                          <div class="form-group">
                            <label
                              for="formGroupExampleInput2"
                              style="font-size: 11px"
                            >
                              واژگان
                            </label>
                            <input
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput2"
                              placeholder=" عنوان را با , جدا کنید"
                              v-model="cloneItem.keywords"
                              style="font-size: 11px"
                            />
                          </div>

                          <div class="form-group">
                            <label
                              for="formGroupExampleInput"
                              style="font-size: 11px"
                              >چکیده
                            </label>
                            <textarea
                              type="text"
                              class="form-control select-text"
                              id="formGroupExampleInput"
                              rows="4"
                              placeholder="متن را اینجا بنویسید"
                              v-model="cloneItem.mintro"
                              style="font-size: 11px"
                            ></textarea>
                          </div>

                          <div class="" style="position: relative; right: 80%">
                            <button
                              type="submit"
                              class="btn btn-primary"
                              style="font-size: 11px"
                              @click.prevent="save2()"
                            >
                              ثبت
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="container">
                <div
                  class="navigation mt-3"
                  style="max-height: 400px; position: relative"
                >
                  <subject-form style="font-size: 13px"></subject-form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <div>
        <div class="button-main">
          <button @click="showfilter()">
            <span class="tavasi tavasi-Component-160--1"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import apis from "~/apis/listApi";
import formBuilderMixin from "~/extensions/formBuilderExtension.js";

export default {
  extends: formBuilderMixin,
  props: {
    listPanelUrl: {
      default: "",
    },
  },
  beforeCreate() {
    ApiService.init(import.meta.env.VITE_REPO_BASE_URL);
  },

  emits: ["show-paragraph"],
  watch: {
    selectedItemGetter(newVal) {
      this.chengTextMain();
    },
  },
  mounted() {
    if (this.selectedProjectGetter) {
      this.getListItem();
      this.chengTextMain();
      // this.listMindex();
      this.cloneItem = structuredClone(this.selectedItemGetter);
      if (window.location.href.includes("list")) {
        this.cloneOptions = structuredClone(
          this.selectedProjectGetter.meta[0].items[4].options
        );
      }

      this.$emit("statusPag", (this.statuspag = 1));
    }
  },
  data() {
    return {
      cloneItem: {},
      cloneOptions: [],
      numberPag: 1,
      statuspag: 1,
      showpag: true,
      showMainpag: true,
      showNavigation: true,
      prevActiveIndex: 0,
      loading: false,
      fetchingData: false,
      items: [],
      lists: [],
      textlists: "",
      // pagination: {
      //   pages: 0,
      //   total: 0,
      //   page: 1,
      //   offset: 0, // page * per_page
      //   limit: 50, //per_page
      // },
    };
  },
  computed: {
    ...mapState(["isSidebarCollapsed"]),
    ...mapState("list", [
      "selectedProjectGetter",
      "listIdGetter",
      "selectedItemGetter",
      "listGetter",
    ]),
  },

  methods: {
    ...mapActions(["sidebarCollapsedSetter"]),
    ...mapActions("list", ["SET_IS_RETURN_FROM_ITEM_SHOW_PAGE"]),
    // mehdi

    showMenoBarSm() {
      // this.$refs.myInput3.classList.add("menuBar-sm");
      // this.$refs.myInput3.classList.remove("menuBar-lg" , "menuBar-xl");

      this.statuspag = 1;
      this.$emit("statusPag", (this.statuspag = 1));
    },
    chengTextMain() {
      this.cloneItem = structuredClone(this.selectedItemGetter);
    },
    showMenoBarLg() {
      // this.$refs.myInput3.classList.add("menuBar-lg");
      // this.$refs.myInput3.classList.remove("menuBar-sm" , "menuBar-xl");

      this.statuspag = 2;
      this.$emit("statusPag", (this.statuspag = 2));
    },
    showMenoBarXl() {
      this.statuspag = 3;
      this.$emit("statusPag", (this.statuspag = 3));
    },
    nextNumber() {
      if (this.numberPag > 3) {
        this.numberPag = 3;
      } else {
        this.numberPag++;
      }
      switch (this.numberPag) {
        case (this.numberPag = 0):
          this.numberPag = 0;
          this.$emit("statusPag", (this.statuspag = 0));
          this.showMainpag = false;
          break;
        case (this.numberPag = 1):
          this.showMenoBarSm();
          break;
        case (this.numberPag = 2):
          this.showMenoBarLg();
          break;
        case (this.numberPag = 3):
          this.showMenoBarXl();
          break;
      }
    },
    beforeNumber() {
      if (this.numberPag <= 0) {
        this.numberPag = 0;
      } else {
        this.numberPag--;
      }
      switch (this.numberPag) {
        case (this.numberPag = 0):
          this.numberPag = 0;
          this.$emit("statusPag", (this.statuspag = 0));
          this.showMainpag = false;
          break;
        case (this.numberPag = 1):
          this.showMenoBarSm();
          break;
        case (this.numberPag = 2):
          this.showMenoBarLg();

          break;
        case (this.numberPag = 3):
          this.showMenoBarXl();

          break;
      }
    },

    hidenPanel() {
      //this.$emit("hide-panel");
      this.showMainpag = false;
      // this.showpag= false;
    },
    showfilter() {
      // this.$refs.myInput3.classList.remove("d-md-none");
      // document.getElementById("main").classList.toggle("d-main-none");
      // document.getElementById("main").style.display = "inline-block";
      this.showMainpag = true;

      this.numberPag = 1;
      this.$emit("statusPag", (this.statuspag = 1));
    },
    // listMindex() {
    //   this.lists = this.selectedItemGetter.mindex.split("\n");
    //   var tt = "";
    //   this.lists.forEach((list) => {
    //     tt = tt + "<p>" + list + "</p>";
    //   });
    //   this.textlists = tt;
    // },
    // showfilter() {
    //   this.$ref.myInput.classList.remove("hide");

    //   this.showpag1=true
    // },
    // hidefilter() {
    //   this.$ref.myInput.classList.add("hide");

    //   this.showpag1=false
    // },

    save2() {
      if (window.location.href.includes("search")) {
        const formData = {
          id_store: this.selectedItemGetter._id,
          item_state: 1,
          meta: JSON.stringify(this.cloneItem),
        };
        const url = this.selectedItemGetter.id
          ? apis.item.edit
          : apis.item.addbylist;

        ApiService.formData(url, formData)
          .then((res) => {
            this.mySwalToast({
              title: "تبریک",
              html: res.data.message,
              icon: "success",
            });

            this.$emit("update-list");
          })

          .finally(() => {
            this.buttonLoading = false;
          });
      } else if (window.location.href.includes("list")) {
        const formData = {
          id_store: this.selectedItemGetter?.id_store,
          item_state: this.selectedItemGetter?.item_state,
          meta: JSON.stringify(this.cloneItem),
        };
        const url = this.selectedItemGetter.id
          ? apis.item.edit
          : apis.item.addbylist;

        ApiService.formData(url, formData)
          .then((res) => {
            this.mySwalToast({
              title: "تبریک",
              html: res.data.message,
              icon: "success",
            });

            this.$emit("update-list");
          })

          .finally(() => {
            this.buttonLoading = false;
          });
      } else {
      }
    },

    save() {
      const formData = {
        id_store: this.selectedItemGetter?.id_store,
        item_state: this.selectedItemGetter?.item_state,
        meta: JSON.stringify(this.cloneItem),
      };
      const url = this.selectedItemGetter.id
        ? apis.item.edit
        : apis.item.addbylist;

      ApiService.formData(url, formData)
        .then((res) => {
          this.mySwalToast({
            title: "تبریک",
            html: res.data.message,
            icon: "success",
          });

          this.$emit("update-list");
        })

        .finally(() => {
          this.buttonLoading = false;
        });
    },

    // mehdi
    showParagraphs(item, index) {
      this.$emit("show-paragraph", item);

      this.items[this.prevActiveIndex]["active"] = false;
      this.items[index]["active"] = true;

      this.prevActiveIndex = index;
    },

    getListItem() {
      if (this.fetchingData) return;
      this.fetchingData = true;

      const payload = {
        projectid: this.selectedProjectGetter?.id,
        item_state: this.selectedProjectGetter?.item_state,
        listid: this.listIdGetter,
        subjectid: this.listIdGetter,
        bychilds: 0,

        ...this.pagination,
        // offset: offset,
        // limit: this.pagination.limit,
      };

      let url = apis.listItem.list;

      if (this.$route.params.prevPage == "subjects")
        url = apis.subjectRelation.list;

      ApiService.formData(url, payload)
        .then((res) => {
          this.items = res.data.data;
          this.items.forEach((element, index) => {
            if (element.id == this.selectedItemGetter.id) {
              element["active"] = true;
              this.prevActiveIndex = index;
            }
          });

          this.pagination = { ...this.pagination, ...res.data.pagination };
        })
        .catch((err) => {
          this.mySwalToast({
            title: err.response.data.message,
            html: "",
            text: "",
            icon: "error",
          });
        })
        .finally(() => {
          this.fetchingData = false;
        });
    },
    goToListPage() {
      this.SET_IS_RETURN_FROM_ITEM_SHOW_PAGE(this.listGetter.parent);

      const routeName = this.$route.params.prevPage;

      this.$router.push({
        name: routeName,
      });
    },
    loadMore($event) {
      // const listElm = document.querySelector("#last-search");
      const listElm = $event.target;

      const vm = this;
      if (vm.busy) return;

      if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
        this.busy = true;
        vm.pagination.offset = vm.pagination.offset + vm.pagination.limit;

        if (vm.pagination.total > vm.pagination.offset) {
          setTimeout(() => {
            vm.getListOnScroll();
          }, 300);
        } else {
          vm.mySwalToast({
            title: "کاربر محترم",

            html: "دیگر رکوردی جهت بارگزاری وجود ندارد.",
            icon: "info",
            position: "bottom-start",
          });
          vm.busy = false;
        }
      } else vm.busy = false;
    },
    getListOnScroll() {
      if (this.fetchingData) return;
      this.fetchingData = true;

      const payload = {
        projectid: this.selectedProjectGetter?.id,
        item_state: this.selectedProjectGetter?.item_state,
        listid: this.listIdGetter,
        subjectid: this.listIdGetter,
        bychilds: 0,

        ...this.pagination,
      };

      let url = apis.listItem.list;

      if (this.$route.params.prevPage == "subjects")
        url = apis.subjectRelation.list;

      ApiService.formData(url, payload)
        .then((res) => {
          this.items = [...this.items, ...res.data.data];

          this.pagination = { ...this.pagination, ...res.data.pagination };
        })
        .finally(() => {
          this.busy = false;
        });
    },
    datefa(item) {
      var m = this.cloneItem.begin_date;
      var d = new Date(m).toLocaleDateString("fa-IR");
      return d;
    },
  },
};
</script>

<style scoped lang="scss">
.select-text {
  text-align: right;
  background-color: #fff;
  font-size: 14px;
  border-radius: 8px;
  border-color: #f1f1f1;
  padding: 6px;
  &:hover {
    border-color: #afbac6;
  }
}
.open-sub-folder {
  text-decoration: none;

  &:hover {
    background-color: #eee;
  }
}

.menu-bar-content {
  position: static;
  flex: 1 1 100%;
  width: auto;
  height: 180px;
  &.show-list-panel {
    right: 0px !important;
  }
}

.home-list__content {
  /*max-height: calc(100vh - 12em);*/
  height: calc(100vh - 8.5em);
  position: relative;
  overflow-x: hidden;
  padding-left: 0.3em;

  &.loading {
    //background-image: url('./img/item-loading.svg');
    background-repeat: repeat-y;
    background-position: top right;
    background-size: 12em;

    &::before {
      content: "";
      clear: both;
      position: absolute;
      right: 0;
      width: 0.5em;
      height: 100%;
      background-color: #fff;
      animation-name: example;
      animation-duration: 2s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }
  }
}

.sidebar-toggler {
  right: 2.6em;

  &.expanded {
    right: 11.1em;
  }
}

.meta-list {
  display: flex;
  align-items: ceter;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: auto;
}

//mehdi
.button-meno {
  font-size: 12px;
  transform: rotate(90deg);
  width: 10px;
  height: 10px;
  margin-top: 15px;
  text-decoration: none;
  span:hover {
    color: #00b6e3;
  }
}
.main-button {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}
.button-change {
  display: flex;
  div {
    margin: 5px;
  }
  p {
    width: 33px;
    text-align: center;
    font-size: 11px;
    position: relative;
    top: 8px;
  }
  svg {
    font-size: 11px;
    &:hover {
      fill: #00b6e3;
    }
  }
  .span1 {
    transform: rotate(180deg);
  }
}
.main {
  position: relative;
  &::before {
    content: "";
    height: 35em;
    border-right: solid #f1f1f1 1px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 10px;
    bottom: 0px;
  }
}

.borderBottom {
  position: relative;

  &::before {
    content: "";
    border-bottom: solid #00b6e3 2px;
    position: absolute;
    top: 31px !important;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
}
hr {
  margin: 0px;
}

.lists {
  overflow-y: scroll;
}
.borderBottom::before {
  content: "";
  border-bottom: solid #00b6e3 2px;
  position: absolute;
  top: 46px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.active {
  position: relative;
  background-color: #d8f8fd;
  text-decoration: none;
  color: #212529;
}

.Breadcrumbs {
  //width: 230px;
  margin: 2px auto;
  position: relative;
  right: 10px;
}

.btnHide svg {
  transform: rotate(180deg);
}
.button-main {
  position: relative;

  & button {
    border: 0px;
    background-color: #f8f8f8;
    text-align: center;
    & span {
      color: #333238;
    }
  }
}

@media (min-width: 992px) {
  .navigation {
    overflow-x: hidden;
    overflow-y: scroll;

    width: 100%;
    height: 450px;
    margin-right: 5px;
    min-width: 200px;
  }

  .collapses-main {
    width: 100%;
    height: 80vh;
    margin-right: 5px;
    min-width: 200px;
    //background-color: #00b6e3;
    overflow: hidden;
    overflow-y: scroll;
  }

  .d-main-none {
    display: none;
  }
  .button-main {
    top: 5px;
    // left: -24vh  ;
  }
  .button-hiden {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .Breadcrumbs {
    position: relative !important;
    top: 0px !important;
  }
  .menu-bar-content {
    max-width: 220px !important;
    position: relative;
    top: 0px;
    right: 0px;
  }
  .navigation {
    width: 200px !important;
    & div {
      width: 190px !important;
    }
  }
  .hide {
    display: none;
  }
  .d-main-none {
    display: none;
  }
  .button-main {
    top: 20px;
  }
  .main-page {
    position: fixed;
    left: 0rem;
    background-color: #fff;
  }
  .button-change {
    display: none;
  }
}

@media only screen and (min-width: 576px) and (max-width: 766.98px) {
  .Breadcrumbs {
    position: relative !important;
    top: 0px !important;
  }

  .navigation {
    width: 200px !important;
    & div {
      width: 190px !important;
    }
  }
  .menu-bar-content {
    max-width: 220px !important;
    position: fixed;
    top: 0px;
    right: 0px !important;
    background-color: #fff;
    z-index: 999999;
  }
  .button-main {
    display: none;
  }
  .main-page {
    position: fixed;
    left: 0rem;
    background-color: #fff;
  }
  .button-change {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .Breadcrumbs {
    position: relative !important;
    top: 0px !important;
  }

  .menu-bar-content {
    max-width: 220px !important;
    position: relative;
    top: 0px;
    right: 0px !important;
    background-color: #fff;
  }
  .navigation {
    width: 200px !important;
    & div {
      width: 190px !important;
    }
  }
  .menu-bar-content {
    max-width: 220px !important;
    position: fixed;
    top: 0px;
    right: 0px !important;
    background-color: #fff;
    z-index: 9999999;
  }
  .button-main {
    display: none;
  }
  .main-page {
    position: fixed;
    left: 0rem;
    background-color: #fff;
  }
  .button-change {
    display: none;
  }
}

//mehdi
</style>