<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: '#c6c6c6',
        position: 'top',
        distance: 0,
        fontWeight: 'bold',
      },
      data: targetyAxis,
    },
    {
      type: 'bar',
      name: '设计',
      barWidth: 16,
      barMinHeight: 2,
      barGap: '60%',
      itemStyle: {
        color: '#91cc75',
      },
      label: {
        show: true,
        color: '#c6c6c6',
        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>