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

  template(v-if="synergy")
    .synergy-popover__name
      .synergy-popover__name__icon

        img.synergy-popover__name__icon--icon(:src="src")

      .synergy-popover__name__intro
        div {{ synergy.abbr }}
        div {{ typeName }}

    .synergy-popover__desc(v-html="synergy.desc")

    .synergy-popover__effect
      .synergy-popover__effect__title 羁绊效果
      .synergy-popover__levels
        .synergy-popover__level(
          v-for="effect in synergy.effects"
          :key="effect.level"
        )
          .synergy-popover__level__num {{ effect.required }}
          .synergy-popover__level__effect(v-html="effect.desc")
</template>

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

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

  computed: {
    src() {
      return getKitAssetURL(this.gameID, "synergies", this.synergy.img)
    },

    typeName() {
      if(this.synergy.type === "Origin") return "种族"
      if(this.synergy.gameID === "000001") return "职业"
      return "阵营"
    },
  },

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

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

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

<style lang="stylus">
.synergy-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 // 创建整容的 Modal z-index 为 1000， 这里要比他大

.synergy-popover
  padding: 11px 21px

.synergy-popover__name
  display: flex
  height: 44px
  align-items: center
  font-size: $base
  flex-shrink: 0
  border-bottom: 1px solid $gray-3
  padding-bottom: 10px

.synergy-popover__name__icon
  display: flex
  align-items: center
  width: 44px
  margin-right: 12px

  > ._icon
    width: 44px !important
    height: 44px !important

  > img:last-child
    margin-left: -31px
    width: 18px
    height: 18px

.synergy-popover__level
  display: flex
  margin-bottom: 6px

.synergy-popover__level__num
  height: 14px
  width: 14px
  display: flex
  justify-content: center
  align-items: center
  color: white
  background: $base-color
  font-size: $micro
  margin-top: 2px
  margin-right: 8px
  flex-shrink: 0

.synergy-popover__level__effect
  line-height: 1.5
  font-size: $small

.synergy-popover__name__intro
  line-height: 1.5

  > div:first-child
    font-size: $medium

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

.synergy-popover__name__version
  margin-left: auto
  align-self: flex-start
  font-size: $micro
  color: $gray-2
  margin-top: 5px

.synergy-popover__desc
  margin-top: 12px
  margin-bottom: 15px
  color: $gray-1
  font-size: $small
  line-height: 1.5

.synergy-popover__champions__title
.synergy-popover__effect__title
  font-weight: bold
  font-size: $base
  line-height: 1.5

.synergy-popover__effect__title
  margin-bottom: 15px

.synergy-popover__champions__title
  margin-top: 14px
  margin-bottom: 10px

.synergy-popover__champions
  display: flex
  flex-wrap: wrap
  margin: -10px -5px 0

.synergy-popover__champion
  position: relative
  width: 44px
  height: 44px
  margin: 10px 5px 0

  > img
    width: 44px
    height: 44px

.synergy-popover__champion__cost
  position: absolute
  top: 0
  right: 0
  color: white
  font-size: $micro
  width: 14px
  height: 14px
  background: $base-color
  display: flex
  justify-content: center
  align-items: center
  border-bottom-left-radius: 6px

.synergy-popover__champion__abbr
  position: absolute
  left: 0
  width: 100%
  bottom: 2px
  color: white
  font-size: $micro
  line-height: 1.5
  text-align: center

.synergy-popover__name__icon--icon
  margin: 0 !important
  width: 44px !important
  height: 44px !important
</style>
