<template>
  <div class="chart-card">
    <div class="chart-card-header">
      <span class="chart-card-title">产品销售额排名分析</span>
    </div>
    <div class="rank-chart-container" ref="chartRef"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null

const initRankChart = () => {
  const el = chartRef.value
  if (!el) return

  chartInstance = echarts.init(el)

  const salesData = [980, 1250, 1420, 1580, 1650, 1820, 2150, 2580]
  const totalSales = salesData.reduce((sum, val) => sum + val, 0)
  const percentData = salesData.map(val => ((val / totalSales) * 100).toFixed(1))

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      backgroundColor: 'rgba(145, 200, 255, 0.9)',
      borderColor: '#409EFF',
      borderWidth: 1,
      textStyle: { color: '#0a3b70' },
      padding: [8, 12],
      borderRadius: 6,
      formatter: function(params) {
        const index = params[0].dataIndex
        return `产品：${params[0].name}<br/>销售额：${params[0].value}万元<br/>占比：${percentData[index]}%`
      }
    },
    legend: {
      show: false
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '10%',
      top: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLabel: {
          fontSize: 11,
          color: '#b4c7e7'
        },
        axisLine: { lineStyle: { color: '#1a508b' } },
        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
      }
    ],
    yAxis: [
      {
        type: 'category',
        data: ['产品H', '产品G', '产品F', '产品E', '产品D', '产品C', '产品B', '产品A'],
        axisLabel: {
          fontSize: 11,
          color: '#b4c7e7'
        },
        axisLine: { lineStyle: { color: '#1a508b' } },
        inverse: false // 核心修改：关闭反转，第一名显示在底部
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        barWidth: '15%',
        data: salesData,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#409EFF' },
            { offset: 1, color: '#1890FF' }
          ])
        },
        label: {
          show: true,
          position: 'right',
          fontSize: 10,
          color: '#e0e6ff',
          formatter: function(params) {
            const index = params.dataIndex
            return `${params.value}万元 (${percentData[index]}%)`
          }
        }
      }
    ]
  }

  chartInstance.setOption(option)
  window.addEventListener('resize', () => chartInstance.resize())
}

onMounted(() => initRankChart())
</script>

<style scoped>
.chart-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-card-header {
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  background-color: rgba(26, 80, 139, 0.5);
  border-bottom: 1px solid #1a508b;
  display: flex;
  align-items: center;
}

.chart-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  letter-spacing: 0.5px;
}

.rank-chart-container {
  flex: 1;
  width: 100%;
  height: calc(100% - 40px);
  margin: 0;
  padding: 0;
}

:deep(.echarts-tooltip) {
  background-color: rgba(145, 200, 255, 0.9) !important;
  border-color: #409EFF !important;
  color: #0a3b70 !important;
  border-radius: 6px !important;
}
</style>