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

  template(v-if="champion")
    .champion-popover__top
      .champion-popover__pic
        img.champion-popover__img(:src="src")
        cost(:cost="Number(champion.champion.cost)")
      .champion-popover__info
        .champion-popover__abbr {{ champion.champion.abbr }}
        .champion-popover__name {{ champion.champion.title }} · {{ champion.champion.name }}
        .champion-popover__info__icons
          .champion-popover__info__icon(
            v-for="(item, index) in synergies"
            :key="index"
          )
            img(:src="getItemSrc(item)")
            span {{ item.abbr }}

    .champion-popover__bottom
      img(:src="getKitAssetURL(gameID, 'skills', skill.img)")
      .champion-popover__info
        .champion-popover__info__title {{ skill.name }}
        .champion-popover__info__desc(v-html="skill.desc")
</template>

<script>
import Cost from "./cost"
import api from "../api"
import { getKitAssetURL } from "../util"
import uniqBy from "lodash.uniqby"

export default {
  data() {
    return {
      no: "",
      gameID: "",
      version: "",
      champion: null,
      list: [],
      skill: null,
      showLoading: false,
    }
  },

  computed: {
    src() {
      return getKitAssetURL(this.gameID, "champions_avatar", this.champion.champion.img)
    },

    synergies() {
      if(!this.champion) return []
      return uniqBy(this.champion.origins.concat(this.champion.classes), "synergieNO")
    },
  },

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

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

    getKitAssetURL: getKitAssetURL,

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

      api.fetchChampion(this.gameID, this.no, this.version)
        .then(res => {
          this.skill = res.skill
          this.champion = res
          this.list = this.champion.origins.map(item => ({
            name: item.name,
            img: item.img,
          }))
            .concat(this.champion.classes.map(item => ({
              name: item.name,
              img: item.img,
            })))

          this.list = uniqBy(this.list, "synergieNO")

          this.showLoading = false
          clearTimeout(showLoadingTimer)
        })
    },
  },

  components: {
    Cost,
  },
}
</script>

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

.champion-popover__top
  display flex
  padding-bottom: 20px
  border-bottom: 1px solid #F5F5F5FF

.champion-popover__bottom
  padding-top: 10px
  display flex
  > img
    flex-shrink: 0
    width: 40px
    height: 40px

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

.champion-popover__info
  margin-left: 12px

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

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

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

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

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

.champion-popover .wiki__cost
  width: 40px

.champion-popover__pic
  display: flex
  flex-direction: column

.champion-popover__info__icons
  display: flex

.champion-popover__info__icon
  margin-right: 5px
  display: flex
  align-items: center

.champion-popover__info__icon img
  width: 12px

.champion-popover__info__icon span
  font-size: $micro
  margin-left: 3px

.champion-popover__info__desc
  font-size: 12px
  color:rgba(97,97,97,1)
  margin-top: 8px
</style>
