<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" />
                <!-- 8px圆圈节点 -->
                <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>
        <div class="chart-container">
          <div class="semi-donut-chart">
            <div class="donut-wrapper">
              <svg viewBox="0 0 200 140" class="donut-svg">
                <!-- 半环形：蓝色57% + 橙色25% + 浅蓝绿18% -->
                <path :d="getDonutPath(0, 57)" fill="rgba(105, 177, 255, 1)" />
                <path :d="getDonutPath(57, 82)" fill="rgba(255, 192, 105, 1)" />
                <path :d="getDonutPath(82, 100)" fill="rgba(135, 232, 222, 1)" />
              </svg>
            </div>
            <div class="donut-legend">
              <div class="legend-item">
                <span class="legend-dot" style="background: rgba(105, 177, 255, 1);"></span>
                <span class="legend-label">项目合作</span>
                <span class="legend-value">57%</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot" style="background: rgba(255, 192, 105, 1);"></span>
                <span class="legend-label">论文合作</span>
                <span class="legend-value">25%</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot" style="background: rgba(135, 232, 222, 1);"></span>
                <span class="legend-label">专利合作</span>
                <span class="legend-value">18%</span>
              </div>
            </div>
          </div>
        </div>
        <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">
      <div class="cases-timeline">
        <!-- 日期行 -->
        <div class="timeline-dates">
          <span v-for="(item, index) in visibleCases" :key="index" class="date-label">{{ item.date }}</span>
        </div>

        <!-- 时间轴：彩虹渐变线 + 绿色圆形节点 -->
        <div class="timeline-track">
          <div class="timeline-line"></div>
          <div class="timeline-nodes">
            <div v-for="(item, index) in visibleCases" :key="index" class="node-wrapper">
              <div class="node-dot"></div>
            </div>
          </div>
        </div>

        <!-- 卡片行 -->
        <div class="cases-carousel">
          <button class="carousel-btn prev" @click="prevCases">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M15 18L9 12L15 6" stroke="#055FC2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="cases-cards">
            <div v-for="(item, index) in visibleCases" :key="index" class="case-card">
              <div class="case-tag" :class="item.tagType">{{ item.tag }}</div>
              <div class="case-partner">合作主体：{{ item.partner }}</div>
              <div class="case-title">{{ item.title }}</div>
            </div>
          </div>
          <button class="carousel-btn next" @click="nextCases">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M9 18L15 12L9 6" stroke="#055FC2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
    </AnalysisBox>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
import ChartSummary from '../components/ChartSummary.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 casesData = ref([
  { date: '2025年3月12日', tag: '项目合作', tagType: 'project', partner: '清华大学', title: '"气候变化、碳中和与能源智联"(CNEST)研讨会' },
  { date: '2025年5月7日', tag: '专利合作', tagType: 'patent', partner: '北京航空航天大学', title: '北航－哈佛 Wood 实验室联合研制鲤鱼仿生吸盘机器人' },
  { date: '2025年6月23日', tag: '论��合作', tagType: 'paper', partner: '山西省古建筑与彩塑壁画保护研究院', title: '山西古建院－哈佛中国艺术实验室合作' },
  { date: '2025年10月19日', tag: '项目合作', tagType: 'project', partner: '复旦大学、四川大学', title: '哈佛中国健康伙伴计划多机构合作' }
])

const caseStartIndex = ref(0)
const activeCaseIndex = ref(0)

const visibleCases = computed(() => {
  return casesData.value.slice(caseStartIndex.value, caseStartIndex.value + 4)
})

const prevCases = () => {
  if (caseStartIndex.value > 0) {
    caseStartIndex.value--
  }
}

const nextCases = () => {
  if (caseStartIndex.value < casesData.value.length - 4) {
    caseStartIndex.value++
  }
}

// 面积图路径计算
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))

// 半环形饼图路径计算
const getDonutPath = (startPercent, endPercent) => {
  const cx = 100
  const cy = 100
  const outerR = 80
  const innerR = 50
  
  const startAngle = Math.PI * (1 + startPercent / 100)
  const endAngle = Math.PI * (1 + endPercent / 100)
  
  const x1 = cx + outerR * Math.cos(startAngle)
  const y1 = cy + outerR * Math.sin(startAngle)
  const x2 = cx + outerR * Math.cos(endAngle)
  const y2 = cy + outerR * Math.sin(endAngle)
  const x3 = cx + innerR * Math.cos(endAngle)
  const y3 = cy + innerR * Math.sin(endAngle)
  const x4 = cx + innerR * Math.cos(startAngle)
  const y4 = cy + innerR * Math.sin(startAngle)
  
  const largeArc = (endPercent - startPercent) > 50 ? 1 : 0
  
  return `M${x1},${y1} A${outerR},${outerR} 0 ${largeArc} 1 ${x2},${y2} L${x3},${y3} A${innerR},${innerR} 0 ${largeArc} 0 ${x4},${y4} Z`
}
</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;
  }
}

.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;
    }
  }
}

// 半环形饼图样式
.semi-donut-chart {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  padding-top: 40px;

  .donut-wrapper {
    width: 240px;
    height: 160px;

    .donut-svg {
      width: 100%;
      height: 100%;
    }
  }

  .donut-legend {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;

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

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

      .legend-label {
        font-size: 16px;
        color: #3B414B;
        width: 60px;
      }

      .legend-value {
        font-size: 16px;
        font-weight: 700;
        color: #3B414B;
        margin-left: 16px;
      }
    }
  }
}

// 堆叠柱状图样式
.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;
  }
}

.cases-timeline {
  padding: 24px;

  // 日期行
  .timeline-dates {
    display: flex;
    justify-content: space-around;
    padding: 0 56px;
    margin-bottom: 8px;

    .date-label {
      font-size: 14px;
      font-weight: 700;
      color: #055FC2;
      text-align: center;
      flex: 1;
    }
  }

  // 时间轴行
  .timeline-track {
    position: relative;
    height: 24px;
    margin-bottom: 16px;

    .timeline-line {
      position: absolute;
      top: 50%;
      left: 56px;
      right: 56px;
      height: 0;
      // 单色虚线
      border-top: 4px dashed #055FC2;
      transform: translateY(-50%);
    }

    .timeline-nodes {
      display: flex;
      justify-content: space-around;
      padding: 0 56px;
      position: relative;
      z-index: 1;
      height: 100%;
      align-items: center;

      .node-wrapper {
        flex: 1;
        display: flex;
        justify-content: center;

        .node-dot {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #22C55E;
          border: 3px solid #FFFFFF;
          box-shadow: 0 0 0 2px #22C55E;
        }
      }
    }
  }

  // 卡片行
  .cases-carousel {
    display: flex;
    align-items: stretch;
    gap: 8px;

    .carousel-btn {
      width: 32px;
      height: auto;
      min-height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      color: #055FC2;

      &:hover {
        background: #F6FAFF;
        border-radius: 4px;
      }
    }

    .cases-cards {
      flex: 1;
      display: flex;
      gap: 16px;

      .case-card {
        width: 273px;
        min-height: 210px;
        flex-shrink: 0;
        padding: 16px;
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .case-tag {
          display: inline-block;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          width: fit-content;

          &.project {
            background: #FFF1F0;
            color: #F5222D;
            border: 1px solid #FFA39E;
          }

          &.patent {
            background: #FFFBE6;
            color: #FAAD14;
            border: 1px solid #FFE58F;
          }

          &.paper {
            background: #F0F5FF;
            color: #2F54EB;
            border: 1px solid #ADC6FF;
          }
        }

        .case-partner {
          font-size: 14px;
          color: #5F656C;
        }

        .case-title {
          font-size: 16px;
          font-weight: 700;
          color: #3B414B;
          line-height: 24px;
        }
      }
    }
  }
}
</style>
