<template>
  <div class="home">
    <!-- 统计卡片区域 -->
    <el-row :gutter="24" class="stat-cards">
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="stat-card customer">
          <div class="stat-content">
            <div class="stat-left">
              <div class="stat-icon">
                <el-icon><UserFilled /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-label">客户总数</div>
                <div class="stat-value">{{ formatNumber(staticsData.customerCount) }}</div>
              </div>
            </div>
            <div class="stat-trend">
              <el-icon><ArrowUp /></el-icon>
              <span>较上月</span>
            </div>
          </div>
          <!-- <div class="stat-progress">
            <div class="progress-bar">
              <div class="progress-fill" style="width: 75%"></div>
            </div>
            <div class="progress-text">完成率 75%</div>
          </div> -->
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8">
        <div class="stat-card warning">
          <div class="stat-content">
            <div class="stat-left">
              <div class="stat-icon">
                <el-icon><AlarmClock /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-label">超期未跟进提醒数</div>
                <div class="stat-value">{{ formatNumber(staticsData.overdueRemindCount) }}</div>
              </div>
            </div>
            <div class="stat-trend down">
              <el-icon><ArrowDown /></el-icon>
              <span>需关注</span>
            </div>
          </div>
          <!-- <div class="stat-progress">
            <div class="progress-bar warning">
              <div class="progress-fill" :style="{ width: getWarningPercent() + '%' }"></div>
            </div>
            <div class="progress-text">{{ staticsData.overdueRemindCount }} 条待处理</div>
          </div> -->
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8">
        <div class="stat-card opportunity">
          <div class="stat-content">
            <div class="stat-left">
              <div class="stat-icon">
                <el-icon><Opportunity /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-label">未跟进机会数</div>
                <div class="stat-value">{{ formatNumber(staticsData.unfollowedOpportunitiesCount) }}</div>
              </div>
            </div>
            <div class="stat-trend">
              <el-icon><ArrowUp /></el-icon>
              <span>新机会</span>
            </div>
          </div>
          <!-- <div class="stat-progress">
            <div class="progress-bar opportunity">
              <div class="progress-fill" style="width: 60%"></div>
            </div>
            <div class="progress-text">转化率 60%</div>
          </div> -->
        </div>
      </el-col>
    </el-row>

    <!-- 数据概览区域 -->
    <!-- <el-row :gutter="24" class="chart-section">
      <el-col :span="24">
        <div class="chart-card">
          <div class="chart-header">
            <div class="chart-title">
              <el-icon><DataLine /></el-icon>
              <span>数据概览</span>
            </div>
            <div class="chart-subtitle">实时统计客户动态</div>
          </div>
          <div class="chart-content">
            <div class="data-overview">
              <div class="overview-item">
                <div class="overview-icon customer">
                  <el-icon><User /></el-icon>
                </div>
                <div class="overview-info">
                  <div class="overview-value">{{ formatNumber(staticsData.customerCount) }}</div>
                  <div class="overview-label">总客户</div>
                </div>
              </div>
              <div class="divider"></div>
              <div class="overview-item">
                <div class="overview-icon warning">
                  <el-icon><Warning /></el-icon>
                </div>
                <div class="overview-info">
                  <div class="overview-value warning">{{ formatNumber(staticsData.overdueRemindCount) }}</div>
                  <div class="overview-label">逾期提醒</div>
                </div>
              </div>
              <div class="divider"></div>
              <div class="overview-item">
                <div class="overview-icon success">
                  <el-icon><CircleCheck /></el-icon>
                </div>
                <div class="overview-info">
                  <div class="overview-value">{{ formatNumber(staticsData.unfollowedOpportunitiesCount) }}</div>
                  <div class="overview-label">待跟进</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script setup lang="ts" name="home">
import { ref, onMounted } from "vue";
import {
  UserFilled,
  AlarmClock,
  Opportunity,
  ArrowUp,
  ArrowDown,
  DataLine,
  User,
  Warning,
  CircleCheck
} from "@element-plus/icons-vue";
import { getHomeStaticsAll, ResHomeStatics } from "@/api/modules/home";

// 统计数据
const staticsData = ref<ResHomeStatics>({
  customerCount: 0,
  overdueRemindCount: 0,
  unfollowedOpportunitiesCount: 0
});

// 获取首页统计数据
const getStatics = async () => {
  try {
    const res = await getHomeStaticsAll({});
    if (res.data) {
      staticsData.value = res.data;
    }
  } catch (error) {
    console.error("获取统计数据失败:", error);
  }
};

// 格式化数字
const formatNumber = (num: number) => {
  if (num === undefined || num === null) return "0";
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + "w";
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + "k";
  }
  return num.toString();
};

// 获取逾期提醒百分比
const getWarningPercent = () => {
  const count = staticsData.value.overdueRemindCount || 0;
  if (count === 0) return 0;
  if (count > 100) return 100;
  return count;
};

onMounted(() => {
  getStatics();
});
</script>

<style scoped lang="scss">
.home {
  min-height: calc(100vh - 100px);
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  .stat-cards {
    margin-bottom: 24px;
    .el-col {
      margin-bottom: 24px;
    }
    .stat-card {
      position: relative;
      padding: 24px;
      overflow: hidden;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
      transition: all 0.3s ease;
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        content: "";
      }
      &.customer::before {
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
      }
      &.warning::before {
        background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
      }
      &.opportunity::before {
        background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
      }
      &:hover {
        box-shadow: 0 8px 30px rgb(0 0 0 / 12%);
        transform: translateY(-4px);
      }
      .stat-content {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 20px;
        .stat-left {
          display: flex;
          gap: 16px;
          align-items: center;
        }
        .stat-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 56px;
          height: 56px;
          border-radius: 14px;
          .el-icon {
            font-size: 28px;
            color: #ffffff;
          }
        }
        .stat-info {
          .stat-label {
            margin-bottom: 6px;
            font-size: 14px;
            font-weight: 500;
            color: #909399;
          }
          .stat-value {
            font-size: 32px;
            font-weight: 700;
            line-height: 1;
            color: #303133;
          }
        }
        .stat-trend {
          display: flex;
          gap: 4px;
          align-items: center;
          padding: 6px 12px;
          font-size: 12px;
          font-weight: 500;
          color: #667eea;
          background: rgb(103 126 234 / 10%);
          border-radius: 20px;
          &.down {
            color: #f56c6c;
            background: rgb(245 108 108 / 10%);
          }
          .el-icon {
            font-size: 14px;
          }
        }
      }
      .stat-progress {
        .progress-bar {
          height: 6px;
          margin-bottom: 8px;
          overflow: hidden;
          background: #ebeef5;
          border-radius: 3px;
          .progress-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.6s ease;
          }
          &.warning .progress-fill {
            background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
          }
          &.opportunity .progress-fill {
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
          }
          &:not(.warning, .opportunity) .progress-fill {
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
          }
        }
        .progress-text {
          font-size: 12px;
          color: #909399;
        }
      }
      &.customer .stat-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      &.warning .stat-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      &.opportunity .stat-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
    }
  }
  .chart-section {
    .chart-card {
      padding: 24px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
      .chart-header {
        margin-bottom: 24px;
        .chart-title {
          display: flex;
          gap: 8px;
          align-items: center;
          margin-bottom: 4px;
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          .el-icon {
            font-size: 20px;
            color: #667eea;
          }
        }
        .chart-subtitle {
          padding-left: 28px;
          font-size: 13px;
          color: #909399;
        }
      }
      .chart-content {
        .data-overview {
          display: flex;
          align-items: center;
          justify-content: space-around;
          padding: 20px 0;
          .overview-item {
            display: flex;
            gap: 16px;
            align-items: center;
            .overview-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 48px;
              height: 48px;
              border-radius: 12px;
              &.customer {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              }
              &.warning {
                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
              }
              &.success {
                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
              }
              .el-icon {
                font-size: 24px;
                color: #ffffff;
              }
            }
            .overview-info {
              .overview-value {
                margin-bottom: 4px;
                font-size: 24px;
                font-weight: 700;
                line-height: 1;
                color: #303133;
                &.warning {
                  color: #f56c6c;
                }
              }
              .overview-label {
                font-size: 13px;
                color: #909399;
              }
            }
          }
          .divider {
            width: 1px;
            height: 50px;
            background: #ebeef5;
          }
        }
      }
    }
  }
}

@media (width <= 768px) {
  .home {
    padding: 16px;
    .stat-cards {
      .stat-card {
        padding: 20px;
        .stat-content {
          .stat-value {
            font-size: 24px;
          }
        }
      }
    }
    .chart-section {
      .chart-card {
        .chart-content {
          .data-overview {
            flex-direction: column;
            gap: 20px;
            .divider {
              width: 100%;
              height: 1px;
            }
          }
        }
      }
    }
  }
}
</style>
