<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: 'black',
      //   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>