<template>
  <div class="senior-manager-dashboard">
    <!-- Main Content -->
    <main class="dashboard-main">
      <!-- Top Section - Center Overview and Action Items -->
      <div class="top-section">
        <!-- Center Performance Overview -->
        <CenterOverview />

        <!-- Action Items (Compact) -->
        <div class="action-items-compact">
        <TeamAlerts style="height: 350px;" />
        </div>
      </div>
              <StatisticalIndicators 
  :customerCommunicationRate="customerCommunicationRate"
  :averageResponseTime="averageResponseTime"
  :timeoutResponseRate="timeoutResponseRate"
  :severeTimeoutRate="severeTimeoutRate"
  :formCompletionRate="formCompletionRate"
/>
      <!-- Bottom Section -->
      <div class="bottom-section">
        <!-- Left Section - Group Performance Ranking -->
        <div class="left-section">
          <GroupRanking 
            :groups="groups"
            :selected-group="selectedGroup"
            @select-group="selectGroup"
          />
        </div>
        <div class="problem-ranking">
          <ProblemRanking />
        </div>
        <!-- Right Section - Group Comparison -->
        <div class="right-section">
          <GroupComparison :groups="groups" @select-group="selectGroup" />
        </div>
      </div>
     <div>

     </div>
    </main>
    <manager />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CenterOverview from '../../senorManger/components/CenterOverview.vue'
import GroupComparison from '../../senorManger/components/GroupComparison.vue'
import GroupRanking from '../../senorManger/components/GroupRanking.vue'
import TeamAlerts from '../../maneger/components/TeamAlerts.vue'
import CustomerDetail from '../../senorManger/components/CustomerDetail.vue'
import ProblemRanking from '../../senorManger/components/ProblemRanking.vue'
import StatisticalIndicators from '../../senorManger/components/StatisticalIndicators.vue'
import manager from '../../senorManger/components/manager.vue'

const customerCommunicationRate = ref(85)
const averageResponseTime = ref(15)
const timeoutResponseRate = ref(5)
const severeTimeoutRate = ref(2)
const formCompletionRate = ref(90)

// 组别数据
const groups = [
  {
    id: 1,
    name: '精英组',
    leader: '李主管',
    memberCount: 8,
    todayPerformance: 156000,
    monthlyTarget: 800000,
    monthlyProgress: 65,
    conversionRate: 6.8,
    avgCallTime: 7.2,
    newClients: 28,
    deals: 12,
    status: 'excellent',
    trend: 'up',
    alerts: [],
    members: [
      {
        id: 1,
        name: '张小明',
        position: '高级销售',
        phone: '138****1234',
        todayPerformance: 25000,
        monthlyPerformance: 180000,
        conversionRate: 8.2,
        callCount: 45,
        newClients: 6,
        deals: 3,
        status: 'excellent',
        joinDate: '2022-03-15'
      },
      {
        id: 2,
        name: '王丽华',
        position: '销售专员',
        phone: '139****5678',
        todayPerformance: 22000,
        monthlyPerformance: 165000,
        conversionRate: 7.5,
        callCount: 38,
        newClients: 5,
        deals: 2,
        status: 'excellent',
        joinDate: '2021-08-20'
      },
      {
        id: 3,
        name: '刘强东',
        position: '销售专员',
        phone: '137****9012',
        todayPerformance: 18000,
        monthlyPerformance: 142000,
        conversionRate: 6.8,
        callCount: 42,
        newClients: 4,
        deals: 2,
        status: 'good',
        joinDate: '2022-01-10'
      },
      {
        id: 4,
        name: '陈美玲',
        position: '销售专员',
        phone: '136****3456',
        todayPerformance: 20000,
        monthlyPerformance: 158000,
        conversionRate: 7.1,
        callCount: 40,
        newClients: 5,
        deals: 2,
        status: 'good',
        joinDate: '2021-11-05'
      },
      {
        id: 5,
        name: '赵志伟',
        position: '销售专员',
        phone: '135****7890',
        todayPerformance: 16000,
        monthlyPerformance: 125000,
        conversionRate: 6.2,
        callCount: 35,
        newClients: 3,
        deals: 1,
        status: 'good',
        joinDate: '2022-05-18'
      },
      {
        id: 6,
        name: '孙晓燕',
        position: '销售专员',
        phone: '134****2345',
        todayPerformance: 19000,
        monthlyPerformance: 148000,
        conversionRate: 6.9,
        callCount: 37,
        newClients: 4,
        deals: 2,
        status: 'good',
        joinDate: '2021-12-12'
      },
      {
        id: 7,
        name: '周建华',
        position: '销售专员',
        phone: '133****6789',
        todayPerformance: 17000,
        monthlyPerformance: 135000,
        conversionRate: 6.5,
        callCount: 33,
        newClients: 3,
        deals: 1,
        status: 'good',
        joinDate: '2022-02-28'
      },
      {
        id: 8,
        name: '吴雅琴',
        position: '销售专员',
        phone: '132****0123',
        todayPerformance: 19000,
        monthlyPerformance: 152000,
        conversionRate: 7.0,
        callCount: 39,
        newClients: 4,
        deals: 2,
        status: 'good',
        joinDate: '2021-09-15'
      }
    ]
  },
  {
    id: 2,
    name: '冲锋组',
    leader: '张主管',
    memberCount: 10,
    todayPerformance: 142000,
    monthlyTarget: 900000,
    monthlyProgress: 58,
    conversionRate: 5.9,
    avgCallTime: 6.8,
    newClients: 32,
    deals: 10,
    status: 'good',
    trend: 'up',
    alerts: ['需要加强追单环节'],
    members: [
      {
        id: 9,
        name: '李建国',
        position: '高级销售',
        phone: '138****4567',
        todayPerformance: 18000,
        monthlyPerformance: 145000,
        conversionRate: 6.8,
        callCount: 42,
        newClients: 4,
        deals: 2,
        status: 'good',
        joinDate: '2021-06-10'
      },
      {
        id: 10,
        name: '马晓丽',
        position: '销售专员',
        phone: '139****8901',
        todayPerformance: 16000,
        monthlyPerformance: 128000,
        conversionRate: 6.2,
        callCount: 38,
        newClients: 3,
        deals: 1,
        status: 'good',
        joinDate: '2022-04-22'
      },
      {
        id: 11,
        name: '杨志强',
        position: '销售专员',
        phone: '137****2345',
        todayPerformance: 14000,
        monthlyPerformance: 112000,
        conversionRate: 5.8,
        callCount: 35,
        newClients: 3,
        deals: 1,
        status: 'average',
        joinDate: '2022-07-08'
      },
      {
        id: 12,
        name: '黄美娟',
        position: '销售专员',
        phone: '136****6789',
        todayPerformance: 15000,
        monthlyPerformance: 120000,
        conversionRate: 6.0,
        callCount: 36,
        newClients: 3,
        deals: 1,
        status: 'good',
        joinDate: '2021-10-30'
      },
      {
        id: 13,
        name: '林志华',
        position: '销售专员',
        phone: '135****0123',
        todayPerformance: 13000,
        monthlyPerformance: 105000,
        conversionRate: 5.5,
        callCount: 32,
        newClients: 2,
        deals: 1,
        status: 'average',
        joinDate: '2022-08-15'
      },
      {
        id: 14,
        name: '郑小芳',
        position: '销售专员',
        phone: '134****4567',
        todayPerformance: 14000,
        monthlyPerformance: 115000,
        conversionRate: 5.9,
        callCount: 34,
        newClients: 3,
        deals: 1,
        status: 'good',
        joinDate: '2021-12-05'
      },
      {
        id: 15,
        name: '何建明',
        position: '销售专员',
        phone: '133****8901',
        todayPerformance: 12000,
        monthlyPerformance: 98000,
        conversionRate: 5.2,
        callCount: 30,
        newClients: 2,
        deals: 0,
        status: 'attention',
        joinDate: '2022-09-20'
      },
      {
        id: 16,
        name: '谢雅琳',
        position: '销售专员',
        phone: '132****2345',
        todayPerformance: 15000,
        monthlyPerformance: 122000,
        conversionRate: 6.1,
        callCount: 37,
        newClients: 4,
        deals: 1,
        status: 'good',
        joinDate: '2021-07-18'
      },
      {
        id: 17,
        name: '罗志勇',
        position: '销售专员',
        phone: '131****6789',
        todayPerformance: 13000,
        monthlyPerformance: 108000,
        conversionRate: 5.6,
        callCount: 33,
        newClients: 3,
        deals: 1,
        status: 'average',
        joinDate: '2022-06-12'
      },
      {
        id: 18,
        name: '蔡美华',
        position: '销售专员',
        phone: '130****0123',
        todayPerformance: 12000,
        monthlyPerformance: 102000,
        conversionRate: 5.4,
        callCount: 31,
        newClients: 2,
        deals: 1,
        status: 'average',
        joinDate: '2022-03-25'
      }
    ]
  },
  {
    id: 3,
    name: '突破组',
    leader: '王主管',
    memberCount: 7,
    todayPerformance: 89000,
    monthlyTarget: 700000,
    monthlyProgress: 45,
    conversionRate: 4.2,
    avgCallTime: 5.5,
    newClients: 18,
    deals: 6,
    status: 'warning',
    trend: 'down',
    alerts: ['转化率偏低', '通话时长不足'],
    members: [
      {
        id: 19,
        name: '徐志强',
        position: '销售专员',
        phone: '138****7890',
        todayPerformance: 15000,
        monthlyPerformance: 118000,
        conversionRate: 5.2,
        callCount: 28,
        newClients: 3,
        deals: 1,
        status: 'average',
        joinDate: '2022-01-20'
      },
      {
        id: 20,
        name: '袁美丽',
        position: '销售专员',
        phone: '139****1234',
        todayPerformance: 13000,
        monthlyPerformance: 95000,
        conversionRate: 4.8,
        callCount: 25,
        newClients: 2,
        deals: 1,
        status: 'attention',
        joinDate: '2022-05-08'
      },
      {
        id: 21,
        name: '冯建华',
        position: '销售专员',
        phone: '137****5678',
        todayPerformance: 12000,
        monthlyPerformance: 88000,
        conversionRate: 4.2,
        callCount: 22,
        newClients: 2,
        deals: 0,
        status: 'attention',
        joinDate: '2022-08-30'
      },
      {
        id: 22,
        name: '邓小芳',
        position: '销售专员',
        phone: '136****9012',
        todayPerformance: 11000,
        monthlyPerformance: 82000,
        conversionRate: 3.9,
        callCount: 20,
        newClients: 2,
        deals: 1,
        status: 'attention',
        joinDate: '2022-09-15'
      },
      {
        id: 23,
        name: '韩志明',
        position: '销售专员',
        phone: '135****3456',
        todayPerformance: 14000,
        monthlyPerformance: 105000,
        conversionRate: 4.6,
        callCount: 26,
        newClients: 3,
        deals: 1,
        status: 'average',
        joinDate: '2021-11-22'
      },
      {
        id: 24,
        name: '曾雅琴',
        position: '销售专员',
        phone: '134****7890',
        todayPerformance: 12000,
        monthlyPerformance: 92000,
        conversionRate: 4.1,
        callCount: 23,
        newClients: 2,
        deals: 1,
        status: 'attention',
        joinDate: '2022-04-10'
      },
      {
        id: 25,
        name: '彭建国',
        position: '销售专员',
        phone: '133****1234',
        todayPerformance: 12000,
        monthlyPerformance: 90000,
        conversionRate: 4.0,
        callCount: 21,
        newClients: 2,
        deals: 1,
        status: 'attention',
        joinDate: '2022-07-05'
      }
    ]
  },
  {
    id: 4,
    name: '新星组',
    leader: '赵主管',
    memberCount: 6,
    todayPerformance: 67000,
    monthlyTarget: 600000,
    monthlyProgress: 38,
    conversionRate: 3.8,
    avgCallTime: 4.9,
    newClients: 15,
    deals: 4,
    status: 'attention',
    trend: 'stable',
    alerts: ['新人培训需加强', '客户跟进不及时'],
    members: [
      {
        id: 26,
        name: '廖志华',
        position: '销售专员',
        phone: '138****5678',
        todayPerformance: 12000,
        monthlyPerformance: 85000,
        conversionRate: 4.2,
        callCount: 18,
        newClients: 3,
        deals: 1,
        status: 'attention',
        joinDate: '2022-10-15'
      },
      {
        id: 27,
        name: '范美玲',
        position: '销售专员',
        phone: '139****9012',
        todayPerformance: 11000,
        monthlyPerformance: 78000,
        conversionRate: 3.8,
        callCount: 16,
        newClients: 2,
        deals: 0,
        status: 'attention',
        joinDate: '2022-11-20'
      },
      {
        id: 28,
        name: '方建明',
        position: '销售专员',
        phone: '137****3456',
        todayPerformance: 10000,
        monthlyPerformance: 72000,
        conversionRate: 3.5,
        callCount: 15,
        newClients: 2,
        deals: 1,
        status: 'poor',
        joinDate: '2022-12-08'
      },
      {
        id: 29,
        name: '石雅芳',
        position: '销售专员',
        phone: '136****7890',
        todayPerformance: 11000,
        monthlyPerformance: 80000,
        conversionRate: 3.9,
        callCount: 17,
        newClients: 3,
        deals: 1,
        status: 'attention',
        joinDate: '2022-09-28'
      },
      {
        id: 30,
        name: '姚志勇',
        position: '销售专员',
        phone: '135****1234',
        todayPerformance: 12000,
        monthlyPerformance: 88000,
        conversionRate: 4.0,
        callCount: 19,
        newClients: 3,
        deals: 1,
        status: 'attention',
        joinDate: '2022-08-12'
      },
      {
        id: 31,
        name: '汤美华',
        position: '销售专员',
        phone: '134****5678',
        todayPerformance: 11000,
        monthlyPerformance: 82000,
        conversionRate: 3.7,
        callCount: 16,
        newClients: 2,
        deals: 0,
        status: 'attention',
        joinDate: '2022-10-30'
      }
    ]
  }
]

// 当前选中的组别，默认为第一个
const selectedGroup = ref(groups[0])

// 选择组别函数
const selectGroup = (group) => {
  selectedGroup.value = group
}

// 格式化货币
const formatCurrency = (value) => {
  if (value >= 10000) {
    return (value / 10000).toFixed(1) + '万'
  }
  return value.toLocaleString()
}

// 获取状态样式类
const getStatusClass = (status) => {
  return `status-${status}`
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    excellent: '优秀',
    good: '良好',
    average: '一般',
    attention: '需关注',
    poor: '待提升'
  }
  return statusMap[status] || '未知'
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/main.scss';

.senior-manager-dashboard {
  min-height: 100vh;
  background-color: #f8fafc;
}

.dashboard-header {
  background: white;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e2e8f0;
  
  .header-content {
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .logo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .header-text {
    h1 {
      font-size: 1.6rem;
      font-weight: bold;
      color: #1e293b;
      margin: 0 0 0.25rem 0;
    }
    
    p {
      color: #64748b;
      margin: 0;
      font-size: 0.95rem;
    }
  }
}

.dashboard-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.top-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

.bottom-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.left-section, .right-section{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.right-section {
  max-height: 600px;
  overflow: auto;
}



.action-items-compact {
  height: 400px;
  overflow: hidden;
  
  :deep(.action-items) {
    height: 100%;
    padding: 1rem;
    
    .actions-header {
      margin-bottom: 1rem;
      
      h2 {
        font-size: 1rem;
      }
      
      .header-controls {
        gap: 0.5rem;
        
        .priority-filter {
          padding: 0.4rem;
          font-size: 0.8rem;
        }
        
        .add-btn {
          padding: 0.4rem 0.8rem;
          font-size: 0.8rem;
        }
      }
    }
    
    .actions-summary {
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      margin-bottom: 1rem;
      
      .summary-item {
        padding: 0.5rem;
        
        .summary-count {
          font-size: 1.2rem;
        }
        
        .summary-label {
          font-size: 0.7rem;
        }
      }
    }
    
    .actions-list {
      max-height: 200px;
      overflow-y: auto;
      
      .action-item {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        
        .action-content {
          .action-header {
            margin-bottom: 0.25rem;
            
            .action-title {
              font-size: 0.9rem;
            }
            
            .action-meta {
              gap: 0.25rem;
              
              .priority-badge {
                padding: 0.2rem 0.4rem;
                font-size: 0.7rem;
              }
              
              .due-date {
                font-size: 0.7rem;
              }
            }
          }
          
          .action-description {
            font-size: 0.8rem;
            margin-bottom: 0.5rem;
          }
          
          .action-details {
            margin-bottom: 0.5rem;
            
            .detail-item {
              font-size: 0.75rem;
            }
          }
          
          .action-footer {
            .action-buttons {
              .btn-edit, .btn-delete {
                padding: 0.25rem 0.5rem;
                font-size: 0.7rem;
              }
            }
          }
        }
      }
    }
  }
  
  .customer-detail-section {
    padding: 1rem;
    margin-top: 0.75rem;
  }
}

// 团队成员详情区域
.team-detail-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
  
  .team-detail-header {
    margin-bottom: 2rem;
    
    h2 {
      font-size: 1.4rem;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 1rem 0;
    }
    
    .team-summary {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
      
      .summary-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        
        .label {
          font-size: 0.9rem;
          color: #64748b;
          font-weight: 500;
        }
        
        .value {
          font-size: 0.9rem;
          color: #1e293b;
          font-weight: 600;
        }
      }
    }
  }
  
  .members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    
    .member-card {
      background: #f8fafc;
      border-radius: 10px;
      padding: 1rem;
      border: 1px solid #e2e8f0;
      transition: all 0.2s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      &.status-excellent {
        border-left: 4px solid #10b981;
        background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
      }
      
      &.status-good {
        border-left: 4px solid #3b82f6;
        background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
      }
      
      &.status-average {
        border-left: 4px solid #f59e0b;
        background: linear-gradient(135deg, #fffbeb 0%, #fefce8 100%);
      }
      
      &.status-attention {
        border-left: 4px solid #f97316;
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
      }
      
      &.status-poor {
        border-left: 4px solid #ef4444;
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      }
      
      .member-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
        
        .member-info {
          flex: 1;
          
          .member-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 0.25rem 0;
          }
          
          .member-position {
            font-size: 0.85rem;
            color: #64748b;
            margin: 0 0 0.25rem 0;
          }
          
          .member-phone {
            font-size: 0.8rem;
            color: #94a3b8;
            margin: 0;
          }
        }
        
        .member-status {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 0.25rem;
          
          .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            
            &.excellent {
              background: #10b981;
              color: white;
            }
            
            &.good {
              background: #3b82f6;
              color: white;
            }
            
            &.average {
              background: #f59e0b;
              color: white;
            }
            
            &.attention {
              background: #f97316;
              color: white;
            }
            
            &.poor {
              background: #ef4444;
              color: white;
            }
          }
          
          .join-date {
            font-size: 0.75rem;
            color: #94a3b8;
          }
        }
      }
      
      .member-metrics {
        .metric-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1rem;
          margin-bottom: 0.75rem;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .metric-item {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            
            .metric-label {
              font-size: 0.75rem;
              color: #64748b;
              font-weight: 500;
            }
            
            .metric-value {
              font-size: 0.9rem;
              color: #1e293b;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

// 客户详情区域
.customer-detail-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
}

// 移动端适配
@media (max-width: 768px) {
  .dashboard-header {
    padding: 1rem;
    
    .header-text {
      h1 {
        font-size: 1.3rem;
      }
      
      p {
        font-size: 0.85rem;
      }
    }
  }
  
  .dashboard-main {
    padding: 0.5rem;
    gap: 0.75rem;
  }
  
  .top-section {
    grid-template-columns: 1fr;
  }
  
  .bottom-section {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .right-section {
    height: auto;
  }
  
  .action-items-compact {
    height: 300px;
    
    :deep(.action-items) {
      .actions-summary {
        grid-template-columns: repeat(4, 1fr);
        
        .summary-item {
          padding: 0.4rem;
          
          .summary-count {
            font-size: 1rem;
          }
          
          .summary-label {
            font-size: 0.6rem;
          }
        }
      }
      
      .actions-list {
        max-height: 150px;
      }
    }
  }
  
  .team-detail-section {
    padding: 1rem;
    margin-top: 0.75rem;
    
    .team-detail-header {
      margin-bottom: 1.5rem;
      
      h2 {
        font-size: 1.2rem;
      }
      
      .team-summary {
        gap: 1rem;
        
        .summary-item {
          .label, .value {
            font-size: 0.8rem;
          }
        }
      }
    }
    
    .members-grid {
      grid-template-columns: 1fr;
      gap: 0.75rem;
      
      .member-card {
        padding: 0.75rem;
        
        .member-header {
          flex-direction: column;
          gap: 0.75rem;
          
          .member-status {
            align-items: flex-start;
            flex-direction: row;
            gap: 0.5rem;
          }
        }
        
        .member-metrics {
          .metric-row {
            grid-template-columns: 1fr;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            
            .metric-item {
              .metric-label {
                font-size: 0.7rem;
              }
              
              .metric-value {
                font-size: 0.8rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>