<template>
  <div class="cooperation-content">
    <Teleport to="body">
      <div v-if="tooltipVisible" class="chart-tooltip"
        :style="{ left: tooltipPosition.x + 10 + 'px', top: tooltipPosition.y - 30 + 'px' }">
        <span class="tooltip-year">{{ tooltipContent.year }}年</span>
        <span class="tooltip-value">{{ tooltipContent.value }}</span>
      </div>
    </Teleport>

    <div class="chart-row">
      <AnalysisBox title="与中国合作数量变化" width="100%" height="500px" :show-all-btn="false" class="chart-box">
        <div class="chart-container">
          <div class="area-chart">
            <div class="y-axis">
              <span>400</span>
              <span>300</span>
              <span>200</span>
              <span>100</span>
              <span>0</span>
            </div>
            <div class="chart-area">
              <svg class="area-svg" viewBox="0 0 700 240" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="coopAreaGradient1" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="rgba(255, 149, 77, 0.6)" />
                    <stop offset="100%" stop-color="rgba(255, 149, 77, 0.1)" />
                  </linearGradient>
                </defs>
                <path :d="quantityAreaPath" fill="url(#coopAreaGradient1)" />
                <path :d="quantityLinePath" fill="none" stroke="#FF954D" stroke-width="2" />
                <g class="data-points">
                  <circle v-for="(point, idx) in quantityPoints" :key="idx"
                    :cx="point.x" :cy="point.y" r="4"
                    fill="#FFFFFF" stroke="#FF954D" stroke-width="2"
                    class="data-point"
                    @mouseenter="showTooltip($event, chartYears[idx], quantityData[idx])"
                    @mouseleave="hideTooltip" />
                </g>
              </svg>
              <div class="x-labels">
                <span v-for="year in chartYears" :key="year">{{ year }}</span>
              </div>
            </div>
          </div>
        </div>
        <ChartSummary text="近十年哈佛大学与中国合作项目数量呈'前期稳步增多、2020年后敏感领域收缩、非敏感领域小幅复苏'的趋势。" />
      </AnalysisBox>
 
      <AnalysisBox title="与中国合作类型变化" width="100%" height="500px" :show-all-btn="false" class="chart-box">
        <template #header-btn>
          <el-select v-model="selectedYear" size="small" style="width: 80px;">
            <el-option v-for="year in yearOptions" :key="year" :label="year" :value="year" />
          </el-select>
        </template>
        <SemiDonutChart :data="{
          names: ['项目合作', '论文合作', '专利合作'],
          values: [57, 25, 18]
        }" />
        <ChartSummary text="哈佛大学与中国的合作当中，大部分是以项目合作为主" />
      </AnalysisBox>
    </div>

    <div class="chart-row">
    <AnalysisBox title="与中国合作领域变化" width="100%" height="500px" :show-all-btn="false" class="chart-box">
        <div class="chart-container">
          <div class="stacked-bar-chart">
            <!-- 图例 -->
            <div class="chart-legend">
              <div v-for="(item, index) in fieldLegend" :key="index" class="legend-item">
                <span class="legend-dot" :style="{ background: item.color }"></span>
                <span class="legend-label">{{ item.name }}</span>
              </div>
            </div>
            <div class="chart-body">
              <div class="y-axis">
                <span>400</span>
                <span>300</span>
                <span>200</span>
                <span>100</span>
                <span>0</span>
              </div>
              <div class="bars-area">
                <div class="bars">
                  <div v-for="(item, index) in fieldData" :key="index" class="bar-stack">
                    <div v-for="(segment, sIdx) in item.segments" :key="sIdx"
                      class="bar-segment"
                      :style="{ height: `${segment.value / 400 * 100}%`, background: segment.color }">
                    </div>
                    <span class="bar-label">{{ item.year }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <ChartSummary text="近十年哈佛大学与中国合作项目中，各领域分布均匀，其中以人工智能与能源领域为主。" />
      </AnalysisBox>

    <AnalysisBox title="与中国合作经费变化" width="100%" height="500px" :show-all-btn="false" class="chart-box">
        <div class="chart-container">
          <div class="area-chart">
            <div class="y-axis">
              <span>400</span>
              <span>300</span>
              <span>200</span>
              <span>100</span>
              <span>0</span>
            </div>
            <div class="chart-area">
              <svg class="area-svg" viewBox="0 0 700 240" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="coopAreaGradient2" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="rgba(34, 197, 94, 0.6)" />
                    <stop offset="100%" stop-color="rgba(34, 197, 94, 0.1)" />
                  </linearGradient>
                </defs>
                <path :d="fundingAreaPath" fill="url(#coopAreaGradient2)" />
                <path :d="fundingLinePath" fill="none" stroke="#22C55E" stroke-width="2" />
                <!-- 8px圆圈节点 -->
                <g class="data-points">
                  <circle v-for="(point, idx) in fundingPoints" :key="idx"
                    :cx="point.x" :cy="point.y" r="4"
                    fill="#FFFFFF" stroke="#22C55E" stroke-width="2"
                    class="data-point"
                    @mouseenter="showTooltip($event, chartYears[idx], fundingData[idx])"
                    @mouseleave="hideTooltip" />
                </g>
              </svg>
              <div class="x-labels">
                <span v-for="year in chartYears" :key="year">{{ year }}</span>
              </div>
            </div>
          </div>
        </div>
        <ChartSummary text="近十年哈佛大学与中国合作项目数量呈'前期稳步增多、2020年后敏感领域收缩、非敏感领域小幅复苏'的趋势。" />
      </AnalysisBox>
    </div>

    <AnalysisBox title="与中国合作事例" width="100%" height="auto" :show-all-btn="false" class="cases-box">
      <CooperationCases />
    </AnalysisBox>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
import ChartSummary from '../components/ChartSummary.vue'
import SemiDonutChart from '../components/SemiDonutChart.vue'
import CooperationCases from '../components/CooperationCases.vue'

// Tooltip 状态
const tooltipVisible = ref(false)
const tooltipContent = ref({ year: '', value: 0 })
const tooltipPosition = ref({ x: 0, y: 0 })

const showTooltip = (event, year, value) => {
  tooltipContent.value = { year, value }
  tooltipPosition.value = { x: event.clientX, y: event.clientY }
  tooltipVisible.value = true
}

const hideTooltip = () => {
  tooltipVisible.value = false
}

// 年份选择
const selectedYear = ref('2024')
const yearOptions = ['2024', '2023', '2022', '2021', '2020']

// 图表年份
const chartYears = ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025']

// 合作数量数据
const quantityData = [150, 200, 280, 320, 300, 180, 120, 100, 80, 60]

// 经费数据
const fundingData = [100, 120, 150, 180, 220, 280, 320, 280, 200, 150]

// 领域图例
// 堆叠柱状图图例颜色（与 HTML 设计稿一致）
const fieldLegend = [
  { name: '集成电路', color: 'rgba(105, 177, 255, 1)' },
  { name: '生物科技', color: 'rgba(255, 192, 105, 1)' },
  { name: '人工智能', color: 'rgba(135, 232, 222, 1)' },
  { name: '通信网络', color: 'rgba(133, 165, 255, 1)' },
  { name: '量子科技', color: 'rgba(255, 120, 117, 1)' },
  { name: '能源领域', color: 'rgba(179, 127, 235, 1)' }
]

// 堆叠柱状图数据 - 固定数据（颜色与图例一致）
const C1 = 'rgba(105, 177, 255, 1)'
const C2 = 'rgba(255, 192, 105, 1)'
const C3 = 'rgba(135, 232, 222, 1)'
const C4 = 'rgba(133, 165, 255, 1)'
const C5 = 'rgba(255, 120, 117, 1)'
const C6 = 'rgba(179, 127, 235, 1)'

const fieldData = [
  { year: '2016', segments: [
    { value: 21, color: C1 }, { value: 18, color: C2 }, { value: 22, color: C3 },
    { value: 16, color: C4 }, { value: 22, color: C5 }, { value: 22, color: C6 }
  ]},
  { year: '2017', segments: [
    { value: 30, color: C1 }, { value: 18, color: C2 }, { value: 28, color: C3 },
    { value: 16, color: C4 }, { value: 26, color: C5 }, { value: 22, color: C6 }
  ]},
  { year: '2018', segments: [
    { value: 33, color: C1 }, { value: 28, color: C2 }, { value: 22, color: C3 },
    { value: 16, color: C4 }, { value: 28, color: C5 }, { value: 22, color: C6 }
  ]},
  { year: '2019', segments: [
    { value: 41, color: C1 }, { value: 26, color: C2 }, { value: 28, color: C3 },
    { value: 28, color: C4 }, { value: 22, color: C5 }, { value: 28, color: C6 }
  ]},
  { year: '2020', segments: [
    { value: 29, color: C1 }, { value: 29, color: C2 }, { value: 32, color: C3 },
    { value: 44, color: C4 }, { value: 38, color: C5 }, { value: 36, color: C6 }
  ]},
  { year: '2021', segments: [
    { value: 41, color: C1 }, { value: 29, color: C2 }, { value: 22, color: C3 },
    { value: 27, color: C4 }, { value: 29, color: C5 }, { value: 22, color: C6 }
  ]},
  { year: '2022', segments: [
    { value: 39, color: C1 }, { value: 18, color: C2 }, { value: 29, color: C3 },
    { value: 25, color: C4 }, { value: 27, color: C5 }, { value: 22, color: C6 }
  ]},
  { year: '2023', segments: [
    { value: 31, color: C1 }, { value: 18, color: C2 }, { value: 22, color: C3 },
    { value: 22, color: C4 }, { value: 22, color: C5 }, { value: 22, color: C6 }
  ]},
  { year: '2024', segments: [
    { value: 21, color: C1 }, { value: 18, color: C2 }, { value: 22, color: C3 },
    { value: 16, color: C4 }, { value: 22, color: C5 }, { value: 22, color: C6 }
  ]},
  { year: '2025', segments: [
    { value: 21, color: C1 }, { value: 10, color: C2 }, { value: 22, color: C3 },
    { value: 16, color: C4 }, { value: 13, color: C5 }, { value: 10, color: C6 }
  ]}
]

// 面积图路径计算
const createAreaPath = (data, maxValue = 400) => {
  const width = 700
  const height = 240
  const step = width / (data.length - 1)
  
  let linePath = ''
  let areaPath = ''
  
  data.forEach((value, index) => {
    const x = index * step
    const y = height - (value / maxValue) * height
    
    if (index === 0) {
      linePath = `M${x},${y}`
      areaPath = `M${x},${height} L${x},${y}`
    } else {
      linePath += ` L${x},${y}`
      areaPath += ` L${x},${y}`
    }
  })
  
  areaPath += ` L${width},${height} Z`
  
  return { linePath, areaPath }
}

const { linePath: quantityLinePath, areaPath: quantityAreaPath } = createAreaPath(quantityData)
const { linePath: fundingLinePath, areaPath: fundingAreaPath } = createAreaPath(fundingData)

// 计算节点坐标
const getDataPoints = (data, maxValue = 400) => {
  const width = 700
  const height = 240
  const step = width / (data.length - 1)
  return data.map((value, index) => ({
    x: index * step,
    y: height - (value / maxValue) * height
  }))
}

const quantityPoints = computed(() => getDataPoints(quantityData))
const fundingPoints = computed(() => getDataPoints(fundingData))

</script>

<style lang="scss" scoped>
.cooperation-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-row {
  display: flex;
  gap: 16px;

  .chart-box {
    flex: 1;
    min-width: 0;
    position: relative;
  }
}

.chart-container {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
 
.area-chart {
  flex: 1;
  display: flex;
  gap: 16px;

  .y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    color: #84888E;
    padding: 0 8px 30px 0;
  }

  .chart-area {
    flex: 1;
    display: flex;
    flex-direction: column;

    .area-svg {
      flex: 1;
      width: 100%;
      overflow: visible;

      .data-point {
        cursor: pointer;
        transition: r 0.2s ease;

        &:hover {
          r: 6;
        }
      }
    }

    .x-labels {
      display: flex;
      justify-content: space-between;
      padding-top: 8px;
      font-size: 14px;
      color: #84888E;
    }
  }
}
 
.stacked-bar-chart {
  flex: 1;
  display: flex;
  flex-direction: column;

  .chart-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;

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

      .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .legend-label {
        font-size: 12px;
        color: #5F656C;
      }
    }
  }

  .chart-body {
    flex: 1;
    display: flex;
    gap: 16px;

    .y-axis {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 14px;
      color: #84888E;
      padding: 0 8px 30px 0;
    }

    .bars-area {
      flex: 1;

      .bars {
        height: 240px;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        border-bottom: 1px solid #E5E7EB;

        .bar-stack {
          display: flex;
          flex-direction: column-reverse;  
          align-items: center;
          width: 20px;
          height: 240px;  
          position: relative;

          .bar-segment {
            width: 100%;
            transition: height 0.3s ease;

            &:last-child {
              border-radius: 4px 4px 0 0;
            }
          }

          .bar-label {
            font-size: 14px;
            color: #84888E;
            margin-top: 8px;
            position: absolute;
            bottom: -24px;
          }
        }
      }
    }
  }
}
 
.cases-box {
  :deep(.wrapper-main) {
    overflow: visible;
  }
}
</style>
