<!--部门数据-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="navbar_content">
        <view class="back_btn" @click="goBack">
          <fui-icon name="arrowleft" size="32" color="#fff"></fui-icon>
        </view>
        <view class="title">部门数据</view>
        <view class="placeholder"></view>
      </view>
    </view>

    <view class="content_section">
      <!-- 部门选择器 -->
      <view class="dept_selector">
        <view class="selector_label">选择部门：</view>
        <view class="selector_box">
          <view class="selected_dept">请选择部门</view>
          <fui-icon name="dropdown" size="24" color="#999"></fui-icon>
        </view>
      </view>

      <!-- 数据概览卡片 -->
      <view class="overview_cards">
        <view class="card_item">
          <view class="card_icon">
            <fui-icon name="addressbook" size="40" color="#29D3B4"></fui-icon>
          </view>
          <view class="card_content">
            <view class="card_title">部门人数</view>
            <view class="card_value">--</view>
          </view>
        </view>

        <view class="card_item">
          <view class="card_icon">
            <fui-icon name="star" size="40" color="#29D3B4"></fui-icon>
          </view>
          <view class="card_content">
            <view class="card_title">总客户数</view>
            <view class="card_value">--</view>
          </view>
        </view>

        <view class="card_item">
          <view class="card_icon">
            <fui-icon name="wallet" size="40" color="#29D3B4"></fui-icon>
          </view>
          <view class="card_content">
            <view class="card_title">部门业绩</view>
            <view class="card_value">--</view>
          </view>
        </view>

        <view class="card_item">
          <view class="card_icon">
            <fui-icon name="check" size="40" color="#29D3B4"></fui-icon>
          </view>
          <view class="card_content">
            <view class="card_title">完成率</view>
            <view class="card_value">--</view>
          </view>
        </view>
      </view>

      <!-- 排行榜 -->
      <view class="ranking_section">
        <view class="section_title">部门排行榜</view>
        <view class="ranking_list">
          <view class="ranking_item">
            <view class="rank_number first">1</view>
            <view class="member_info">
              <view class="member_name">张三</view>
              <view class="member_score">业绩：￥50000</view>
            </view>
            <view class="medal">
              <fui-icon name="star-fill" size="24" color="#FFD700"></fui-icon>
            </view>
          </view>

          <view class="ranking_item">
            <view class="rank_number second">2</view>
            <view class="member_info">
              <view class="member_name">李四</view>
              <view class="member_score">业绩：￥45000</view>
            </view>
            <view class="medal">
              <fui-icon name="star-fill" size="24" color="#C0C0C0"></fui-icon>
            </view>
          </view>

          <view class="ranking_item">
            <view class="rank_number third">3</view>
            <view class="member_info">
              <view class="member_name">王五</view>
              <view class="member_score">业绩：￥40000</view>
            </view>
            <view class="medal">
              <fui-icon name="star-fill" size="24" color="#CD7F32"></fui-icon>
            </view>
          </view>
        </view>
      </view>

      <!-- 功能按钮区域 -->
      <view class="function_section">
        <view class="section_title">数据分析</view>
        <view class="function_grid">
          <view class="function_item">
            <view class="function_icon">
              <fui-icon name="barchart" size="32" color="#29D3B4"></fui-icon>
            </view>
            <view class="function_text">业绩对比</view>
          </view>

          <view class="function_item">
            <view class="function_icon">
              <fui-icon name="piechart" size="32" color="#29D3B4"></fui-icon>
            </view>
            <view class="function_text">人员分布</view>
          </view>

          <view class="function_item">
            <view class="function_icon">
              <fui-icon name="linechart" size="32" color="#29D3B4"></fui-icon>
            </view>
            <view class="function_text">趋势分析</view>
          </view>

          <view class="function_item">
            <view class="function_icon">
              <fui-icon name="list" size="32" color="#29D3B4"></fui-icon>
            </view>
            <view class="function_text">详细报表</view>
          </view>
        </view>
      </view>

      <!-- 提示信息 -->
      <view class="tips_section">
        <view class="tips_title">功能说明</view>
        <view class="tips_content">
          这里将显示部门的各项数据统计，包括部门人员、客户数量、销售业绩、排行榜等。
          具体功能待后续开发实现。
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"

export default {
  components: {
    fuiIcon,
  },
  data() {
    return {
      
    }
  },
  onLoad() {
    
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
  }
}
</script>

<style lang="less" scoped>
.main_box {
  background: #f5f5f5;
  min-height: 100vh;
}

// 自定义导航栏
.navbar_section {
  background: #29D3B4;
  padding-top: 20rpx;
  
  // 小程序端样式
  // #ifdef MP-WEIXIN
  padding-top: 90rpx;
  // #endif
  
  .navbar_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 24rpx 40rpx 24rpx;
    
    .back_btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .title {
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
    }
    
    .placeholder {
      width: 60rpx;
    }
  }
}

// 内容区域
.content_section {
  padding: 40rpx 24rpx;
  
  // 部门选择器
  .dept_selector {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    
    .selector_label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
      font-weight: 500;
    }
    
    .selector_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 24rpx;
      background: #f8f8f8;
      border-radius: 12rpx;
      
      .selected_dept {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
  
  // 概览卡片
  .overview_cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
    margin-bottom: 40rpx;
    
    .card_item {
      background: #fff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      display: flex;
      align-items: center;
      gap: 20rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      
      .card_icon {
        width: 64rpx;
        height: 64rpx;
        background: rgba(41, 211, 180, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .card_content {
        flex: 1;
        
        .card_title {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 8rpx;
        }
        
        .card_value {
          font-size: 32rpx;
          color: #333;
          font-weight: 600;
        }
      }
    }
  }
  
  // 排行榜
  .ranking_section {
    margin-bottom: 40rpx;
    
    .section_title {
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      margin-bottom: 24rpx;
    }
    
    .ranking_list {
      background: #fff;
      border-radius: 16rpx;
      padding: 24rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      
      .ranking_item {
        display: flex;
        align-items: center;
        padding: 20rpx 16rpx;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .rank_number {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          font-weight: 600;
          color: #fff;
          margin-right: 24rpx;
          
          &.first {
            background: #FFD700;
          }
          
          &.second {
            background: #C0C0C0;
          }
          
          &.third {
            background: #CD7F32;
          }
        }
        
        .member_info {
          flex: 1;
          
          .member_name {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
            font-weight: 500;
          }
          
          .member_score {
            font-size: 24rpx;
            color: #666;
          }
        }
        
        .medal {
          margin-left: 16rpx;
        }
      }
    }
  }
  
  // 功能区域
  .function_section {
    margin-bottom: 40rpx;
    
    .section_title {
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      margin-bottom: 24rpx;
    }
    
    .function_grid {
      background: #fff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      
      .function_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24rpx 16rpx;
        border-radius: 12rpx;
        transition: all 0.3s ease;
        
        &:active {
          background-color: #f5f5f5;
          transform: scale(0.95);
        }
        
        .function_icon {
          width: 64rpx;
          height: 64rpx;
          background: rgba(41, 211, 180, 0.1);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16rpx;
        }
        
        .function_text {
          font-size: 24rpx;
          color: #333;
        }
      }
    }
  }
  
  // 提示信息
  .tips_section {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    
    .tips_title {
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      margin-bottom: 16rpx;
    }
    
    .tips_content {
      font-size: 24rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}
</style>