<template>
  <div class="sales-timeline">
    <div class="timeline-container">
      <div class="timeline-line"></div>
      <div 
        v-for="(stage, index) in stages" 
        :key="stage.id"
        class="timeline-stage"
        :class="{ 'active': stage.count > 0, 'selected': selectedStage === stage.name }"
        @click="selectStage(stage.name)"
      >
        <div class="stage-marker">
          <div class="marker-circle">
            <span class="stage-number">{{ index + 1 }}</span>
          </div>
          <div class="marker-line" v-if="index < stages.length - 1"></div>
        </div>
        <div class="stage-content">
          <h3 class="stage-title">{{ stage.displayName || stage.name }}</h3>
          <div class="stage-stats">
            <span class="stage-count">{{ stage.count }}</span>
            <span class="stage-label">位客户</span>
          </div>
          <div class="stage-percentage">{{ getPercentage(stage.count) }}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

// 定义props
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  selectedStage: {
    type: String,
    default: 'all'
  }
});

// 定义emits
const emit = defineEmits(['stage-select']);

// 计算总客户数
const totalCustomers = computed(() => {
  const baseStages = [
    props.data.newData || 120,
    props.data.addedWechat || 85,
    props.data.filledForm || 65,
    props.data.phoneCall || 45,
    props.data.lessons || 32,
    props.data.deposit || 25,
    props.data.followUp || 18,
    props.data.closed || 12
  ];
  return Math.max(...baseStages);
});

// 销售阶段数据
const stages = computed(() => [
  { id: 0, name: 'all', displayName: '全部', count: totalCustomers.value, color: '#f3f4f6' },
  { id: 1, name: '新数据', displayName: '新数据', count: props.data.newData || 120, color: '#e3f2fd' },
  { id: 2, name: '已加微', displayName: '已加微', count: props.data.addedWechat || 85, color: '#bbdefb' },
  { id: 3, name: '已填表单', displayName: '已填表单', count: props.data.filledForm || 65, color: '#90caf9' },
  { id: 4, name: '20分钟通话', displayName: '20分钟通话', count: props.data.phoneCall || 45, color: '#64b5f6' },
  { id: 5, name: '课1-4', displayName: '课1-4', count: props.data.lessons || 32, color: '#42a5f5' },
  { id: 6, name: '付定金', displayName: '付定金', count: props.data.deposit || 25, color: '#2196f3' },
  { id: 7, name: '催单', displayName: '催单', count: props.data.followUp || 18, color: '#1e88e5' },
  { id: 8, name: '成交', displayName: '成交', count: props.data.closed || 12, color: '#1976d2' }
]);

// 计算百分比
const getPercentage = (count) => {
  if (totalCustomers.value === 0) return 0;
  return Math.round((count / totalCustomers.value) * 100);
};

// 选择阶段
const selectStage = (stageName) => {
  emit('stage-select', stageName);
};
</script>

<style lang="scss" scoped>
// Color Palette
$primary: #3b82f6;
$success: #22c55e;
$warning: #f59e0b;
$danger: #ef4444;
$slate-100: #f1f5f9;
$slate-200: #e2e8f0;
$slate-300: #cbd5e1;
$slate-400: #94a3b8;
$slate-500: #64748b;
$slate-600: #475569;
$slate-700: #334155;
$slate-800: #1e293b;
$white: #ffffff;

.sales-timeline {
  padding: 1.5rem;
  background: $white;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  
  @media (max-width: 768px) {
    padding: 1rem;
  }
}

.timeline-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  overflow-x: auto;
  padding: 2rem 1rem 1rem 1rem;
  
  @media (max-width: 768px) {
    padding: 1.5rem 0.5rem 0.5rem 0.5rem;
    -webkit-overflow-scrolling: touch; /* 改善iOS滚动体验 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    &::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }
  }
  
  @media (max-width: 480px) {
    padding: 1rem 0.25rem 0.25rem 0.25rem;
  }
}

.timeline-line {
  position: absolute;
  top: 4rem;
  left: 2rem;
  right: 2rem;
  height: 3px;
  background: linear-gradient(to right, $primary, $success);
  border-radius: 2px;
  // z-index: 1;
  
  @media (max-width: 768px) {
    top: 3rem;
    left: 1.5rem;
    right: 1.5rem;
  }
}

.timeline-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 0.5rem 8px;
  
  @media (max-width: 768px) {
    gap: 0.75rem;
    min-width: 120px; /* 确保每个阶段有最小宽度 */
  }
  
  @media (max-width: 480px) {
    gap: 0.5rem;
    min-width: 100px;
    padding: 0.25rem 4px;
  }
  
  &:hover {
    background-color: rgba(59, 130, 246, 0.05);
    transform: translateY(-2px);
    
    .marker-circle {
      border-color: $primary;
      transform: scale(1.1);
    }
  }
  
  &.selected {
    background-color: rgba(59, 130, 246, 0.1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    
    .marker-circle {
      border-color: $primary;
      background: $primary;
      transform: scale(1.2);
      
      .stage-number {
        color: $white;
      }
    }
  }
  
  &.active {
    .marker-circle {
      background: linear-gradient(135deg, $primary, $success);
      color: $white;
      transform: scale(1.1);
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    }
    
    .stage-content {
      .stage-title {
        color: $slate-800;
        font-weight: 600;
      }
      
      .stage-count {
        color: $primary;
        font-weight: 700;
      }
    }
  }
}

.stage-marker {
  position: relative;
  z-index: 3;
  
  .marker-circle {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      background: $slate-200;
      border: 3px solid $white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 3;
      
      @media (max-width: 768px) {
        width: 3rem;
        height: 3rem;
      }
    
    .stage-number {
      font-size: 1.125rem;
      font-weight: 700;
      color: $slate-600;
      
      @media (max-width: 768px) {
        font-size: 1rem;
      }
    }
  }
}

.stage-content {
  text-align: center;
  width: 100%;
  
  .stage-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: $slate-700;
    margin: 0 0 0.75rem 0;
    
    @media (max-width: 768px) {
      font-size: 1.125rem;
    }
  }
  
  .stage-stats {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    
    .stage-count {
      font-size: 2rem;
      font-weight: 700;
      color: $slate-600;
      line-height: 1;
      
      @media (max-width: 768px) {
        font-size: 1.75rem;
      }
    }
    
    .stage-label {
      font-size: 0.875rem;
      color: $slate-500;
      font-weight: 500;
    }
  }
  
  .stage-percentage {
    font-size: 0.875rem;
    color: $slate-400;
    font-weight: 500;
    background: $slate-100;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    display: inline-block;
  }
}




</style>