<template>
  <div class="group-ranking">
    <div class="ranking-header">
      <h2>各阶段转化率 vs. 公司平均</h2>
      <div class="legend">
        <div class="legend-item">
          <div class="legend-color team"></div>
          <span>本团队</span>
        </div>
        <div class="legend-item">
          <div class="legend-color company"></div>
          <span>公司平均</span>
        </div>
      </div>
    </div>
    
    <div class="chart-container">
      <div class="chart">
        <div class="chart-main">
          <div class="y-axis">
            <div class="y-label" v-for="label in yAxisLabels" :key="label">{{ label }}</div>
          </div>
          
          <div class="chart-content">
            <div class="chart-item" v-for="stage in conversionStages" :key="stage.name">
              <div class="bars">
                <div class="bar-group">
                  <div class="bar-container">
                    <div class="bar-value team-value">{{ stage.teamRate }}%</div>
                    <div 
                      class="bar team-bar" 
                      :style="{ height: (stage.teamRate * 2.4) + 'px' }"
                      :title="`本团队: ${stage.teamRate}%（${stage.teamCount}人）`"
                    ></div>
                  </div>
                  <div class="bar-container">
                    <div class="bar-value company-value">{{ stage.companyRate }}%</div>
                    <div 
                      class="bar company-bar" 
                      :style="{ height: (stage.companyRate * 2.4) + 'px' }"
                      :title="`公司平均: ${stage.companyRate}%（${stage.companyCount}人）`"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- X轴刻度 -->
        <div class="x-axis">
          <div class="x-label" v-for="stage in conversionStages" :key="stage.name">
            {{ stage.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

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

// 转化率数据（含人数）
const conversionStages = computed(() => {
  // 兼容新的数据结构：
  // {
  //   conversion_rate_and_count: {
  //     center_conversion_rate: { "加微": "20.23%", ... },
  //     center_conversion_count: { "加微": 53, ... }
  //   },
  //   company_conversion_rate_and_count: {
  //     company_conversion_rate: { "加微": "8.44%", ... },
  //     company_conversion_count: { "加微": 558, ... }
  //   }
  // }
  if (
    props.conversionData &&
    props.conversionData.conversion_rate_and_count &&
    props.conversionData.company_conversion_rate_and_count
  ) {
    const user = props.conversionData.conversion_rate_and_count
    const company = props.conversionData.company_conversion_rate_and_count

    const userRates = user.center_conversion_rate || {}
    const userCounts = user.center_conversion_count || {}
    const companyRates = company.company_conversion_rate || {}
    const companyCounts = company.company_conversion_count || {}

    const toNumber = (v) => {
      if (v === null || v === undefined) return 0
      if (typeof v === 'number') return v
      // v 可能是 "20.23%" 这样的字符串
      const n = parseFloat(String(v))
      return isNaN(n) ? 0 : n
    }

    const stages = ['加微', '填表', '通话', '到课', '付定金', '付费']
    return stages.map(name => ({
      name,
      teamRate: toNumber(userRates[name]),
      teamCount: toNumber(userCounts[name]),
      companyRate: toNumber(companyRates[name]),
      companyCount: toNumber(companyCounts[name])
    }))
  }
  
  // 默认数据（名称对齐新接口）
  return [
    { name: '加微', teamRate: 80, companyRate: 85, teamCount: 0, companyCount: 0 },
    { name: '填表', teamRate: 90, companyRate: 92, teamCount: 0, companyCount: 0 },
    { name: '通话', teamRate: 95, companyRate: 95, teamCount: 0, companyCount: 0 },
    { name: '到课', teamRate: 60, companyRate: 65, teamCount: 0, companyCount: 0 },
    { name: '付定金', teamRate: 18, companyRate: 20, teamCount: 0, companyCount: 0 },
    { name: '付费', teamRate: 15, companyRate: 20, teamCount: 0, companyCount: 0 }
  ]
})

// Y轴标签
const yAxisLabels = ref(['100%', '80%', '60%', '40%', '20%', '0%'])
</script>

<style lang="scss" scoped>
.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;
  
  .ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    
    h2 {
      font-size: 1.2rem;
      font-weight: 600;
      color: #1e293b;
      margin: 0;
    }
    
    .legend {
      display: flex;
      gap: 1rem;
      
      .legend-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: #64748b;
        
        .legend-color {
          width: 16px;
          height: 16px;
          border-radius: 4px;
          
          &.team {
            background: #3b82f6;
          }
          
          &.company {
            background: #94a3b8;
          }
        }
      }
    }
  }
  
  .chart-container {
    flex: 1;
    
    .chart {
      display: flex;
      flex-direction: column;
      height: 320px;
      
      .chart-main {
        display: flex;
        flex: 1;
      }
      
      .y-axis {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 40px;
        padding-right: 10px;
        
        .y-label {
          font-size: 0.8rem;
          color: #64748b;
          text-align: right;
        }
      }
      
      .chart-content {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        border-left: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        padding: 0 1rem 0 1rem;
        position: relative;
        

        
        .chart-item {
           display: flex;
           flex-direction: column;
           align-items: center;
           flex: 1;
          
           .bars {
             height: 240px;
             display: flex;
             align-items: flex-end;
             justify-content: center;
              
              .bar-group {
                display: flex;
                gap: 1px;
                align-items: flex-end;
              
                .bar-container {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                
                  .bar-value {
                    font-size: 0.75rem;
                    font-weight: 600;
                    margin-bottom: 4px;
                    min-height: 16px;
                    
                    &.team-value {
                      color: #3b82f6;
                    }
                    
                    &.company-value {
                      color: #64748b;
                    }
                  }
                  
                  .bar {
                    width: 35px;
                    min-height: 2px;
                    border-radius: 2px 2px 0 0;
                    transition: all 0.3s ease;
                    cursor: pointer;
                    
                    &:hover {
                      opacity: 0.8;
                    }
                    
                    &.team-bar {
                      background: #3b82f6;
                    }
                    
                    &.company-bar {
                      background: #94a3b8;
                    }
                }
              }
            }
          }
        }
      }
        
      .x-axis {
        display: flex;
        padding: 0.5rem 0 0 41px;
        
        .x-label {
          flex: 1;
          text-align: center;
          font-size: 0.9rem;
          color: #374151;
          font-weight: 500;
        }
      }
    }
  }
  

}

// 移动端适配
@media (max-width: 768px) {
  .group-ranking {
    .ranking-header {
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
      
      h2 {
        font-size: 1.1rem;
      }
    }
    
    .chart-container {
      .chart {
        height: 270px;
        
        .chart-main .chart-content {
          .chart-item {
            .bars {
              height: 180px;
              
              .bar-group {
                gap: 6px;
                
                .bar-container {
                  .bar-value {
                    font-size: 0.7rem;
                  }
                  
                  .bar {
                    width: 16px;
                  }
                }
              }
            }
          }
        }
        
        .x-axis {
          padding: 0.5rem 0 0 31px;
          
          .x-label {
            font-size: 0.8rem;
          }
        }
      }
    }
  }
}
</style>