<template>
  <div>
    <div
      :class="mode == 1 ? 'jahat__content_list' : 'jahat__content-container'"
    >
      <div class="jahat__content">
        <div class="search-list firefox-scrollbar">
          <filter-list
          v-if="subjectFilters.size"
            :filters="subjectFilters.values()"
            @remove-filter="removeFromFilters"
          ></filter-list>

          <filter-list
          v-if="subjectFilters.size"

            :filters="creationFilters.values()"
            @remove-filter="removeFromFilters"
          ></filter-list>

          <div
            v-for="(entity, index) in entities"
            :key="index"
            class="search-list__item"
          >
            <div class="search-list__content">
              <div class="search-list__header">
                <span
                  :disabled="true"
                  :to="{ name: 'issues' }"
                  class="label text__15"
                  >{{ getEntityName(entity._source.type_id) }}</span
                >
                <a
                  href="javascript:void(0)"
                  @click.prevent="routeTo(entity)"
                  class="search-list__title text__16"
                  v-html="getTitle(entity)"
                >
                </a>
                <!-- <router-link
                  :title="entity._source.title"
                  :to="{
                    name: 'issuesShow',
                    params: { id: entity._source.id,parentRouteName:$route.name },
                  }"
                  class="search-list__title text__16"
                >
                  {{ entity._source.title }}
                </router-link> -->
              </div>
              <div class="search-list__meta">
                <!-- <div class="search-list__sub-item text__15">با {{ entity.sub_issue_count ? entity.sub_issue_count : 0 }}
                  زیر مساله، با {{ entity.responses_count ? entity.responses_count : 0 }} پاسخ
                </div> -->

                <!-- <div class="search-list__sub-item text__15" v-if="entity.criterions && entity.criterions.length > 0">
                  <span>  معیارها  : </span>
                  <span class="text__semibold"> {{ (entity.criterions && entity.criterions.length > 0) ? entity.criterions[0].value_json.text : '' }}</span>
                </div> -->
              </div>
              <div
                class="search-list__content text__15 text__gray"
                v-html="getText(entity)"
              ></div>
              <div
                v-if="entity._source.subject && entity._source.subject.length"
                class="search-list__content text__15 text__gray"
              >
                <span :disabled="true" class="text__16 text__blue"
                  >موضوع :
                </span>
                <a
                  v-for="(subject, index) in entity._source.subject"
                  :key="index"
                  href="javascript:void(0)"
                  @click.prevent="addToFilters(subject)"
                  class="search-list__title text__16"
                >
                  {{ subject.title }}،
                </a>
              </div>

              <div class="search-item__actions" v-if="showActions">
                <span class="tavasi tavasi-more-vert"></span>
                <!-- v-can="$route.name + '_subject'" -->
                <button
                  v-can="$route.name + '_subject'"
                  @click="$emit('open-subject-modal', entity)"
                  title="موضوع زنی"
                  class="btn show-detail-btn  px-1"
                  type="button"
                >
                  <span class="tavasi tavasi-doc-outline"></span>
                </button>

                <button
                  v-can="$route.name + '_update'"
                  @click="$emit('edit-entity', entity)"
                  title="ویرایش مسئله"
                  class="btn show-detail-btn  px-1"
                  type="button"
                >
                  <span class="tavasi tavasi-Component-242--1"></span>
                </button>
                <button
                  v-can="$route.name + '_delete'"
                  @click="$emit('delete-entity', entity)"
                  title="حذف"
                  class="btn show-detail-btn  px-1"
                  type="button"
                >
                  <span class="tavasi tavasi-Component-295--1"></span>
                </button>
                <button-component
                  title=" کپی لینک مساله"
                  buttonText=""
                  class="btn show-detail-btn  px-1"
                  @click="copyToClipboard(entity._source.id)"
                >
                  <svg class="icon icon-copy2 fz-8">
                    <use xlink:href="#icon-copy2"></use>
                  </svg>
                </button-component>
              </div>
            </div>
          </div>
        </div>
        <div class="paginations">
          <jahat-pagination
            :paginationInfo="paginationInfo"
            @page-changed="pageChanged"
            @page-limit-changed="pageLimitChanged"
          >
          </jahat-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { commonMixin } from "~/mixins/commonMixin";
// import { apiMixin } from "~/jahat/mixins/apiMixin";
import { mapState } from "pinia";

export default {
  name: "EntityContent",
  mixins: [commonMixin],
  mounted() {
    this.pagination = this.paginationInfo;
  },
  data() {
    return {
      pagination: {
        page: 1,
        pages: 0,
        total: 0,
        offset: 0, // page * per_page
        limit: 10, //per_page
      },
      maxlenText: 300,
    };
  },
  props: {
    subjectFilters: { type: Map, default: () => new Map() },
    creationFilters: { type: Map, default: () => new Map() },

    entities: { type: Array, default: () => [] },
    paginationInfo: { default: () => {} },
    mode: { type: Number, default: 1 },
  },
  computed: {
    ...mapState(["userPermisionGetter"]),

    showActions() {
      const canUpdate = this.userPermisionGetter?.includes(
        this.$route.name + "_update"
      );
      const canDelete = this.userPermisionGetter?.includes(
        this.$route.name + "_delete"
      );
      const canSubject = this.userPermisionGetter?.includes(
        this.$route.name + "_subject"
      );
      const canCopy = true;

      return canUpdate || canDelete || canSubject || canCopy;
    },
  },
  methods: {
    pageLimitChanged(paging) {
      this.$emit("pageLimitChanged", paging);
    },
    pageChanged(paging) {
      this.$emit("pageChanged", paging);
    },
    sortChanged(sorting) {
      this.$emit("sortChanged", sorting);
    },
    resetPagination() {
      this.$emit("resetPagination", sorting);
    },
    addToFilters(filter) {
      this.$emit("add-filter", filter);
    },
    removeFromFilters(filter) {
      this.$emit("remove-filter", filter);
    },
    routeTo(entity) {
      let url = "";
      if (entity._source.type_id == this.getEntityTypeId("issue")) {
        url = "issuesShow";
        this.$router.push({
          name: url,
          params: {
            id: entity._source.id,
            parentRouteName: this.$router.name,
          },
        });
      } else if (entity._source.type_id == this.getEntityTypeId("answer")) {
        url = "answersShow";
        this.$router.push({
          name: url,
          params: {
            entityId: entity._source.entities.entity_id,
            // parentRouteName: this.$router.name,
            answerId: entity._source.id,
          },
        });
      } else if (entity._source.type_id == this.getEntityTypeId("crition")) {
        url = "critionsShow";
        this.$router.push({
          name: url,
          params: {
            id: entity._source.id,
            parentRouteName: this.$router.name,
            critionId: entity._source.id,
          },
        });
      }
    },
    getTitle(entity) {
      if (entity._source.type_id == this.getEntityTypeId("issue"))
        return entity._source.title;
      else if (
        entity._source.type_id == this.getEntityTypeId("answer") &&
        entity._source.entities
      ) {
        if (Array.isArray(entity._source.entities))
          return entity._source.entities[0]?.entity_title;
        else return entity._source.entities.entity_title;
      }
      return entity._source.title;
    },

    getText(entity) {
      let text = "";
      if (entity._source.type_id == this.getEntityTypeId("issue")) {
        if (entity._source.summary) text = entity._source.summary;
        else text = entity._source.description;
      } else if (entity._source.type_id == this.getEntityTypeId("crition")) {
        if (entity._source.favorite)
          text = "مطلوب : " + entity._source.favorite;
        if (entity._source.unfavorite)
          text = "\n" + "نامطلوب : " + entity._source.unfavorite;
      }
      if (
        (text == "" ||
          entity._source.type_id == this.getEntityTypeId("answer")) &&
        entity._source.summary
      )
        text = entity._source.summary;
      if (text == "" && entity._source.summary) text = entity._source.summary;
      if (text == "" && entity._source.description)
        text = entity._source.description;
      text =
        text?.length > this.maxlenText
          ? text.substr(0, this.maxlenText) + "..."
          : text;
      return text;
    },
  },
};
</script>
<style lang="scss" scoped>
.search-list__item {
  position: relative;
  padding: 1em;
  overflow: hidden;

  &:not(:last-child) {
    margin-bottom: 30px;
  }

  &:hover,
  &.active {
    background-color: #e8fcff;

    .search-item__actions {
      // width: 6.5em;
      width: auto;

      transition: width 0.5s;
      background: #fff;
      border-radius: 0 0.5em 0.5em 0;

      .tavasi-more-vert {
        transition: all 0.2s;
        display: none;
      }
    }
  }
}

.search-item__actions {
  position: absolute;
  left: 0;
  width: 1.6em;
  top: 1em;
  // overflow: hidden;
  transition: all 0.5s;
  display: flex;
  align-items: center;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      filter: brightness(0.7);
    }

    .tavasi,
    .icon-copy2 {
      color: #929497;
    }
    .icon-copy2 {
      font-size: 0.8rem;
    }
  }
}
</style>
