<script setup lang="ts">
import {onMounted, type Ref, watch,ref} from "vue";
import * as echarts from 'echarts';
import {inject} from "vue-demi";

import useApis from "@/apis";
import {type EChartsType} from "echarts";

const apis = useApis()
defineProps<{
  assignmentId:number
}>()
const currentEngagement = inject('currentEngagement') as Ref<any>;

const loadingStatus = inject('loadingStatus') as Ref<{
  edit:boolean,
  pause:boolean,
  process:boolean,
  total:boolean
}>;
let noData = ref(false)
watch(currentEngagement,()=>{
  if (currentEngagement.value === null){
    return;
  }
  noData.value = false
  setTimeout(()=>{
    let chartDom = document.getElementById('total-canvas');
    let myChart = echarts.getInstanceByDom(chartDom);
    if (!myChart){
      myChart = echarts.init(chartDom);
    }
    drawChart(myChart);
  },0)
},{deep:true})

let data = []
function drawChart(chart: EChartsType){
  //TODO
  if (!currentEngagement.value){
    return;
  }
  chart.showLoading({
    text: '加载中'
  });
  loadingStatus.value.total = true;
  apis.getOverview(currentEngagement.value.studentId,currentEngagement.value.assignmentId)
  .then((res:any) => {
    // console.log(res);
    if (res&&res.data&&res.data.code === 200){
      noData.value = false
      if (res.data.data.insertCount == 0 && res.data.data.longPauseCount == 0 && res.data.data.deleteCount == 0){
        noData.value = true;
        chart.hideLoading();
        loadingStatus.value.total = false;
        return
      }
      data = [
        { value: res.data.data.insertCount, name: '产出行为' },
        { value: res.data.data.longPauseCount, name: '停顿行为' },
        { value: res.data.data.deleteCount, name: '修改行为' },
      ]
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '总体分析',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            bottom:-50,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      chart.setOption( option);
      chart.hideLoading();
      loadingStatus.value.total = false;
    }
    else{
      noData.value = true;
      chart.hideLoading();
      loadingStatus.value.total = false;
    }
  })
}
onMounted(()=>{
  let chartDom = document.getElementById('total-canvas');
  let myChart = echarts.init(chartDom);
  drawChart(myChart)
  window.addEventListener('resize', ()=>{
    myChart.resize()
  })
})
</script>

<template>
  <div id="total-canvas" class="canvas-container" v-if="!noData">

  </div>
  <div class="canvas-container" v-else>
    <el-empty description="暂无数据"/>
  </div>
</template>

<style scoped>
.canvas-container{
  width: 100%;
  height: 100%;
}
</style>
