<template lang="pug">
.item-popover(
  :class="{ '__popover--loaded': items != null || showLoading }"
)
  img.__loading(
    v-if="showLoading"
    src="../img/loading.gif"
  )

  template(v-if="items")
    .item-popover__top
      img.item-popover__img(:src="src")
      .item-popover__info
        .item-popover__abbr
          span {{ items.detail.abbr }}
          template(v-if="items.detail.type && items.detail.type !== ''")
            span(
              v-for="index of Number(items.detail.type)"
              :index="index"
            ) ★
        .item-popover__name {{ items.detail.name }}

    div(v-html="items.detail.desc")
</template>

<script>
import api from "../api"
import { getKitAssetURL } from "../util"

export default {
  data() {
    return {
      no: "",
      gameID: "",
      version: "",
      items: null,
      showLoading: false,
    }
  },

  computed: {
    src() {
      return getKitAssetURL(this.gameID, "items", this.items.detail.img)
    },
  },

  watch: {
    no() {
      this.fetchItem()
    },
  },

  methods: {
    getItemSrc(item) {
      return getKitAssetURL(this.gameID, "synergies", item.img)
    },

    fetchItem() {
      this.items = null
      const showLoadingTimer = setTimeout(() => {
        this.showLoading = true
      }, 100)

      api.fetchItem(this.gameID, this.no, this.version)
        .then(res => {
          this.items = res
          this.showLoading = false
          clearTimeout(showLoadingTimer)
        })
    },
  },
}
</script>

<style lang="stylus">
.item-popover
  position: absolute
  top: -3000px
  background:rgba(255,255,255,1);
  border-radius:4px;
  border:1px solid rgba(224,224,224,1);
  z-index: 2000
  max-width: 300px

.item-popover__img
  width: 40px
  height: 40px

.item-popover__info
  margin-left: 12px

.item-popover__abbr
  font-size: $medium
  margin-bottom: 5px

.item-popover__name
  font-size: $small
  margin-bottom: 5px

.item-popover__extra
  font-size: $micro
  display: flex

.item-popover__item
  display: flex
  align-items: center

.item-popover__item__img
  margin-right: 5px
  width: 12px
  height: 12px

.item-popover__top
  display: flex
  border-bottom: 1px solid $gray-3
  padding-bottom: 12px
  margin-bottom: 12px

.item-popover__bottom
  margin-top: 10px
  color: $gray-2

.item-popover__bottom__item
  margin-bottom: 5px
  margin-left: 18px
  list-style: disc
</style>
