<template>
  <div :style="props.total.self || props.total.team || props.total.enemy ? 'display: flex' : 'display: none'"
       class="player-flash">
    <div class="heading">
      <img :src="props.avatar" alt="Player avatar" class="avatar">
      <h4>{{ props.name }}</h4>
    </div>
    <div :id="'flash-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 {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
    },
    total: {
      type: Object,
      required: true
    },
    duration: {
      type: Object,
      required: true
    },
  },
  setup(props) {
    onMounted(() => {
      echarts.use([
        TooltipComponent,
        LegendComponent,
        PieChart,
        CanvasRenderer,
        LabelLayout
      ]);

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

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          data: [
            {
              name: 'Self',
              textStyle: {
                color: 'white',
              }
            },
            {
              name: 'Team',
              textStyle: {
                color: 'white'
              }
            },
            {
              name: 'Enemy',
              textStyle: {
                color: 'white'
              }
            },
          ]
        },
        series: [
          {
            name: 'Flash-Count',
            type: 'pie',
            radius: [0, '40%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#000',
              borderWidth: 3
            },
            label: {
              position: 'inside',
              fontsize: 36,
              fontWeight: 'bold'
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: props.total.self ? props.total.self : null,
                name: 'Self',
                selected: true
              },
              {
                value: props.total.team ? props.total.team : null,
                name: 'Team'
              },
              {
                value: props.total.enemy ? props.total.enemy : null,
                name: 'Enemy'
              }
            ]
          },
          {
            name: 'Flash-Duration (in s)',
            type: 'pie',
            radius: ['45%', '65%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#000',
              borderWidth: 3
            },
            labelLine: {
              length: 20
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: [
              {
                value: props.duration.self ? props.duration.self.toFixed(2) : null,
                name: 'Self'
              },
              {
                value: props.duration.team ? props.duration.team.toFixed(2) : null,
                name: 'Team'
              },
              {
                value: props.duration.enemy ? props.duration.enemy.toFixed(2) : null,
                name: 'Enemy'
              }
            ]
          }
        ]
      };

      myChart.setOption(option);
    })

    return {props}
  }
}
</script>

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

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

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

    h4 {
      margin-top: 7px;
    }
  }
}

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