<template>
  <div class="analysis-bar-chart">
    <div v-if="showLegend" class="chart-legend">
      <span v-for="item in items" :key="item.label" class="legend-item">
        <i :style="{ backgroundColor: item.color }"></i>
        {{ item.label }}
      </span>
    </div>

    <div class="chart-body">
      <div class="axis-title">{{ axisTitle }}</div>
      <div class="plot">
        <div class="y-axis">
          <span v-for="tick in ticks" :key="tick">{{ tick }}</span>
        </div>
        <div class="bars">
          <div v-for="item in items" :key="item.label" class="bar-column">
            <span
              class="bar-value"
              :style="{ bottom: `calc(${Math.max((item.value / maxValue) * 100, 3)}% + 8px)` }"
            >
              {{ item.value }}{{ valueSuffix }}
            </span>
            <div
              class="bar"
              :style="{
                height: `${Math.max((item.value / maxValue) * 100, 3)}%`,
                backgroundColor: item.color,
              }"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

export interface AnalysisBarItem {
  label: string;
  value: number;
  color: string;
}

const props = withDefaults(
  defineProps<{
    items: AnalysisBarItem[];
    max?: number;
    axisTitle?: string;
    valueSuffix?: string;
    showLegend?: boolean;
  }>(),
  {
    max: 0,
    axisTitle: "单位(h)",
    valueSuffix: "",
    showLegend: true,
  },
);

const maxValue = computed(() => {
  if (props.max > 0) return props.max;
  return Math.max(...props.items.map((item) => item.value), 1);
});

const ticks = computed(() => {
  const step = maxValue.value / 6;
  return Array.from({ length: 7 }, (_, index) => Math.round(maxValue.value - step * index));
});
</script>

<style scoped lang="scss">
.analysis-bar-chart {
  width: 100%;
}

.chart-legend {
  width: 760px;
  margin: 0 auto 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 34px;
  color: #646c78;
  font-size: 18px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  i {
    width: 12px;
    height: 12px;
    border-radius: 2px;
  }
}

.chart-body {
  width: 900px;
  margin: 0 auto;
}

.axis-title {
  margin-left: 8px;
  color: #8a8f99;
  font-size: 18px;
}

.plot {
  display: flex;
  height: 330px;
  margin-top: 10px;
}

.y-axis {
  width: 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 12px;
  color: #a4a9b1;
  font-size: 18px;
}

.bars {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 34px 0 18px;
  border-bottom: 1px solid rgba(214, 221, 232, 0.45);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(214, 221, 232, 0.34) 0,
      rgba(214, 221, 232, 0.34) 1px,
      transparent 1px,
      transparent 55px
    );
}

.bar-column {
  position: relative;
  height: 100%;
  width: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bar {
  width: 42px;
  border-radius: 4px 4px 0 0;
}

.bar-value {
  position: absolute;
  color: #4b4f58;
  font-size: 18px;
}
</style>
