<template>
  <div class="chart-container">
    <div v-for="(item, index) in chartData" :key="index" class="chart-card">
      <!-- 研发投入 -->
      <div class="metric-section">
        <div class="metric-header">
          <span class="title">研发投入</span>
          <span class="growth-badge">+13.2%</span>
        </div>
        <!-- 制裁后 -->
        <div class="bar-row">
          <div class="year-label">{{ item.year }}</div>
          <div style="width: calc(100% - 66px);">
            <div class="bar after" :style="{ width: getInvestmentWidth(item.investmentAfter) + '%' }">
              <div class="value-label">{{ formatInvestment(item.investmentAfter) }}</div>
            </div>
          </div>

        </div>
        <!-- 制裁前 -->
        <div class="bar-row">
          <div class="year-label">{{ item.year }}</div>
          <div style="width: calc(100% - 66px);">
            <div class="bar before" :style="{ width: getInvestmentWidth(item.investmentBefore) + '%' }">
              <div class="value-label">{{ formatInvestment(item.investmentBefore) }}</div>
            </div>
          </div>

        </div>
      </div>

      <!-- 研发人员 -->
      <div class="metric-section">
        <div class="metric-header">
          <span class="title">研发人员</span>
          <span class="growth-badge">+13.2%</span>
        </div>
        <!-- 制裁后 -->
        <div class="bar-row">
          <div class="year-label">{{ item.year }}</div>
          <div style="width: calc(100% - 66px);">
            <div class="bar after" :style="{ width: getStaffWidth(item.staffAfter) + '%' }">
              <div class="value-label">{{ formatStaff(item.staffAfter) }}</div>
            </div>
          </div>
        </div>
        <!-- 制裁前 -->
        <div class="bar-row">
          <div class="year-label">{{ item.year }}</div>
          <div style="width: calc(100% - 66px);">
            <div class="bar before" :style="{ width: getStaffWidth(item.staffBefore) + '%' }">
              <div class="value-label">{{ formatStaff(item.staffBefore) }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 图例 -->
      <div class="legend">
        <div class="legend-item">
          <div class="color-box after"></div>
          <span>制裁后</span>
        </div>
        <div class="legend-item">
          <div class="color-box before"></div>
          <span>制裁前</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 模拟从 JSON 导入（实际可替换为 import data from './rdData.json'）
const rawData = [
  { year: "2019", investmentBefore: 1.01, investmentAfter: 1.37, staffBefore: 80000, staffAfter: 96000 },
  { year: "2020", investmentBefore: 1.15, investmentAfter: 1.52, staffBefore: 85000, staffAfter: 102000 },
  { year: "2021", investmentBefore: 1.20, investmentAfter: 1.68, staffBefore: 90000, staffAfter: 110000 },
  { year: "2022", investmentBefore: 1.25, investmentAfter: 1.75, staffBefore: 92000, staffAfter: 115000 },
  { year: "2023", investmentBefore: 1.30, investmentAfter: 1.85, staffBefore: 95000, staffAfter: 120000 }
];

const chartData = ref(rawData);

// === 投入相关计算 ===
const maxInvestment = computed(() => {
  return Math.max(...chartData.value.flatMap(d => [d.investmentBefore, d.investmentAfter]));
});

function getInvestmentWidth(value) {
  return Math.min(100, (value / maxInvestment.value) * 100);
}

function formatInvestment(value) {
  return value.toFixed(2) + '亿元';
}

// === 人员相关计算 ===
const maxStaff = computed(() => {
  return Math.max(...chartData.value.flatMap(d => [d.staffBefore, d.staffAfter]));
});

function getStaffWidth(value) {
  return Math.min(100, (value / maxStaff.value) * 100);
}

function formatStaff(value) {
  return Math.round(value / 1000) + 'k+';
}
</script>

<style scoped>
.chart-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
}

.chart-card {
  flex: 1;
  min-width: 260px;
  max-width: 320px;
  background: rgba(240, 249, 255, 1);

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.metric-section {
  margin-bottom: 24px;
}

.metric-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.title {


  color: rgba(59, 65, 75, 1);

  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0px;
  text-align: justify;
}

.growth-badge {
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  border: 1px solid rgba(166, 227, 111, 0.5);
  border-radius: 4px;
  background: rgba(166, 227, 111, 0.2);
  color: rgba(33, 129, 57, 1);
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0px;
  text-align: center;
  padding: 0 4px;
  margin-left: 8px;
}

.bar-row {
  display: flex;
  align-items: center;
  height: 28px;
  margin-bottom: 8px;
}

.year-label {

  width: 66px;
  font-size: 13px;
  color: #64748b;
  text-align: left;
}

.bar {
  flex: 0 0 auto;
  height: 24px;
  border-radius: 0 12px 12px 0px;
  min-width: 20px;
  position: relative;
  /* 👈 关键：为内部绝对定位提供参照 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 数值靠右 */
  padding-right: 8px;
  /* 避免贴边 */
  box-sizing: border-box;
}

/* 更精准的渐变色（匹配设计图质感） */
.after {
  background: linear-gradient(90deg, #EEEBF0, #CE4F51);
}

.before {
  background: linear-gradient(90deg, #DDEEFF, #1677FF);
}

.value-label {
  width: auto !important;
  /* 覆盖外部 width */
  margin-left: 0 !important;
  font-size: 12px;
  color: white;
  /* 白色文字更清晰 */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  /* 增强可读性 */
  white-space: nowrap;
  overflow: hidden;
}

.legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #64748b;
  margin-top: 12px;
  padding-top: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.color-box {
  width: 14px;
  height: 14px;
}

.color-box.after {
  background: linear-gradient(90deg, #EEEBF0, #CE4F51);
}

.color-box.before {
  background: linear-gradient(90deg, #DDEEFF, #1677FF);
}
</style>