<template lang="pug">
.synergy-champion-popper(
  :class="{ '__popover--loaded': name != '' || showLoading }"
)
  img.__loading(
    v-if="showLoading"
    src="../img/loading.gif"
  )

  span(v-if="name !== ''") 任意「{{name}}」英雄
</template>

<script>
import api from "../api"

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

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

  methods: {
    fetchSynergy() {
      this.name = ""
      const showLoadingTimer = setTimeout(() => {
        this.showLoading = true
      }, 100)

      api.fetchSynergyByIDs(this.gameID, this.version, [Number(this.no)])
        .then(res => {
          this.name = res.synergies[0].abbr
          this.showLoading = false
          clearTimeout(showLoadingTimer)
        })
    }
  },
}
</script>

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