<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { PropType, Ref, defineComponent, onMounted, ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { problemDepStatisticChart } from '../../StRectifyStaticsChart.api';

export default defineComponent({
  props: {
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: 'calc(100vh - 250px)',
    },
    depId:{
      type:String as PropType<string>,  
    }
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
    onMounted(() => {
      problemDepStatisticChart({depCode:props.depId}).then(rep=>{
        console.log(rep)
        if(!rep || rep.names==null||rep.names.length==0){
          return
        }
        setOptions({
          title: {
            text: '科技部',
            subtext: '',
            left: 'bottom'
          },
          tooltip: {
            trigger: 'item',
          },
          grid: {
            top: '0',
            left: '15%',
            right: '5%',
            bottom: '10%',
            containLabel: false
          },
          legend: {
            bottom: 10,
            left: 'center',
            data: rep.names||[]
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              label: {
                show: true,
                position: 'inside',
                formatter: '{c}%'
              },
              data: [{value:rep.values[0]||[],name:'完成'},{value:rep.values[1]||[],name:'未完成'}],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
          ]
        })
    })
    })
    return { chartRef }
  },
})
</script>
