<template>
  <div class="damage-site">
    <div class="total-damage">
      <h3 class="text-center mt-2">Total Damage</h3>
      <TotalDamage/>
    </div>
    <div class="hitgroup">
<!--      <h3 class="text-center">Damage by Hitgroup</h3>-->
      <HitgroupPuppet :equipment_map="data.equipment_map" :stats="data.stats" />
    </div>
  </div>
</template>

<script>
import HitgroupPuppet from '@/components/HitgroupPuppet'
import TotalDamage from "@/components/TotalDamage"
import {onMounted, reactive} from "vue";
import {useStore} from "vuex";
import {GetWeaponDmg} from "@/utils";

export default {
  name: "DamageSite.vue",
  components: {HitgroupPuppet, TotalDamage},
  setup() {
    const store = useStore()

    const data = reactive({
      equipment_map: {},
      stats: [],
    })

    const getWeaponDamage = async () => {
      const resData = await GetWeaponDmg(store, store.state.matchDetails.match_id)
      if (resData !== null) {
        data.equipment_map = resData.equipment_map
        data.stats = resData.stats
      }
    }

    onMounted(() => {
      getWeaponDamage()
    })

    return {data}
  }
}
</script>

<style scoped>
.damage-site {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
