<template>
  <div class="facility_ratio">
    <barChart
      :echartData="echartData"
      yAxisName="百分比/%"
      :tooltipFormatter="tooltipFormatter"
      ref="barChartRef"
      v-if="echartData.xAxisData.length"
    />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import barChart from '@/components/Echarts/barChart.vue'
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
const { data } = props
const targetyAxis = data.targetyAxis.map(item => item * 1 > 0 ? item * 1 : 0)
const realityyAxis = data.realityyAxis.map(item => item * 1 > 0 ? item * 1 : 0)
const echartData = reactive({
  xAxisData: data.xaxis,
  yAxisOption: {
    min: 0,
    max: Math.ceil(Math.max(...targetyAxis, ...realityyAxis) / 100) * 100 || 10
  },
  seriesData: [
    {
      type: 'bar',
      name: '目标',
      barWidth: 16,
      barMinHeight: 2,
      itemStyle: {
        color: '#5470c6'
      },
      label: {
        show: true,
        color: 'black',
        position: 'top',
        distance: 0,
        fontWeight: 'bold'
      },
      data: targetyAxis
    },
    {
      type: 'bar',
      name: '设计',
      barWidth: 16,
      barMinHeight: 2,
      barGap: '60%',
      itemStyle: {
        color: '#91cc75'
      },
      label: {
        show: true,
        color: 'black',
        position: 'top',
        distance: 0,
        fontWeight: 'bold'
      },
      data: realityyAxis
    }
  ]
})

const tooltipFormatter = (params) => {
  const dataIndex = params[0].dataIndex
  return `
        <div style="margin: 0px 0 0;line-height:1;min-width: 120px">
          <div>${params[0].axisValue}</div>
          <div style="margin-top:10px">
            <div style="display: flex;align-items: center;justify-content: space-between">
              <div style="display: flex;align-items: center;">
                <span style="background-color: ${params[0].color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
                <span>${params[0].seriesName}</span>
              </div>
              <div style="color:#666;font-weight:900;font-size:14px">${params[0].value}</div>
            </div>
          </div>
          <div style="margin-top:10px">
            <div style="display: flex;align-items: center;justify-content: space-between">
              <div style="display: flex;align-items: center;">
                <span style="background-color: ${params[1].color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
                <span>${params[1].seriesName}</span>
              </div>
              <div style="color:#666;font-weight:900;font-size:14px">${params[1].value}</div>
            </div>
          </div>
          <div style="margin-top:10px">
            <div style="display: flex;align-items: center;justify-content: space-between">
              <div style="display: flex;align-items: center;">
                <span style="background-color: #fac858;width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
                <span>是否达标</span>
              </div>
              <div style="color:#666;font-weight:900;font-size:14px">${data.resultyAxis[dataIndex]}</div>
            </div>
          </div>
        </div>`
}
</script>

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