<template>
  <div
    :id="item._id"
    class="container box"
    @click="click"
    :title="title"
    v-if="type == 'default'"
  >
    <img class="boxCover shadow" :src="cover" />
    <p class="boxTitle componentTitle">
      {{ item.title }}
    </p>
  </div>
  <div v-else-if="type == 'line'" class="flex-row line">
    <img class="boxCover line shadow" :src="cover" />
    <p class="boxTitle line">
      <b>{{ item.title }}</b>
    </p>
  </div>
</template>
<script>
import BaseCollection from "../mixins/BaseCollection";

export default {
  name: "BoxItem",
  mixins: [BaseCollection],
  props: {
    type: {
      type: String,
      default: "default",
    },
  },
  mounted() {
    if (this.$route.query.id == this.item._id && this.item.videos) {
      this.$nextTick(() => {
        this.scrollFunction();
        this.$store.dispatch("boxes/selectBox", this.item);
      });
    }
  },
  methods: {
    click() {
      if (this.$route.path != "/boxes") {
        this.$store.dispatch("boxes/loadBox", this.item._id);
        this.$router.push("/boxes?id=" + this.item._id);
      } else {
        this.scrollFunction();
      }
    },
  },
  computed: {
    cover() {
      let res = "/static/icons/dummy/box.svg";
      if (
        this.type == "default" &&
        this.item.covers &&
        this.item.covers.cover128
      ) {
        res = this.item.covers.cover128;
      } else if (
        this.type == "line" &&
        this.item.covers &&
        this.item.covers.cover64
      ) {
        res = this.item.covers.cover64;
      }
      return res;
    },
    title() {
      return (
        this.item.title +
        (this.item.year && this.item.year > 0
          ? " (" + this.item.year + ")"
          : "")
      );
    },
  },
};
</script>

<style scoped>
.boxCover.line {
  width: 64px;
  height: 90px;
}
.boxTitle.line {
  align-self: center;
  margin-left: 8px;
}
</style>