<template>
  <div class="annual_runoff_condition">
    <barChart
      :echartData="echartData"
      yAxisName="百分比/%"
      ref="barChartRef"
      :legend="{ show: false }"
      :grid="{
        left: '3%',
        right: '7%',
        top: '15%',
        bottom: '3%',
        containLabel: true,
      }"
      v-if="echartData.xAxisData.length"
    />
  </div>
</template>

<script setup>
import {} from 'vue';
import barChart from '@/components/Echarts/barChart.vue';
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  targetAnnualRunoffTotalControlRate: {
    type: String,
    default: '',
  },
});
const { data, targetAnnualRunoffTotalControlRate } = props;
const list = data.map(item => (item.value * 1 > 0 ? item.value * 1 : 0));
const max = Math.ceil(Math.max(...list) / 100) * 100;
const echartData = {
  xAxisData: data.map(item => item.name),
  yAxisOption: {
    min: 0,
    max: max > targetAnnualRunoffTotalControlRate ? max : targetAnnualRunoffTotalControlRate * 1 + 10,
  },
  seriesData: [
    {
      type: 'bar',
      name: '达标率',
      barWidth: 16,
      barMinHeight: 2,
      itemStyle: {
        color: '#73c0de',
      },
      // label: {
      //   show: true,
      //   color: '#c6c6c6',
      //   position: 'top',
      //   distance: 0,
      //   fontWeight: 'bold'
      // },
      data: list,
      markLine: {
        symbol: 'none',
        label: {
          show: !!targetAnnualRunoffTotalControlRate,
          position: 'middle',
          formatter: '目标年径流总量控制率：{c}%',
          color: 'red',
          fontWeight: 'bold',
        },
        lineStyle: {
          color: 'red',
          width: 2,
        },
        data: [
          {
            name: '目标年径流总量控制率',
            yAxis: targetAnnualRunoffTotalControlRate * 1,
          },
        ],
      },
    },
  ],
};
</script>

<style lang="scss" scoped>
.annual_runoff_condition {
  height: 300px;
}
</style>