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

  template(v-if="talent")
    .talent-popover__meta
      img(:src="src")
      .talent-popover__info
        div
          .talent-popover__name {{ talent.abbr }}
          .talent-popover__rank(:class="'talent-popover__rank-' + talent.tier") {{ talent.tierDesc }}

        div {{ talent.type | talentTypeText }}

    .talent-popover__desc(v-html="talent.desc")
</template>

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

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

  computed: {
    src() {
      if(!this.talent) return ""
      return getKitAssetURL(this.gameID, "talents", this.talent.img)
    },
  },

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

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

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

      api.fetchTalent(this.gameID, this.no, this.version)
        .then(res => {
          this.talent = res.talent
          this.showLoading = false
          clearTimeout(showLoadingTimer)
        })
    },
  },

  filters: {
    talentTypeText(type) {
      return {
        "common": "通用天赋",
        "synergy": "英雄羁绊",
        "class": "职业强化",
        "skill": "主动技能",
      }[type]
    },
  },
}
</script>

<style lang="stylus">
.talent-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

.talent-popover__meta
  height: 44px
  display: flex
  border-bottom: 1px solid $gray-3
  padding-bottom: 10px

  > img
    height: 44px
    margin-right: 14px

.talent-popover__info
  line-height: 1.5

  > div:first-child
    display: flex
    align-items: center

  > div:last-child
    font-size: $small

.talent-popover__version
  margin-left: auto
  font-size: $micro
  color: $gray-2

.talent-popover__name
  font-size: $medium
  margin-right: 6px
  line-height: 1.5
  font-size: $medium

.talent-popover__rank
  width: 16px
  height: 16px
  border-radius: 3px
  color: white
  display: flex
  justify-content: center
  align-items: center
  font-size: $micro

.talent-popover__rank-1
  background: $cost-1

.talent-popover__rank-2
  background: $cost-2

.talent-popover__rank-3
  background: $cost-3

.talent-popover__rank-4
  background: $cost-4

.talent-popover__rank-5
  background: $cost-5

.talent-popover__desc
  color: $gray-1
  line-height: 1.5
  margin-top: 13px
  font-size: $small
</style>
