<template>
  <div class="item-boxes">
    <ul class="search-operation-menu" :style="searchMenuStyle" @mouseleave="searchMenuStyle.display = 'none'">
      <span>Meklēt pēc:</span>
      <li
      v-for="(value, key, index) in searchMenuOptions"
      @click="searchBy(key)"
      :key="index">
        {{ value }}
      </li>
    </ul>
    <ul v-for="(item, index) in filtered" :key="index">
      <div
      class="search-menu-btn"
      @click="showSearchMenu($event.target.parentNode, item)">+</div>
      <router-link :to="{ name: 'UserItem', params: { user: item.owner, type, id: item.id } }">
        <h3>{{ item.name }}</h3>
        <template v-if="extra">
          <li v-for="ex in extra" :key="ex"><span class="property">{{ properties[ex] }}</span>{{ item[ex] }}</li>
        </template>
        <li v-if="item.amount"><span class="property">{{ properties.amount }}</span>{{ item.amount }}</li>
        <li v-if="item.price"><span class="property">{{ properties.price }}</span>{{ item.price }}</li>
        <li><span class="property">{{ properties.createdAt }}</span>{{ item.createdAt }}</li>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    filtered: Array,
    properties: Object,
    extra: Array,
    type: String
  },
  data() {
    return {
      searchMenuStyle: {
        display: "none",
        left: "0px",
        top: "0px",
        width: "0px",
        height: "0px"
      },
      searchMenuOptions: {},
      searchMenuItem: {}
    }
  },
  methods: {
    showSearchMenu(parent, item) {
      const rect = parent.getBoundingClientRect();
      const left = window.scrollX + rect.left; //pogas vecāka attālums no kreisās puses
      const top = window.scrollY + rect.top; //pogas vecāka attālums no augšas
      this.searchMenuOptions = {};
      for (const [key, value] of Object.entries(this.properties)) {
        if (key in item) this.searchMenuOptions[key] = value;
      }
      this.searchMenuItem = item;
      this.searchMenuStyle = {
        left: left + 'px',
        top: top + 'px',
        width: rect.width + 'px',
        height: rect.height + 'px',
        display: 'block',
      };
    },
    searchBy(key) {
      this.searchMenuStyle.display = 'none';
      this.$emit('send-search-operation', { query: this.searchMenuItem[key].toString(), property: key });
    }
  }
}
</script>

<style scoped>
.item-boxes {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}
ul {
  flex: 1;
  list-style: none;
  margin: 10px;
  padding: 0;
  border-radius: 7px;
  min-width: 200px;
  text-decoration: none;
  box-shadow: 0px 0px 10px #cadbec;
  position: relative;
}
h3 {
  margin: 10px 0;
  color: #2c3e50;
}
li {
  text-align: left;
  margin-top: 4px;
}
li > span {
  font-size: 14px;
  text-align: left;
  display: block;
}
a {
  display: block;
  padding: 10px;
  color: #8593a2;
  text-decoration: none;
  height: calc(100% - 20px);
}
ul:not(.search-operation-menu):hover {
  box-shadow: 0px 0px 20px #95a5b5;
}
ul:hover .search-menu-btn {
  display: block;
}
.property {
  color: #2c3e50;
  font-weight: bold;
  display: inline-block;
}
.property::after {
  content: ':';
  margin: 0px 4px;
}
.highlight {
  padding: 0px 3px;
  background: #2c3e50;
  border-radius: 5px;
  color: #fff;
  margin-right: 4px;
}
.search-menu-btn {
  width: 30px;
  height: 30px;
  background: #42b983;
  border-radius: 100%;
  color: #fff;
  line-height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  display: none;
  cursor: pointer;
}
.search-operation-menu {
  z-index: 99999;
  position: absolute;
  background: #5d758e;
  border-radius: 7px;
  padding: 0;
  margin: 0;
  list-style-type: none;
  overflow-y: overlay;
  font-size: 14px;
  box-shadow: none;
}
.search-operation-menu li {
  color: #fff;
  margin: 0;
  padding: 5px 10px;
  cursor: pointer;
}
.search-operation-menu li:hover {
  background: #2c3e50;
}
.search-operation-menu span {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  display: block;
  padding: 7px;
  background: #2c3e50;
  border-top: 4px solid #42b983;
}
.search-operation-menu::-webkit-scrollbar { /* Chrome */
  display: none;
}
.search-operation-menu {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
@media screen and (max-width: 400px) {
  ul {
    min-width: initial;
    flex: auto;
  }
}
</style>
