<template>
  <div class="index-container no-background-container">
    <!-- 顶部数据概览 -->
    <el-row :gutter="20">
      <el-col :lg="6" :md="12" :sm="24" :xs="24">
        <vab-card shadow="hover" class="data-card">
          <div class="data-icon bg-primary">
            <vab-icon style="font-size: 24px; color: #fff;" icon="building-4-line" />
          </div>
          <div class="data-content">
            <div class="data-value">12</div>
            <div class="data-label">公寓楼宇</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xs="24">
        <vab-card shadow="hover" class="data-card">
          <div class="data-icon bg-success">
            <vab-icon style="font-size: 24px; color: #fff;" icon="user-heart-line" />
          </div>
          <div class="data-content">
            <div class="data-value">2,450</div>
            <div class="data-label">入住宿生</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xs="24">
        <vab-card shadow="hover" class="data-card">
          <div class="data-icon bg-warning">
            <vab-icon style="font-size: 24px; color: #fff;" icon="tools-line" />
          </div>
          <div class="data-content">
            <div class="data-value">15</div>
            <div class="data-label">待办报修</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xs="24">
        <vab-card shadow="hover" class="data-card">
          <div class="data-icon bg-danger">
            <vab-icon style="font-size: 24px; color: #fff;" icon="alarm-warning-line" />
          </div>
          <div class="data-content">
            <div class="data-value">3</div>
            <div class="data-label">今日预警</div>
          </div>
        </vab-card>
      </el-col>
    </el-row>

    <!-- 核心功能区 -->
    <el-row :gutter="20">
      <!-- 快捷导航 -->
      <el-col :lg="16" :md="24" :sm="24" :xs="24">
        <recommendation />
      </el-col>
      <!-- 待办事项 -->
      <el-col :lg="8" :md="24" :sm="24" :xs="24">
        <pending />
      </el-col>
    </el-row>

    <!-- 图表统计区 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :lg="12" :md="24" :sm="24" :xs="24">
        <develop />
      </el-col>
      <el-col :lg="12" :md="24" :sm="24" :xs="24">
        <authorization />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { random } from 'lodash-es'
import Pending from './vabAutoComponents/Pending.vue'
import Recommendation from './vabAutoComponents/Recommendation.vue'
import Develop from './vabAutoComponents/Develop.vue'
import Authorization from './vabAutoComponents/Authorization.vue'

defineOptions({
  name: 'Index',
})
</script>

<style lang="scss" scoped>
.index-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  .data-card {
    margin-bottom: 20px;
    :deep(.el-card__body) {
      display: flex;
      align-items: center;
      padding: 20px;
    }

    .data-icon {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      
      .vab-icon {
        font-size: 30px;
        color: #fff;
      }

      &.bg-primary { background: linear-gradient(135deg, #003F88, #4d79ac); }
      &.bg-success { background: linear-gradient(135deg, #67c23a, #95d475); }
      &.bg-warning { background: linear-gradient(135deg, #e6a23c, #eebe77); }
      &.bg-danger { background: linear-gradient(135deg, #f56c6c, #f89898); }
    }

    .data-content {
      .data-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        line-height: 1.2;
      }
      .data-label {
        font-size: 14px;
        color: #909399;
        margin-top: 5px;
      }
    }
  }
}
</style>
