<template>
  <div class="group-ranking">
    <!-- 销售漏斗 -->
    <div class="chart-container">
      <div class="chart-header">
        <h3>销售漏斗</h3>
      </div>
      <div class="chart-content">
        <canvas ref="personalFunnelChartCanvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import Chart from 'chart.js/auto'

const props = defineProps({
  selectedGroup: {
    type: Object,
    default: null
  }
})

// Chart.js 实例
const chartInstances = {}

// DOM 元素引用
const personalFunnelChartCanvas = ref(null)

// Chart.js 数据
const funnelData = reactive({
  labels: ['线索', '加微', '到课', '定金', '成交'],
  data: [120, 90, 45, 18, 10],
})

// Chart.js: 创建或更新图表
const createOrUpdateChart = (chartId, canvasRef, config) => {
  if (chartInstances[chartId]) {
    chartInstances[chartId].destroy()
  }
  if (canvasRef.value) {
    const ctx = canvasRef.value.getContext('2d')
    chartInstances[chartId] = new Chart(ctx, config)
  }
}

// Chart.js: 渲染销售漏斗图
const renderPersonalFunnelChart = () => {
  const config = {
    type: 'bar',
    data: {
      labels: funnelData.labels,
      datasets: [{
        label: '数量', data: funnelData.data,
        backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(245, 158, 11, 0.8)', 'rgba(239, 68, 68, 0.8)'],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true, maintainAspectRatio: false, indexAxis: 'y',
      plugins: { legend: { display: false } },
      scales: {
        y: { grid: { display: false }, ticks: { color: '#64748b', font: { size: 11 } } },
        x: { beginAtZero: true, grid: { color: 'rgba(148, 163, 184, 0.2)' }, ticks: { color: '#64748b', font: { size: 11 } } }
      }
    }
  }
  createOrUpdateChart('personalFunnel', personalFunnelChartCanvas, config)
}

// 生命周期钩子
onMounted(() => {
  renderPersonalFunnelChart()
})

onBeforeUnmount(() => {
  Object.values(chartInstances).forEach(chart => chart.destroy())
})
</script>

<style lang="scss" scoped>
// 颜色和变量定义
$slate-50: #f8fafc;
$slate-100: #f1f5f9;
$slate-200: #e2e8f0;
$slate-700: #334155;
$slate-800: #1e293b;
$slate-900: #303133;
$gray-400: #909399;
$gray-600: #606266;
$blue: #409eff;
$green: #67c23a;
$orange: #e6a23c;
$red: #f56c6c;
$white: #ffffff;

.group-ranking {
  background: $white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: 23rem;
  display: flex;
  flex-direction: column;
}

.chart-container {
  background: $white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px 16px;
  border-bottom: 1px solid #ebeef5;
  h3 { 
    margin: 0; 
    color: $slate-900; 
    font-size: 18px; 
    font-weight: 600; 
  }
}

.chart-content {
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  flex-grow: 1;
  position: relative;
  canvas {
    max-height: 280px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .group-ranking {
    padding: 1rem;
    height: auto;
    min-height: 20rem;
  }
  
  .chart-container {
    min-height: 300px;
  }
  
  .chart-header {
    padding: 16px 16px 12px;
    h3 {
      font-size: 16px;
    }
  }
  
  .chart-content {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .group-ranking {
    padding: 0.75rem;
    height: auto;
    min-height: 18rem;
  }
  
  .chart-container {
    min-height: 250px;
  }
  
  .chart-header {
    padding: 12px;
    h3 {
      font-size: 14px;
    }
  }
  
  .chart-content {
    padding: 12px;
  }
}
</style>