<template>
  <!-- <div style="height: 100vh; overflow: auto"> -->
  <div>
    <!-- <button
      class="filters__open-btn--top btn buttonshow"
      id="buttonshow"
      @click="showfilter"
    >
      <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 class="button-change">
      <switch-component
        @change-mode="topRepeatInListMode = !topRepeatInListMode"
        name="top-repeat"
      ></switch-component>
      <!-- "critions" -->
      <div
        v-if="entity_type != getEntityTypeId('answer')"
        class="record-problem"
      >
        <a
          v-can="'issues_create'"
          title="ثبت مساله"
          href="ثبت مساله"
          class="text__14 text__blue button"
          @click.prevent="openIssueModal"
          >ثبت {{ getEntityName(entity_type) }}</a
        >
      </div>
    </div>
    <div v-if="topRepeatInListMode">
      <div
        ref="filterdiv"
        class="jahat__sidebar scroll-needed hide"
        id="showDiv"
        :class="{ expanded: !isSidebarCollapsed }"
      >
        <ul class="sidebar-menu sidebar-menu--simple buttonhide">
          <li>
            <a
              href="javascript:void(0)"
              @click.prevent="updateListSpecial(1)"
              class="text__14"
              >{{ entitiesTitle }} جدید</a
            >
          </li>
          <li>
            <a
              href="javascript:void(0)"
              @click.prevent="updateListSpecial(2)"
              class="text__14"
              >{{ entitiesTitle }} ویرایشی</a
            >
          </li>
          <li>
            <a
              href="javascript:void(0)"
              @click.prevent="updateListSpecial(3)"
              class="text__14"
              >{{ entitiesTitle }} تولیدی من</a
            >
          </li>
          <li>
            <a
              href="javascript:void(0)"
              @click.prevent="updateListSpecial(4)"
              class="text__14"
              >{{ entitiesTitle }} مشارکتی من</a
            >
          </li>
          <button
            type="bu"
            @click.prevent="hidefilter"
            class="text__14 btn btnHide"
            id="btnHide"
          >
            <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>
            &nbsp; بستن
          </button>
        </ul>
      </div>
      <div
        class="jahat__content-container"
        :class="{ expanded: !isSidebarCollapsed }"
      >
        <!-- <div
          v-if="entity_type == getEntityTypeId('issue')"
          class="jahat__fixed-btn"
        >
          <a
            v-can="'issues_create'"
            title="ثبت مساله"
            href="ثبت مساله"
            class="text__14 text__blue button"
            @click.prevent="openIssueModal"
            >ثبت مساله</a
          >
        </div> -->

        <the-content-loading v-if="fetchingData"></the-content-loading>

        <div v-if="canView">
          <div v-if="!fetchingData">
            <EntityContent
              v-if="pagination.total"
              :creationFilters="creationFilters"
              :subjectFilters="subjectFilters"
              @add-filter="updateListAfterFilterAdded"
              @remove-filter="updateListAfterFilterRemoved"
              @delete-entity="deleteEntity"
              @edit-entity="editEntity"
              @open-subject-modal="openSubjectModal"
              :type="listType"
              :entities="listEntity"
              class="entity-content"
              :class="{ 'chart-and-list-mode': topRepeatInListMode }"
            />

            <no-data v-else>
              <p class="text-center p-3">مسئله ای ثبت نشده است.</p>
            </no-data>
          </div>
        </div>

        <no-data v-else>
          <p class="text-center p-3">
            <span class="tavasi tavasi-warning-circle"></span>
            عدم دسترسی
          </p>
        </no-data>

        <jahat-pagination
          v-if="pagination.total"
          :paginationInfo="pagination"
          @page-changed="pageChanged"
          @page-limit-changed="pageLimitChanged"
          @sort-changed="sortChanged"
        >
        </jahat-pagination>

        <jahat-modal
          @close-modal="closeModal"
          :showHeaderCloseButton="true"
          v-if="showModal"
          title="ایجاد مسئله"
        >
          <problem-modal
            v-if="showIssueModal"
            :data="entity"
            @close-modal="closeModal"
            @problem-added="closeModal"
          >
          </problem-modal>

          <subject-form
            v-if="showSubjectModal"
            @update-list="closeModal"
            @delete-item="updateListSpecial"
            projectTagsName="jahat"
          ></subject-form>
        </jahat-modal>
      </div>
    </div>
    <div v-else>
      <ChartContent
        :class="{ 'chart-and-list-mode': topRepeatInListMode }"
        class="ChartContent"
      ></ChartContent>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { entityMixin } from "~/jahat/mixins/entityMixin";
import { commonMixin } from "~/jahat/mixins/commonMixin";
import repoApi from "~/apis/repoApi";
// import { propertyModalMixin } from "~/jahat/mixins/propertyModalMixin";

export default {
  mixins: [entityMixin, commonMixin],
  
  mounted() {
    this.checkPermissions({
      permission: `${this.$route.name}_list`,
      _this: this,
    })
      .then(() => {
        this.entity_type =
          this.$route.meta.entityType === undefined
            ? 1
            : this.$route.meta.entityType;
        this.entitiesTitle = this.getEntityTitle(this.entity_type);

        this.getList(this.entity_type);

        this.canView = true;
      })
      .catch(() => {
        this.canView = false;
      });
  },
  watch: {
    $route: {
      handler(newRoute, oldRoute) {
        this.checkPermissions({
          permission: `${newRoute.name}_list`,
          _this: this,
        })
          .then(() => {
            this.entity_type =
              this.$route.meta.entityType === undefined
                ? 1
                : this.$route.meta.entityType;
            this.entitiesTitle = this.getEntityTitle(this.entity_type);

            if (oldRoute.name != newRoute.name) {
              newRoute.query.page = undefined;
              history.pushState({}, document.title, newRoute.path);
              // this.$router.replace({ query: {...this.$route.query, page: undefined}})
              this.resetPagination();
            }
            this.fetchingData = false;
            this.getList(this.entity_type);

            this.canView = true;
          })
          .catch(() => {
            this.canView = false;
          });
      },
      nested: true,
      // immediate: true,
    },
  },
  data() {
    return {
      topRepeatInListMode: true,

      subjectFilters: new Map(),
      creationFilters: new Map(),

      showSubjectModal: false,
      showIssueModal: false,

      canView: true,

      // modal: "answer-modal",
      entity_type: 1,
      entitiesTitle: "مسائل",

      listType: 1,
      listEntity: [],
      entity: {},

      modal: undefined,
      modal_title: null,
      modal_data: {
        entity: {},
        keyName: "",
        index: -1,
      },
      showfilters: 2,
    };
  },
  computed: {
    ...mapState(["schemasGetter", "isSidebarCollapsed"]),
  },
  methods: {
    ...mapActions(["checkPermissions"]),
    ...mapActions("list", [
      "SET_SELECTED_PROJECT",
      "SET_LIST_ID",
      "SET_LIST",
      "SET_SELECTED_ITEM",
    ]),
    //mehdi
    showfilter() {
      this.$refs.filterdiv.classList.add("show");
      this.$refs.filterdiv.classList.remove("hide");
      document.getElementById("buttonshow").style.display = "none";
      document.getElementById("btnHide").style.display = "inline-block";
      // document.getElementById("showDiv").style.display = "inline-block";
    },
    hidefilter() {
      this.$refs.filterdiv.classList.remove("show");
      this.$refs.filterdiv.classList.add("hide");
      document.getElementById("buttonshow").style.display = "inline-block";
      document.getElementById("btnHide").style.display = "none";
    },

    //mehdi
    openSubjectModal(entity) {
      this.showSubjectModal = true;
      this.entity = entity._source;

      this.SET_SELECTED_ITEM(this.entity);

      this.beforeShowModal();
    },
    openIssueModal() {
      this.showIssueModal = true;
      this.entity = {
        title: "",
        description: "",
        // weight: 0,
      };
      // console.log(this.entity);

      this.beforeShowModal();
    },
    deleteEntity(entity) {
      this.mySwalConfirm({
        title: "هشدار!!!",
        html: `از حذف این مورد اطمینان دارید؟ `,
        icon: "warning",
      }).then((result) => {
        setTimeout(() => {
          this.updateListSpecial(1);
        }, 1000);
        if (result.isConfirmed) {
          let url = repoApi.entity.delete_jahat;
          url = url.replace("{{entity_id}}", entity._id);

          this.httpService
            .postRequest(url)
            .then((res) => {
              this.getList(this.entity_type);
              this.mySwalToast({
                html: res.data.message,
                icon: "success",
              });

              // this.getListSpecial(this.entity_type, this.listType);
              // this.updateListSpecial()
            })
            .catch((err) => {
              // this.mySwalToast({
              //   title: "خطا!!!",
              //   html: err.message,
              //   icon: "error",
              // });
            });
        }
      });
    },

    editEntity(entity) {
      this.showIssueModal = true;
      this.entity = entity._source;
      this.beforeShowModal();
    },
    openModal(modal, property = null, index = -1) {
      this.modal = modal;

      // this.modal_data.entity = this.entity;
      // this.modal_data.index = index;
      // this.modal_data.keyName = property;
      // this.modal_title = ev.target?.title ?? 'بدون عنوان';

      this.beforeShowModal();
    },

    beforeShowModal() {
      this.showModal = true;

      setTimeout(() => {
        $("#jahat-modal").modal(
          { backdrop: "static", keyboard: false },
          "show"
        );
      }, 500);
    },
    closeModal() {
      $("#jahat-modal").modal("hide");

      setTimeout(() => {
        this.showModal = false;
        this.showSubjectModal = false;
        this.showIssueModal = false;
        this.updateListSpecial(1);
      }, 500);
    },
    updateListAfterFilterAdded(filter, filterObject = "subjectFilters") {
      if (!this[filterObject].has(filter.id)) {
        this[filterObject].set(filter.id, filter);
        this.getList(this.entity_type);
      }
      this.updateListSpecial();
    },
    updateListAfterFilterRemoved(filter, filterObject = "subjectFilters") {
      if (this[filterObject].has(filter.id)) {
        this[filterObject].delete(filter.id);
        this.getList(this.entity_type);
      }
    },

    updateListSpecial(listType = 0) {
      this.listType = listType;
      if (listType == 0) this.getList(this.entity_type);
      else this.getListSpecial(this.entity_type, listType);
    },

    // addToList(input) {
    // let e = {};
    // e._source = { ...input.item };
    // this.listEntity.unshift(e);
    // this.paginationInfo.total += 1;
    // },
  },

 
};
</script>

<style scoped lang="scss">
.showBtn {
  display: none;
}
.btn-hide {
  display: none;
}
.jahat__sidebar {
  top: 55px;
  padding-right: 100px;
}

.btnHide {
  display: none;
}
.btnHide svg {
  transform: rotate(180deg);
}
.jahat__fixed-btn {
  // top: calc(var(--headerHeight) + 7px);
  // left: 8em
}
.button-change {
  left: 1em;
  width: 100%;
  height: 40px;
  position: absolute;
  top: 6em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  // margin-top: 0rem;
  // z-index: 9;
  // background-color: white;
  // padding: 2rem;
  div {
    margin: 0 10px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .buttonshow {
    position: fixed;
    color: inherit;
    right: 5px;
    top: 65px;
    width: 50px;
    height: 50px;
    z-index: 999999;
  }
  .btnHide {
    position: absolute;
    display: inline-block;
    left: 0px;
  }
  .btnHide svg {
    transform: rotate(180deg);
  }
  .m1 {
    background-color: red;
  }
  .hide {
    transform: translateX(80%);
    display: none;
  }
  .show {
    transform: translateX(0);
  }
  #showDiv {
    top: 55px;
  }
  .titelAnswerText {
    max-width: 150px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .buttonshow {
    position: fixed;
    color: inherit;
    right: 5px;
    top: 65px;
    width: 50px;
    height: 50px;
    z-index: 999999;
  }
  .btnHide {
    position: absolute;
    display: inline-block;
    left: 0px;
  }
  .btnHide svg {
    transform: rotate(180deg);
  }

  .hide {
    transform: translateX(80%);
    display: none;
  }
  .show {
    transform: translateX(0);
  }
  #showDiv {
    top: 55px;
  }
  .titelAnswerText {
    max-width: 150px;
  }
}
@media (max-width: 575.98px) {
  .button-change {
    left: 0em;
    top: 8em;
  }
  .buttonshow {
    position: fixed;
    color: inherit;
    right: 5px;
    top: 95px;
    width: 50px;
    height: 50px;
    z-index: 999999;
  }
  .button-change {
    margin-top: 2rem;
  }
  .btnHide {
    position: absolute;
    display: inline-block;
    left: 0px;
  }

  .m1 {
    background-color: red;
  }
  .hide {
    display: none;
  }
  .show {
    transform: translateX(0);
  }
  #showDiv {
    top: 95px;
  }
  .titelAnswer {
    display: none;
  }

  .jahat-header__pagination {
    top: 0px !important;

    position: relative !important ;
  }
  .jahat__sidebar {
    top: 108px !important;
  }
}
</style>
<!-- <style  lang="scss">
// @media only screen and (max-width: 575.98px) {
//   .jahat__content-container {
//     .problem-detail {
//       .problem-detail__section {
//         .problem-slider {
//           .flickity {
//             .flickity-viewport {
//               .flickity-slider {
               
//                 // .jahat-system .problem-slider__cell {
//                 //   width: 100% !important;
//                 // }
//                 // .jahat-system .problem-files--answer .problem-files__cell {
//                 //   width: 100% !important;
//                 // }
//                 // .flickity-slider .problem-files__cell .is-selected {
//                 //   width: 100% !important;
//                 // }
//                 .problem-slider__cell{
//                   width: 100%;

//                 }
//                 .problem-files__cell {
//                   width: 100% !important;
//                   // height: 170px;
//                 }
//                 .problem-slider__pic {
//                   img {
//                     width: 95%;
//                   }
//                 }
//               }
//             }
//           }
//         }
//         .problem-section__content{
//           .problem-files{
//             .flickity {
//             .flickity-viewport {
//               .flickity-slider {
               
               
//                 .problem-slider__cell{
//                   width: 100%;

//                 }
//                 .problem-files__cell {
//                   width: 100% !important;
//                   // height: 170px;
//                 }
//                 .problem-slider__pic {
//                   img {
//                     width: 95%;
//                   }
//                 }
//               }
//             }
//           }
//           }
//         }
//       }
//     }
//   }
// }
</style> -->