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

export default defineComponent({
  props: {
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: 'calc(100vh - 250px)',
    },
  },
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
    onMounted(() => {
      projectStatisticChart({}).then(rep=>{
        if(!rep || rep.names==null||rep.names.leJSONngth==0){
          return
        }
        setOptions({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            top: '0',
            left: '15%',
            right: '5%',
            bottom: '10%',
            containLabel: false
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            max: 100,
            axisLabel: {
              formatter: '{value} %',
            }
          },
          yAxis: {
            type: 'category',
            data: rep.names||[]
          },
          series: [
            {
              type: 'bar',
              label: {
                show: true,
                position: 'right',
                formatter: '{c}%'
              },
              data: rep.values||[]
            },
          ]
        })
      })
    })
    return { chartRef }
  },
})
</script>
