<template>
  <div class="chart-container">
    <div v-for="(item, index) in rawData" :key="index" class="chart-card">
      <!-- 研发投入 -->
      <div class="metric-section">
        <div class="metric-header">
          <span class="title">研发投入</span>
          <span class="growth-badge">{{ item.investmentGrowthRate + ' % ' }}</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">{{ item.investmentAfter + item.investmentUnit }}</div>
            </div>
          </div>

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

        </div>
      </div>

      <!-- 研发人员 -->
      <div class="metric-section">
        <div class="metric-header">
          <span class="title">研发人员</span>
          <span class="growth-badge">{{ item.staffGrowthRate + '% ' }}</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">{{ item.staffAfter + item.staffmentUnit }}</div>
            </div>
          </div>
        </div>
        <!-- 制裁前 -->
        <div class="bar-row">
          <div class="year-label">{{ item.previousYear }}</div>
          <div style="width: calc(100% - 66px);">
            <div class="bar before" :style="{ width: getStaffWidth(item.staffBefore) + '%' }">
              <div class="value-label">{{ item.staffBefore + item.staffmentUnit }}</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, onMounted } from 'vue';
import { useRouter } from "vue-router";
import { getStudyList } from "@/api/companyPages/index.js";
const router = useRouter();

// 模拟从 JSON 导入（实际可替换为 import data from './rdData.json'）
const rawData = ref([
  // { 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 handleGetStudyList = async () => {
  try {
    const res = await getStudyList(router.currentRoute._value.params.id);
    console.log("被制裁情况:数据对比", res);
    if (res.code === 200 && res.data) {
      // 创建一个映射对象，用于存储分组后的数据
      const groupedData = {};

      res.data.forEach(item => {
        const key = `${item.year}-${item.previousYear}`;

        if (!groupedData[key]) {
          groupedData[key] = {
            year: item.year,
            previousYear: item.previousYear,
            investmentAfter: 0,
            investmentBefore: 0,
            investmentGrowthRate: 0,
            staffAfter: 0,
            staffBefore: 0,
            staffGrowthRate: 0
          };
        }

        if (item.type === "研发投入") {
          groupedData[key].investmentAfter = item.currentValue;
          groupedData[key].investmentBefore = item.previousValue;
          groupedData[key].investmentGrowthRate = item.growthRate;
          groupedData[key].investmentUnit = item.unit;
        } else if (item.type === "研发人员") {
          groupedData[key].staffAfter = item.currentValue;
          groupedData[key].staffBefore = item.previousValue;
          groupedData[key].staffGrowthRate = item.growthRate;
          groupedData[key].staffmentUnit = item.unit;
        }
      });

      // 将结果转换为数组
      const result = Object.values(groupedData);
      rawData.value = result
      // rawData.value = result
      console.log(rawData.value, 'rawData.valuerawData.value')
    }
  } catch (error) {
    console.error("获取被制裁情况:数据对比error", error);
  }
};


// === 投入相关计算 ===
const maxInvestment = computed(() => {
  return Math.max(...rawData.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(...rawData.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+';
}

onMounted(() => {
  handleGetStudyList()
});
</script>

<style scoped>
.chart-container {
  display: flex;
  /* flex-wrap: wrap; */
  overflow: auto;
  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>