<template>
  <div class="product-matrix-page">
    <div class="page-header">
      <h2>🌟 波士顿产品矩阵</h2>
      <div class="header-right">
        <el-select v-model="entityId" size="small" style="width:130px" @change="loadData">
          <el-option :value="1" label="酣客" />
          <el-option :value="2" label="博海" />
        </el-select>
        <el-select v-model="months" size="small" style="width:140px" @change="loadData">
          <el-option :value="3" label="近3月" />
          <el-option :value="6" label="近6月" />
        </el-select>
      </div>
    </div>

    <el-row :gutter="16" v-loading="loading">
      <!-- 散点图 -->
      <el-col :span="16">
        <el-card shadow="never">
          <template #header>四象限散点图（气泡大小=销售额）</template>
          <div ref="chartRef" style="height:440px"></div>
        </el-card>
      </el-col>

      <!-- 图例说明 -->
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>象限说明</template>
          <div v-if="!hasData" class="empty-tip">{{ message || '暂无数据' }}</div>
          <div v-for="q in quadrants" :key="q.key" class="quadrant-item">
            <div class="quadrant-title">
              <span class="quadrant-icon">{{ q.icon }}</span>
              <b>{{ q.label }}</b>
              <el-tag size="small" type="info">{{ q.count }}个</el-tag>
            </div>
            <div class="quadrant-advice">{{ q.advice }}</div>
            <div class="quadrant-products">
              <el-tag v-for="p in q.products.slice(0,4)" :key="p.code" size="small" style="margin:2px">
                {{ p.name }} {{ p.total_sales.toLocaleString() }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 明细表 -->
    <el-row style="margin-top:16px">
      <el-col :span="24">
        <el-card shadow="never">
          <template #header>商品明细（按销售额排序）</template>
          <el-table :data="products" size="small">
            <el-table-column prop="name" label="商品" width="120" />
            <el-table-column prop="code" label="编码" width="100" />
            <el-table-column label="象限" width="110">
              <template #default="{ row }">
                <el-tag :type="quadrantTag(row.quadrant)" size="small">
                  {{ quadrantIcon(row.quadrant) }} {{ quadrantName(row.quadrant) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="total_sales" label="累计销售" width="130" align="right">
              <template #default="{ row }">{{ row.total_sales.toLocaleString() }}</template>
            </el-table-column>
            <el-table-column prop="total_qty" label="数量" width="80" align="right" />
            <el-table-column prop="trend_pct" label="趋势%" width="90" align="right">
              <template #default="{ row }">
                <span :style="{ color: row.trend_pct >= 0 ? '#67C23A' : '#F56C6C' }">{{ row.trend_pct }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="margin_pct" label="毛利率%" width="90" align="right">
              <template #default="{ row }">
                <span :style="{ color: row.margin_pct >= 0 ? '#67C23A' : '#F56C6C' }">{{ row.margin_pct }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import * as echarts from 'echarts'
import api from '@/api'

const entityId = ref<number>(Number(localStorage.getItem('cma_entity_id') || 1))
const months = ref(3)
const loading = ref(false)
const hasData = ref(false)
const message = ref('')
const quadrants = ref<any[]>([])
const products = ref<any[]>([])
const chartRef = ref<HTMLDivElement>()

const quadrantMeta: Record<string, { icon: string; name: string; tag: string; color: string }> = {
  star: { icon: '🌟', name: '明星', tag: 'success', color: '#67C23A' },
  cash_cow: { icon: '🥇', name: '现金牛', tag: 'primary', color: '#409EFF' },
  question_mark: { icon: '❓', name: '问题', tag: 'warning', color: '#E6A23C' },
  dog: { icon: '🐶', name: '瘦狗', tag: 'danger', color: '#909399' },
}

function quadrantName(k: string) { return quadrantMeta[k]?.name || k }
function quadrantIcon(k: string) { return quadrantMeta[k]?.icon || '' }
function quadrantTag(k: string) { return quadrantMeta[k]?.tag || 'info' }

async function loadData() {
  loading.value = true
  try {
    const r = await api.get('/products/matrix', { params: { entity_id: entityId.value, months: months.value } })
    const d = r.data || r
    hasData.value = d.has_data
    message.value = d.message || ''
    quadrants.value = d.quadrants || []
    products.value = d.products || []
    renderChart()
  } catch (e) {
    console.error('加载产品矩阵失败', e)
    hasData.value = false
    message.value = '加载失败'
  } finally {
    loading.value = false
  }
}

function renderChart() {
  if (!chartRef.value) return
  const chart = echarts.init(chartRef.value)
  const points = products.value.map(p => ({
    name: p.name,
    value: [p.trend_pct, p.margin_pct, p.total_sales],
    symbolSize: Math.max(14, Math.min(60, Math.sqrt(p.total_sales) / 4)),
    itemStyle: { color: quadrantMeta[p.quadrant]?.color || '#909399' },
  }))
  chart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        const d = params.data
        return `${d.name}<br/>趋势: ${d.value[0]}%<br/>毛利率: ${d.value[1]}%<br/>累计销售: ${d.value[2].toLocaleString()}`
      }
    },
    grid: { left: 60, right: 40, top: 30, bottom: 40 },
    xAxis: {
      name: '销售趋势(%) →',
      type: 'value',
      axisLine: { lineStyle: { color: '#ccc' } },
    },
    yAxis: {
      name: '毛利率(%) →',
      type: 'value',
      axisLine: { lineStyle: { color: '#ccc' } },
    },
    // 象限分隔线
    markLine: undefined,
    series: [{
      type: 'scatter',
      data: points,
      label: { show: true, formatter: (p: any) => p.name, position: 'top', fontSize: 10 },
    }],
  })
}

onMounted(() => {
  loadData()
  window.addEventListener('resize', () => {
    if (chartRef.value) {
      const chart = echarts.getInstanceByDom(chartRef.value)
      chart?.resize()
    }
  })
})
</script>

<style scoped>
.product-matrix-page { padding: 16px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.page-header h2 { margin: 0; }
.header-right { display: flex; gap: 8px; }
.quadrant-item { margin-bottom: 12px; padding: 10px; border-radius: 8px; background: #f7f8fa; }
.quadrant-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.quadrant-advice { font-size: 12px; color: #666; margin-bottom: 6px; }
.quadrant-products { display: flex; flex-wrap: wrap; }
.empty-tip { color: #999; text-align: center; padding: 20px 0; }
</style>
