<template>
  <div class="pna-container">
    <!-- Header -->
    <div class="pna-header">
      <div class="pna-header-left">
        <svg class="pna-header-icon" width="8" height="20" viewBox="0 0 8 20" fill="none">
          <rect width="8" height="20" rx="2" fill="rgba(5,95,194,1)" />
        </svg>
        <span class="pna-header-title">潜在提案主题分析</span>
      </div>
      <div class="pna-header-actions">
        <!-- 下载图标 (9_1305): 竖线 + 向下箭头 + 底座 -->
        <svg class="pna-action-icon" width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect x="13" y="7" width="2" height="6" rx="0.5" fill="rgba(132,136,142,1)" />
          <path d="M10 13l4 4 4-4" stroke="rgba(132,136,142,1)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
          <path d="M7 19h14" stroke="rgba(132,136,142,1)" stroke-width="1.5" stroke-linecap="round" />
        </svg>
        <!-- 收藏/星标图标 (9_1303): 五角星 -->
        <svg class="pna-action-icon" width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path d="M14 6l2.47 5.01L22 11.76l-4 3.9.94 5.5L14 18.51l-4.94 2.65.94-5.5-4-3.9 5.53-.75L14 6z" stroke="rgba(132,136,142,1)" stroke-width="1.5" stroke-linejoin="round" fill="none" />
        </svg>
      </div>
    </div>

    <!-- ECharts word cloud -->
    <div ref="chartRef" class="pna-cloud"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

const props = defineProps({
  keywords: { type: Array, default: () => [] },
})

const chartRef = ref(null)
let chartInstance = null

// 设计稿色板
const COLOR_MAP = {
  red: 'rgba(206, 79, 81, 1)',
  cyan: 'rgba(19, 168, 168, 1)',
  gold: 'rgba(250, 173, 20, 1)',
  blue: 'rgba(22, 119, 255, 1)',
  volcano: 'rgba(255, 122, 69, 1)',
}

function buildOption(data) {
  const seriesData = data.map((item) => ({
    name: item.label,
    value: item.value || item.size || 18,
    textStyle: {
      color: COLOR_MAP[item.color] || COLOR_MAP.blue,
    },
  }))

  return {
    series: [
      {
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '90%',
        height: '90%',
        sizeRange: [12, 28],
        rotationRange: [-45, 45],
        rotationStep: 15,
        gridSize: 8,
        drawOutOfBound: false,
        layoutAnimation: true,
        textStyle: {
          fontFamily: 'Microsoft YaHei, Source Han Sans CN, Noto Sans SC, sans-serif',
          fontWeight: 400,
        },
        emphasis: {
          textStyle: {
            fontWeight: 700,
          },
        },
        data: seriesData,
      },
    ],
  }
}

function initChart() {
  if (!chartRef.value) return
  chartInstance = echarts.init(chartRef.value)
  if (props.keywords.length > 0) {
    chartInstance.setOption(buildOption(props.keywords))
  }
}

function handleResize() {
  chartInstance?.resize()
}

watch(
  () => props.keywords,
  (val) => {
    if (chartInstance && val.length > 0) {
      chartInstance.setOption(buildOption(val))
    }
  },
  { deep: true }
)

onMounted(() => {
  nextTick(() => {
    initChart()
    window.addEventListener('resize', handleResize)
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  chartInstance?.dispose()
  chartInstance = null
})
</script>

<style scoped>
.pna-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(234, 236, 238, 1);
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  overflow: hidden;
}

.pna-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  flex-shrink: 0;
}
.pna-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pna-header-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: rgba(5, 95, 194, 1);
  font-family: 'Source Han Sans CN', 'Noto Sans SC', sans-serif;
}
.pna-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pna-action-icon {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.pna-action-icon:hover {
  opacity: 1;
}

.pna-cloud {
  flex: 1;
  min-height: 400px;
}
</style>
