<template>
  <div class="user__item-container">
    <div class="user__item">
      <div class="col">
        <div class="user__content">
          <div class="d-flex mb-2">
            <div class="favorite-item-label">
              {{ labelchange(entity._source.ref_key) }}
            </div>
            <a
              :title="entity._source.title ?? entity._source?.subtitle"
              :href="`navigation/list/${entity._source.ref_key}/${
                entity._source.ref_id
              }/searchtext=${searchText ?? ''}`"
              @click.prevent="showtext(entity)"
              @auxclick.prevent.stop="showtext(entity)"
              class="favorite-item-title"
            >
              {{ entity._source.title }}
            </a>
          </div>
          <div class="mb-2 text__15 search-items__code">
            <span style="margin-left: 10px"
              ><span class="font-weight-semi-bold">تاریخ :</span>
              {{ datefa(entity._source.time_edit) }}</span
            >
            <span
              v-if="entity._source?.history_number"
              style="margin-left: 10px"
              ><span class="font-weight-semi-bold">تعداد مشاهده :</span>
              {{ entity._source.history_number }} بار
            </span>
          </div>
          <div class="mb-2">
            <p class="text-break">{{ entity.data }}</p>
          </div>
        </div>
      </div>
      <div class="col-auto" v-if="entity._source?.bookmark_tags?.length">
        <div class="d-flex">
          <span
            v-for="(bm, index) in entity._source.bookmark_tags"
            :key="index"
            class="badge"
            >{{ bm }}</span
          >
        </div>
      </div>
      <div class="col-auto d-flex" v-if="$route.name == 'favorites'">
        <div class="dropdown">
          <button
            class="btn dropdown-toggle"
            type="button"
            id="dropdownMenuButton"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            دسته بندی
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <button
              type="button"
              v-for="(cat, index) in categories"
              :key="index"
              class="dropdown-item"
              @click.prevent="addToCat(entity._source?.bookmark_tags, cat)"
            >
              {{ cat }}
            </button>
          </div>
        </div>

        <button-component
          @click="deleteNotification(entity)"
          buttonText=""
          v-tooltip="'حذف'"
          classes="btn"
        >
          <svg class="icon icon-Component-295--1">
            <use xlink:href="#icon-Component-295--1"></use>
          </svg>
        </button-component>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "pinia";
import adminApi from "~/apis/adminApi";
import { usePermitStore } from "~/stores/permitStore";

export default {
  props: {
    categories: {
      default() {
        return [];
      },
    },
    entity: {
      default() {
        return {};
      },
    },
    searchText: {
      default: "",
    },
  },
  watch: {
    role_id() {
      this.getRoles();
    },
    user_id() {
      this.getRoles();
    },
  },

  // beforeMount() {
    // this.httpService = new HttpService(
      // import.meta.env.VITE_BASE_URL + repoUrl()
    // );
  // },
  // mounted() {
  // this.getRoles();
  // },
  data() {
    return {
      listUserPermission: [],
      collapseAll: false,
      grouplist: [],
      groupbyList: {},
      roles: [],
      httpService: undefined,
    };
  },
  computed: {
    ...mapState(usePermitStore, ["projectGetter"]),
    ...mapState(useFavoriteStore, [
      "favoriteSchemaGetter",
      "favoriteActiveTabGetter",
    ]),
  },
  methods: {
    addToCat(cats, cat) {
      this.$emit("add-to-cat", { cats: cats ?? [], cat, id: this.entity._id });
    },
    datefa(item) {
      var m = item * 1000; //برای تبدیل به میلی ثانیه

      var d = new Date(m).toLocaleDateString("fa-IR");
      let options = { weekday: "long", hour: "2-digit", minute: "2-digit" };
      var d2 = new Date(m).toLocaleDateString("fa-IR", options);
      return d2 + " " + d;
    },
    //change  label for  favorite-item-label
    labelchange(key) {
      let item = this.favoriteActiveTabGetter?.index_keys.find(
        (item) => item.key == key
      );
      if (item) return item.label;

      return "";
    },
    showtext(item) {
      let _name = "navigationView";

      const routeData = this.$router.resolve({
        name: _name,
        params: {
          id: item._source.ref_id,
          key: item._source.ref_key,
        },
        query: {
          searchtext: this.searchText ?? undefined,
        },
      });
      window.open(routeData.href, "_blank");
    },
    deleteNotification(item) {
      this.mySwalConfirm({
        title: "هشدار!!!",
        html: `از حذف آیتم جاری اطمینان دارید؟ `,
        icon: "warning",
      }).then((result) => {
        if (result.isConfirmed) {
          let url = adminApi.notification.delete;
          url = url.replace("{{id}}", item._id);
          url = url.replace("{{entity_type}}", item._source.entity_type);

          // this.httpService.postRequest(url).then((res) => {
          //   this.mySwalToast({
          //     html: res?.message ?? "با موفقیت حذف شد.",
          //   });

          //   setTimeout(() => {
          //     this.$emit("getList");
          //   }, 500);
          // });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.user__item-container {
  position: relative;
  margin-bottom: 1em;

  border-radius: 1em;
  border: 1px solid #eee;
  padding: 1em;

  &.read {
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: #33eb33;
    background-color: #33eb331a;
    border-radius: 1em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  &.unread {
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: red;
    background-color: rgba(255, 0, 0, 0.08);
    border-radius: 1em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .user__item {
    align-items: center;
    display: flex;
    // align-items: center;
    // padding: 0.5em 0;
    margin-bottom: 0.5em;
    border-radius: 0;

    .user__content {
      // display: flex;
      // align-items: center;
      // flex-direction: column;
      // margin-right: 1em;
      // width: 100%;
      .user__text_show {
        max-width: 13em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .user__text {
        color: #1b2733;
        width: 90%;
      }
      .user__date {
        display: flex;
        justify-content: flex-start;
        font-size: 0.8rem;
        margin-top: 1em;
        color: #bac4ce;
      }
      .favorite-item-label {
        white-space: nowrap;
        padding: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: #fff;
        border: 1px solid #e4dfd8;
        height: 20px;
        margin-left: 8px;
        color: rgba(0, 0, 0, 0.4);
      }
      .favorite-item-title {
        cursor: pointer;
        color: #00b6e3;
        font-size: 0.875em;
      }
      &:hover {
        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;
          }
        }
      }
    }
    .badge {
      padding: 0.5em;
      display: flex;
      align-items: center;
      line-height: 1.2;
      font-size: 1rem;
      background-color: transparent;
      text-shadow: 1px;
      border: 1px solid #eee;

      &-danger {
        color: red;
      }
      &-success {
        color: #28a745;
      }
    }

    &:not(:last-child) {
      // border-bottom: 1px solid #eee;
    }

    &:nth-child(odd) {
      // background-color: #eee;
    }
    .user__pic {
      width: 5em;
      height: 5em;

      border-radius: 50%;
      overflow: hidden;
      border: 2px solid #eee;

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
    // .user__content {
    // margin-right: 0.5em;
    // flex: 1;

    // .user__item-head {
    // margin-left: 1.5em;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    // }
    // }

    .user__no-pic {
      border: 2px solid #fff;
      color: white;
      font-size: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 10px;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
  }

  &:hover,
  &.active {
    background-color: var(--list-background-color);

    .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: #adbec4;
      }
      .icon-copy2 {
        font-size: 0.8rem;
      }
    }
  }
}
</style>
