<template>
  <transition
      enter-active-class="animate__animated animate__fadeIn"
      mode="out-in"
      appear>
    <font-awesome-icon  class="billi-icon-as-bg" :icon="getIconName(item.item_type)" color="#eee" size="xxl"/>
  </transition>


  <transition
      enter-active-class="animate__animated animate__lightSpeedInRight"
      mode="out-in"
      appear
  >
    <article class="billi-read-detail" :key="item.id">
      <aside>
        <img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
      </aside>
      <section>
        <InventoryItemHead :item="item"></InventoryItemHead>
        <InventoryItemCollectionInfo :item="item"></InventoryItemCollectionInfo>
        <InventoryItemDescription :item="item"></InventoryItemDescription>
      </section>
    </article>
  </transition>
</template>

<script>
import { mapGetters} from "vuex";
import Set from "@/store/classes/Set";
import InventoryItemDescription from "@/components/camera/parts/InventoryItemDescription";
import InventoryItemCollectionInfo from "@/components/camera/parts/InventoryItemCollectionInfo";
import InventoryItemHead from "@/components/camera/parts/InventoryItemHead";

export default {
  name: "AccessoireReadDetail",
  components: {
    InventoryItemHead,
    InventoryItemDescription,
    InventoryItemCollectionInfo
  },
  props: {
    item: {
      type:Set,
      required: true
    }
  },
   computed: {
     ...mapGetters(["activeItem","getIconName"]),
  },
  methods: {

  }
}
</script>

<style scoped>

</style>