<template>
  <div class="senior-manager-dashboard">
    <!-- Header -->
    <header class="dashboard-header">
      <div class="header-content">
        <div class="logo-section">
          <!-- 动态顶栏：根据是否有路由参数显示不同内容 -->
          <!-- 路由跳转时的顶栏：面包屑 + 姓名 -->
          <div v-if="isRouteNavigation" class="route-header">
            <div class="breadcrumb">
              <span class="breadcrumb-item" @click="goBack">团队管理</span>
              <span class="breadcrumb-separator">></span>
              <span class="breadcrumb-item current">{{ routeUserName }}高级经理指挥台</span>
            </div>
            <div class="user-name">
              {{ routeUserName }}
            </div>
          </div>

          <!-- 自己登录时的顶栏：原有样式 -->
          <template v-else>
            <div class="header-text">
              <h1>高级经理指挥台</h1>
              <p>统筹多组运营，优化资源配置，驱动业绩增长，实现团队协同发展。</p>
            </div>
          </template>
          
          <div v-if="!isRouteNavigation">
            <!-- 用户下拉菜单 -->
            <UserDropdown class="header-ringht" style="margin-left: auto;" />
          </div>
        </div>
      </div>
    </header>
    <!-- Main Content -->
    <main class="dashboard-main">
      <div class="top-section">
        <CenterOverview 
          style="height: 330px;" 
          :overallTeamPerformance="overallTeamPerformance"
          @update-check-type="updateCheckType"
        />
        <div class="action-items-compact">
        <TeamAlerts style="height: 300px;" :abnormalData="teamAlerts" />
        </div>
      </div>
         <StatisticalIndicators 
           :customerCommunicationRate="statisticalIndicators.customerCommunicationRate"
           :averageResponseTime="statisticalIndicators.averageResponseTime"
           :timeoutResponseRate="statisticalIndicators.timeoutResponseRate"
           :severeTimeoutRate="statisticalIndicators.severeTimeoutRate"
           :formCompletionRate="statisticalIndicators.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 :problemRanking="problemRanking" />
        </div>
        <!-- Right Section - Group Comparison -->
        <div class="right-section">
          <GroupComparison 
            :groups="groups" 
            :teamRanking="teamRanking"
            @select-group="selectGroup" 
            @team-double-click="handleTeamDoubleClick"
          />
        </div>
      </div>
       <!-- Team Members Detail Section -->
      <div class="team-detail-section" v-if="selectedGroup">
        <!-- 团队详情加载状态 -->
        <div v-if="isTeamDetailLoading" class="team-loading">
          <div class="loading-spinner"></div>
          <div class="loading-text">正在加载团队详情...</div>
        </div>
        <!-- 团队详情内容 -->
        <div v-else>
          <div class="team-detail-header">
            <h2>{{ selectedGroup.name }} - 团队成员详情</h2>
            <div class="team-summary">
              <div class="summary-item">
                <span class="label">组长:</span>
                <span class="value">{{ selectedGroup.leader }}</span>
              </div>
              <div class="summary-item">
                <span class="label">成员数:</span>
                <span class="value">{{ teamPerformanceDetail.group_details?.length || 0 }}人</span>
              </div>
              <div class="summary-item">
                <span class="label">今日业绩:</span>
                <span class="value">{{ selectedGroup.todayPerformance }}</span>
              </div>
              <div class="summary-item">
                <span class="label">转化率:</span>
                <span class="value">{{ selectedGroup.conversionRate }}%</span>
              </div>
            </div>
          </div>
          
          <div class="members-grid">
            <div 
              v-for="member in teamPerformanceDetail.group_details" 
              :key="member.id"
              class="member-card"
              @dblclick="handleMemberDoubleClick(member)"
            >
              <div class="member-header">
                <div class="member-info">
                  <h3 class="member-name">{{ member.name }}</h3>
                </div>
              </div>            
              <div class="member-metrics">
                <div class="metric-row">
                  <div class="metric-item">
                    <span class="metric-label">今日业绩</span>
                    <span class="metric-value">{{ member.today_deals }}</span>

                  </div>
                  <div class="metric-item">
                    <span class="metric-label">月度业绩</span>
                    <span class="metric-value">{{ member.monthly_deals}}</span>

                  </div>
                </div>
                
                <div class="metric-row">
                  <div class="metric-item">
                    <span class="metric-label">转化率<i class="info-icon" @mouseenter="showTooltip($event, 'teamPerformance')" @mouseleave="hideTooltip">ⓘ</i></span>
                    <span class="metric-value">{{ member.conversion_rate_this_period }}</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">通话次数</span>
                    <span class="metric-value">{{ member.call_count_this_period }}</span>
                  </div>
                  <!-- Tooltip 组件 -->
                  <Tooltip 
                    :visible="tooltip.visible"
                    :x="tooltip.x"
                    :y="tooltip.y"
                    :title="tooltip.title"
                    :description="tooltip.description"
                  />
                </div>
                
                <div class="metric-row">
                  <div class="metric-item">
                    <span class="metric-label">新增客户</span>
                    <span class="metric-value">{{ member.new_customers_this_period }}</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">成交订单</span>
                    <span class="metric-value">{{ member.deals_this_period }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
     <div>

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

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { computed, reactive } from 'vue'
import Tooltip from '@/components/Tooltip.vue'
import CenterOverview from './components/CenterOverview.vue'
import GroupComparison from './components/GroupComparison.vue'
import GroupRanking from './components/GroupRanking.vue'
import TeamAlerts from '../maneger/components/TeamAlerts.vue'
import ProblemRanking from './components/ProblemRanking.vue'
import StatisticalIndicators from './components/StatisticalIndicators.vue'
import UserDropdown from '@/components/UserDropdown.vue'
import Loading from '@/components/Loading.vue'
import { getOverallTeamPerformance,getTotalGroupCount,getConversionRate,getTotalCallCount,
         getNewCustomer,getDepositConversionRate,getActiveCustomerCommunicationRate,getAverageAnswerTime,
         getTimeoutRate,getTableFillingRate,getUrgentNeedToAddress,getTeamRanking,getTeamRankingInfo,getAbnormalResponseRate } from '@/api/senorManger.js'  

import { useUserStore } from '@/stores/user.js'

// 缓存系统
const cache = new Map()
const CACHE_DURATION = 30 * 60 * 1000 // 30分钟

// 缓存工具函数
const getCacheKey = (functionName, params = {}) => {
  return `${functionName}_${JSON.stringify(params)}`
}

const isValidCache = (cacheItem) => {
  return cacheItem && (Date.now() - cacheItem.timestamp) < CACHE_DURATION
}

const setCache = (key, data) => {
  cache.set(key, {
    data,
    timestamp: Date.now()
  })
}

const getCache = (key) => {
  const cacheItem = cache.get(key)
  return isValidCache(cacheItem) ? cacheItem.data : null
}

const withCache = async (functionName, apiCall, params = {}) => {
  const cacheKey = getCacheKey(functionName, params)
  const cachedData = getCache(cacheKey)
  
  if (cachedData) {
    console.log(`从缓存获取数据: ${functionName}`, params)
    return cachedData
  }
  
  console.log(`调用API获取数据: ${functionName}`, params)
  const result = await apiCall()
  setCache(cacheKey, result)
  return result
}

// 缓存管理功能
const clearCache = () => {
  cache.clear()
  console.log('所有缓存已清除')
}

const clearSpecificCache = (functionName, params = {}) => {
  const cacheKey = getCacheKey(functionName, params)
  cache.delete(cacheKey)
  console.log(`已清除缓存: ${functionName}`, params)
}

const getCacheInfo = () => {
  const now = Date.now()
  const cacheInfo = []
  
  cache.forEach((value, key) => {
    const isValid = isValidCache(value)
    const age = Math.round((now - value.timestamp) / 1000 / 60) // 分钟
    cacheInfo.push({
      key,
      isValid,
      age: `${age}分钟前`,
      timestamp: new Date(value.timestamp).toLocaleString()
    })
    
    // 清除过期缓存
    if (!isValid) {
      cache.delete(key)
    }
  })
  
  return cacheInfo
}

const forceRefreshAllData = async () => {
  console.log('强制刷新所有数据...')
  clearCache()
  
  try {
    isLoading.value = true
    await fetchOverallTeamPerformance()
    await fetchActiveGroups()
    await fetchConversionRate()
    await fetchTotalCallCount()
    await fetchNewCustomers()
    await fetchDepositConversions()
    await fetchAbnormalResponseRate()
    await fetchCustomerCommunicationRate()
    await fetchAverageResponseTime()
    await fetchTimeoutRate()
    await fetchTableFillingRate()
    await fetchUrgentNeedToAddress()
    await fetchTeamRanking()
    console.log('所有数据已强制刷新完成')
  } catch (error) {
    console.error('强制刷新数据失败:', error)
  } finally {
    isLoading.value = false
  }
}

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

// 更新CheckType的方法
const updateCheckType = async (newValue) => {
  CheckType.value = newValue
  console.log('CheckType已更新为:', newValue)
  
  // 清除缓存并重新获取所有使用CheckType的数据
  await forceRefreshAllData()
  console.log('数据已根据新的统计模式重新加载')
}

const userStore = useUserStore()
// 路由实例
const router = useRouter()

// 判断是否为路由导航（有路由参数）
const isRouteNavigation = computed(() => {
  const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
  return !!routeUserName
})

// 获取路由传递的用户名
const routeUserName = computed(() => {
  return router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name || ''
})

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// Loading状态
const isLoading = ref(false)
// 团队详情加载状态
const isTeamDetailLoading = ref(false)

// 整体概览
const overallTeamPerformance = ref({
  totalPerformance: {},
  activeGroups: {},
  conversionRate: {},
  totalCalls: {},
  newCustomers: {},
  depositConversions: {},
})
// 获取通用请求参数的函数
const getRequestParams = () => {
  const params = {}
  // 只从路由参数获取
  const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level
  const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
  // 如果路由有参数，使用路由参数
  if (routeUserLevel) {
    params.user_level = routeUserLevel.toString()
  }
  if (routeUserName) {
    params.user_name = routeUserName
  }
  return params
}

// 获取整体概览数据--团队总业绩
async function fetchOverallTeamPerformance() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? {
    ...params,
    check_type: CheckType.value
  } : {check_type: CheckType.value}
  
  try {
    const response = await withCache(
      'fetchOverallTeamPerformance',
      () => getOverallTeamPerformance(requestParams),
      requestParams
    )
    overallTeamPerformance.value.totalPerformance = response.data
  } catch (error) {
    console.error('获取整体概览数据失败:', error)
  }
}
// 获取整体概览数据--活跃组数
async function fetchActiveGroups() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? {
    ...params,
    check_type: CheckType.value
  } : {check_type: CheckType.value}
  
  try {
    const response = await withCache(
      'fetchActiveGroups',
      () => getTotalGroupCount(requestParams),
      requestParams
    )
    overallTeamPerformance.value.activeGroups = response.data
    console.log('活跃组数:', response.data)
  } catch (error) {
    console.error('获取活跃组数失败:', error)
  }
}
// 获取整体概览数据--团队转化率
async function fetchConversionRate() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? {
    ...params,
    check_type: CheckType.value
  } : {check_type: CheckType.value}
  
  try {
    const response = await withCache(
      'fetchConversionRate',
      () => getConversionRate(requestParams),
      requestParams
    )
    overallTeamPerformance.value.conversionRate = response.data
  } catch (error) {
    console.error('获取团队转化率失败:', error)
  }
}
// 通话次数
async function fetchTotalCallCount() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? {
    ...params,
    check_type: CheckType.value
  } : {check_type: CheckType.value}
  
  try {
    const response = await withCache(
      'fetchTotalCallCount',
      () => getTotalCallCount(requestParams),
      requestParams
    )
    overallTeamPerformance.value.totalCalls = response.data
  } catch (error) {
    console.error('获取通话次数失败:', error)
  }
}
// 新增客户
async function fetchNewCustomers() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? {
    ...params,
    check_type: CheckType.value
  } : {check_type: CheckType.value}
  
  try {
    const response = await withCache(
      'fetchNewCustomers',
      () => getNewCustomer(requestParams),
      requestParams
    )
    overallTeamPerformance.value.newCustomers = response.data
  } catch (error) {
    console.error('获取新增客户失败:', error)
  }
}
// 定金转化
async function fetchDepositConversions() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? {
    ...params,
    check_type: CheckType.value
  } : {check_type: CheckType.value}
  
  try {
    const response = await withCache(
      'fetchDepositConversions',
      () => getDepositConversionRate(requestParams),
      requestParams
    )
    overallTeamPerformance.value.depositConversions = response.data
    console.log(99888999,response.data)
  } catch (error) {
    console.error('获取定金转化失败:', error)
  }
}

const statisticalIndicators = ref({
  customerCommunicationRate: 0,
  averageResponseTime: 0,
  timeoutResponseRate: 0,
  severeTimeoutRate: 0,
  formCompletionRate: 0,
})

// 团队异常  
const teamAlerts = ref({})
// 异常预警
async function fetchAbnormalResponseRate() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? params : {}
  
  try {
    const response = await withCache(
      'fetchAbnormalResponseRate',
      () => getAbnormalResponseRate(hasParams ? params : undefined),
      requestParams
    )
    const rawData = response.data
    
    // 转换数据格式，按团队分组生成预警消息
    const processedAlerts = []
    const teamData = new Map()
    
    // 收集严重超时异常数据
    if (rawData.team_serious_timeout_abnormal_counts_by_group) {
      Object.entries(rawData.team_serious_timeout_abnormal_counts_by_group).forEach(([teamName, data]) => {
        if (!teamData.has(teamName)) {
          teamData.set(teamName, { timeoutCount: 0, fillingCount: 0 })
        }
        teamData.get(teamName).timeoutCount = data.count
      })
    }
    
    // 收集表格填写异常数据
    if (rawData.team_table_filling_abnormal_counts_by_group) {
      Object.entries(rawData.team_table_filling_abnormal_counts_by_group).forEach(([teamName, data]) => {
        if (!teamData.has(teamName)) {
          teamData.set(teamName, { timeoutCount: 0, fillingCount: 0 })
        }
        teamData.get(teamName).fillingCount = data.count
      })
    }
    
    // 生成按团队分组的预警消息
    let alertId = 1
    teamData.forEach((counts, teamName) => {
      const messages = []
      if (counts.timeoutCount > 0) {
        messages.push(`${counts.timeoutCount}人严重超时率过高`)
      }
      if (counts.fillingCount > 0) {
        messages.push(`${counts.fillingCount}人表格填写率过低`)
      }
      
      if (messages.length > 0) {
        processedAlerts.push({
          id: alertId++,
          type: messages.length > 1 ? 'danger' : 'warning',
          icon: messages.length > 1 ? '🔺' : '⚠',
          message: `${teamName}团队${messages.join('，')}`
        })
      }
    })
    
    // 设置处理后的数据
    teamAlerts.value = { processedAlerts }

  } catch (error) {
    console.error('获取异常预警失败:', error)
  }
}
// 统计指标--活跃客户沟通率
async function fetchCustomerCommunicationRate() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? params : {}
  
  try {
    const response = await withCache(
      'fetchCustomerCommunicationRate',
      () => getActiveCustomerCommunicationRate(hasParams ? params : undefined),
      requestParams
    )
    statisticalIndicators.value.customerCommunicationRate = response.data
  } catch (error) {
    console.error('获取活跃客户沟通率失败:', error)
  }
}
// 统计指标--平均应答时间
async function fetchAverageResponseTime() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? params : {}
  
  try {
    const response = await withCache(
      'fetchAverageResponseTime',
      () => getAverageAnswerTime(hasParams ? params : undefined),
      requestParams
    )
    statisticalIndicators.value.averageResponseTime = response.data
  } catch (error) {
    console.error('获取平均应答时间失败:', error)
  }
}
// 统计指标--超时应答率、严重超时应答率
async function fetchTimeoutRate() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? params : {}
  
  try {
    const response = await withCache(
      'fetchTimeoutRate',
      () => getTimeoutRate(hasParams ? params : undefined),
      requestParams
    )
    statisticalIndicators.value.timeoutResponseRate = response.data
  } catch (error) {
    console.error('获取超时应答率失败:', error)
  }
}
// 统计指标--表格填写率
async function fetchTableFillingRate() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? params : {}
  
  try {
    const response = await withCache(
      'fetchTableFillingRate',
      () => getTableFillingRate(hasParams ? params : undefined),
      requestParams
    )
    statisticalIndicators.value.formCompletionRate = response.data
  } catch (error) {
    console.error('获取表格填写率失败:', error)
  }
}
const problemRanking = ref({})

// 客户迫切解决的问题
async function fetchUrgentNeedToAddress() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? params : {}
  
  try {
    const response = await withCache(
      'fetchUrgentNeedToAddress',
      () => getUrgentNeedToAddress(hasParams ? params : undefined),
      requestParams
    )
    problemRanking.value = response.data
  } catch (error) {
    console.error('获取客户迫切解决的问题失败:', error)
  }
}
//综合表现排名
const teamRanking = ref({})

async function fetchTeamRanking() {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? params : {}
  
  try {
    const response = await withCache(
      'fetchTeamRanking',
      () => getTeamRanking(hasParams ? params : undefined),
      requestParams
    )
    teamRanking.value = response.data
  } catch (error) {
    console.error('获取团队业绩排名失败:', error)
  }
}

// 团队业绩详情
const teamPerformanceDetail = ref({})
async function fetchTeamPerformanceDetail(department) {
  const params = getRequestParams()
  const hasParams = params.user_name
  const requestParams = hasParams ? {
    ...params,
    department: department
  } : {
    user_name: userStore.userInfo.username,
    user_level: userStore.userInfo.user_level.toString(),
    department: department
  }
  
  try {
    teamPerformanceDetail.value = {}
    const response = await withCache(
      'fetchTeamPerformanceDetail',
      () => getTeamRankingInfo(requestParams),
      requestParams
    )
    teamPerformanceDetail.value = response.data
  } catch (error) {
    console.error('获取团队业绩详情失败:', error)
  }
}
// 初始化时获取数据
onMounted(async ()=>{
  try {
    isLoading.value = true
    await fetchOverallTeamPerformance()
    await fetchActiveGroups()
    await fetchConversionRate()
    await fetchTotalCallCount()
    await fetchNewCustomers()
    await fetchDepositConversions()
    await fetchAbnormalResponseRate()
    await fetchCustomerCommunicationRate()
    await fetchAverageResponseTime()
    await fetchTimeoutRate()
    await fetchTableFillingRate()
    await fetchUrgentNeedToAddress()
    await fetchTeamRanking()
    
    // 输出缓存信息
    console.log('缓存状态:', getCacheInfo())
    
    // 开发环境下暴露缓存管理函数到全局
    if (import.meta.env.DEV) {
      window.seniorManagerCache = {
        clearCache,
        clearSpecificCache,
        getCacheInfo,
        forceRefreshAllData,
        cache
      }
      console.log('开发模式：缓存管理函数已暴露到 window.seniorManagerCache')
    }
  } catch (error) {
    console.error('数据加载失败:', error)
  } finally {
    isLoading.value = false
  }
})

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

// 选择组别函数
const selectGroup = async (group) => {
  console.log('选择的组别:', group)
  selectedGroup.value = group
  // 获取部门名称并调用团队业绩详情接口
  // 从teamRanking数据中查找对应的原始部门名称
  let department = group.name
  if (teamRanking.value && teamRanking.value.formal_plural) {
    // 在formal_plural中查找匹配的部门名称
    const departmentKeys = Object.keys(teamRanking.value.formal_plural)
    const matchedDepartment = departmentKeys.find(key => {
      // 提取部门名称的主要部分进行匹配
      const mainName = key.split('-')[0] || key
      return group.name.includes(mainName) || mainName.includes(group.name)
    })
    if (matchedDepartment) {
      department = matchedDepartment
    }
  }
  console.log('选中的部门:', group.name, '-> 发送的部门名称:', department)
  
  // 设置团队详情加载状态
  isTeamDetailLoading.value = true
  try {
    await fetchTeamPerformanceDetail(department)
  } catch (error) {
    console.error('获取团队详情失败:', error)
  } finally {
    isTeamDetailLoading.value = false
  }
}

// 处理团队双击事件
const handleTeamDoubleClick = (group) => {
  console.log('团队双击事件触发，团队数据:', group)
  
  // 跳转到manager页面，携带团队负责人和用户等级
  router.push({
    path: '/manager',
    query: {
      user_name: group.leader,
      user_level: 2
    }
  })
}

// 处理成员双击事件
const handleMemberDoubleClick = (member) => {
  console.log('双击事件触发，成员数据:', member)
  
  // 将成员等级写死为1，所有成员都可以跳转
  const memberLevel = 1
  console.log('等级设置为1，准备跳转到Sale页面')
  
  // 跳转到Sale页面，携带成员姓名和等级
  router.push({
    name: 'Sale',
    query: {
      user_name: member.name,
      user_level: memberLevel
    }
  })
}

// 格式化货币
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] || '未知'
}


// 工具提示状态
const tooltip = reactive({
  visible: false,
  x: 0,
  y: 0,
  title: '',
  description: ''
})

// 指标描述
const metricDescriptions = {
  teamPerformance: {
    title: '转化率',
    description: '本期最终成交/本期客户总数'
  }
}

// 显示工具提示
const showTooltip = (event, metricType) => {
  const metric = metricDescriptions[metricType]
  if (metric) {
    tooltip.title = metric.title
    tooltip.description = metric.description
    tooltip.x = event.clientX
    tooltip.y = event.clientY
    tooltip.visible = true
  }
}

// 隐藏工具提示
const hideTooltip = () => {
  tooltip.visible = false
}
</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;
    justify-content: space-between;
    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 {
  overflow: auto;
}



.action-items-compact {
  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;
      cursor: pointer;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      &:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      }
      
      &.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;
            }
          }
        }
      }
    }
  }
}
.info-icon {
        color: #94a3b8;
        font-size: 0.75rem;
        cursor: pointer;
        opacity: 0.7;
        transition: all 0.2s ease;
        margin-left: 0.25rem;
        
        &:hover {
          opacity: 1;
          color: #3b82f6;
          transform: scale(1.1);
        }
      }
// 客户详情区域
.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;
}

// 团队详情加载状态
.team-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  
  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
  }
  
  .loading-text {
    color: #64748b;
    font-size: 0.9rem;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 移动端适配
@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;
              }
            }
          }
        }
      }
    }
  }
}

// 路由导航样式
.route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    .breadcrumb-item {
      color: #64748b;
      font-size: 0.875rem;
      font-weight: 500;
      
      &:not(.current) {
        cursor: pointer;
        transition: color 0.2s;
        
        &:hover {
          color: #3b82f6;
        }
      }
      
      &.current {
        color: #1e293b;
        font-weight: 600;
      }
    }
    
    .breadcrumb-separator {
      color: #94a3b8;
      font-size: 0.875rem;
    }
  }
  
  .user-name {
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}
</style>