<template>
  <div :style="props.ud.flames || props.ud.flash || props.ud.he ? 'display: flex' : 'display: none'"
       class="player-utility">
    <div class="heading">
      <img :src="props.avatar" alt="Player avatar" class="avatar">
      <h4>{{ props.name }}</h4>
    </div>
    <div :id="'utility-chart-' + props.id"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {LegendComponent, TooltipComponent} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import { TitleComponent } from 'echarts/components';
import {onMounted} from "vue";

export default {
  name: "FlashChart",
  props: {
    id: {
      type: Number,
      default: 0,
      required: true
    },
    avatar: {
      type: String,
      default: '',
      required: true
    },
    name: {
      type: String,
      default: '',
      required: true
    },
    ud: {
      type: Object,
      required: true
    },
  },
  setup(props) {
    onMounted(() => {
      echarts.use([
        TooltipComponent,
        LegendComponent,
        PieChart,
        CanvasRenderer,
        TitleComponent,
        LabelLayout
      ]);

      let myChart = echarts.init(document.getElementById(`utility-chart-${props.id}`), {}, {width: 500, height: 300});
      let option

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          show: false
        },
        series: [
          {
            name: 'Utility Damage',
            type: 'pie',
            radius: [0, '65%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#000',
              borderWidth: 3
            },
            label: {
              position: 'inside',
              fontsize: 36,
              fontWeight: 'bold'
            },
            labelLine: {
              show: false
            },
            data: [
              (props.ud.flames ? {
                value: props.ud.flames ? props.ud.flames : null,
                name: 'Flames',
                itemStyle: {
                  color: '#FF4343FF'
                }
              } : {}),
              (props.ud.he ? {
                value: props.ud.he ? props.ud.he : null,
                name: 'HE',
                itemStyle: {
                  color: '#62c265'
                }
              } : {})
              ,
              (props.ud.flash ? {
                value: props.ud.flash ? props.ud.flash : null,
                name: 'Flash',
                itemStyle: {
                  color: '#18cff3'
                }
              } : {}),
              (props.ud.smoke ? {
                value: props.ud.smoke ? props.ud.smoke : null,
                name: 'Smoke',
                itemStyle: {
                  color: '#6e6b78'
                }
              } : {}),
              (props.ud.decoy ? {
                value: props.ud.decoy ? props.ud.decoy : null,
                name: 'Decoy',
                itemStyle: {
                  color: '#e28428'
                }
              } : {})
            ]
          }
        ]
      };

      myChart.setOption(option);
    })

    return {props}
  }
}
</script>

<style lang="scss" scoped>
.player-utility {
  flex-direction: column;
  align-items: center;

  .heading {
    display: flex;
    margin-top: 10px;
    margin-bottom: -30px;

    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 20px;
      color: #ff4343;
    }

    h4 {
      margin-top: 7px;
    }
  }

  p {
    padding-top: 40px;
    margin-bottom: -20px;
  }
}

@for $i from 0 through 9 {
  #utility-chart-#{$i} {
    margin: 0;
  }
}
</style>
