<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 { domainStatisticChart } 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)',
    },
  },
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
    onMounted(() => {
      domainStatisticChart({}).then(rep=>{
        if(!rep || rep.names==null||rep.names.length==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>
