<template>
  <div ref="dfChartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { PropType, Ref, defineComponent, onMounted, ref } from 'vue';
import { queryDomainFind } from '../StProjectStaticsChart.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)',
    },
    depId:{
      type:String as PropType<string>,  
    }
  },
  setup(props) {
    const dfChartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(dfChartRef as Ref<HTMLDivElement>);
    onMounted(() => {
      queryDomainFind({}).then(rep=>{
        if(!rep || rep.names==null||rep.names.length==0){
          return
        }
        setOptions({
          tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          bottom: '15%'
        },
        grid: {
          top: '3%',
          left: '15%',
          right: '4%',
          bottom: '25%',
          containLabel: true
      },
        xAxis: [
          {
            type: 'category',
            data: rep.names||[]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '非常严重',
            type: 'bar',
            barWidth: 30,
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: rep.fcyzValues||[]
          },
          {
            name: '严重',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: rep.yzValues||[]
          },
          {
            name: '一般',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: rep.values||[]
          },
          {
            name: '不严重',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: rep.byzValues||[]
          },
        ]
        })
      })
    })
    return { dfChartRef }
  },
})
</script>
