<template>
  <div class="details-site">
    <div class="multi-kills">
      <h3 class="text-center mt-2">Multi-Kills</h3>
      <MultiKillsChart/>
    </div>
    <hr>
    <div class="spray">
      <h3 class="text-center">Spray</h3>
      <SprayGraph :spray="data.spray"/>
    </div>
  </div>
</template>

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

export default {
  name: "Details",
  components: {SprayGraph, MultiKillsChart},
  setup() {
    const store = useStore()

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

    const getWeaponDamage = async () => {
      const resData = await GetWeaponDmg(store.state.matchDetails.match_id)
      data.spray = resData.spray
    }

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

    return {data}
  }
}
</script>

<style lang="scss" scoped>
.details-site {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  h3 {
    margin-bottom: 1rem;
  }

  hr {
    width: 100%;
    border: 1px solid white;
  }
}
</style>
