<template>
  <div class="app-container home">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item>
        <span class="breadcrumb-dot active"></span>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="breadcrumb-dot"></span>
        设备管理
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 数据总览卡片 -->
    <el-card class="data-overview-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">数据总览</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
          <div class="data-item">
            <div class="data-icon" :style="{ backgroundColor: item.color }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="data-content">
              <div class="data-value">{{ item.value }}</div>
              <div class="data-label">{{ item.label }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 设备统计卡片 -->
    <el-row :gutter="20" class="device-stats">
      <el-col :span="12">
        <el-card class="device-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">蓝牙设备</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in bluetoothStats" :key="index">
              <div class="device-item">
                <div class="device-value">{{ item.value }}</div>
                <div class="device-label">{{ item.label }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="device-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">4G设备</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in g4Stats" :key="index">
              <div class="device-item">
                <div class="device-value">{{ item.value }}</div>
                <div class="device-label">{{ item.label }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 地区分布图表 -->
    <el-card class="region-chart-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">设备使用频次地区分布</span>
          <div class="chart-controls">
            <el-select v-model="selectedMonth" placeholder="选择月份" size="small">
              <el-option label="7月" value="7"></el-option>
              <el-option label="8月" value="8"></el-option>
              <el-option label="9月" value="9"></el-option>
            </el-select>
            <el-select v-model="selectedYear" placeholder="选择年份" size="small">
              <el-option label="2025年" value="2025"></el-option>
              <el-option label="2024年" value="2024"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <div class="chart-container">
        <div class="chart-bars">
          <div 
            v-for="(region, index) in regionData" 
            :key="index" 
            class="chart-bar-item"
          >
            <div class="bar-label">{{ region.name }}</div>
            <div class="bar-container">
              <div 
                class="bar" 
                :style="{ 
                  height: (region.value / maxValue) * 200 + 'px',
                  backgroundColor: region.color 
                }"
              ></div>
            </div>
            <div class="bar-value">{{ region.value }}</div>
          </div>
        </div>
        <div class="chart-nav">
          <el-button type="text" size="small">
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref, computed } from 'vue'
import { 
  Monitor, 
  Connection, 
  Warning, 
  Plus, 
  Bell,
  ArrowRight 
} from '@element-plus/icons-vue'

// 数据总览
const dataOverview = ref([
  { label: '设备总量', value: '1,234', icon: 'Monitor', color: '#409eff' },
  { label: '在线设备', value: '987', icon: 'Connection', color: '#67c23a' },
  { label: '异常设备', value: '45', icon: 'Warning', color: '#e6a23c' },
  { label: '新增绑定', value: '23', icon: 'Plus', color: '#f56c6c' },
  { label: '设备报警', value: '12', icon: 'Bell', color: '#909399' }
])

// 蓝牙设备统计
const bluetoothStats = ref([
  { label: '总量', value: '856' },
  { label: '在线', value: '723' },
  { label: '新增绑定', value: '15' }
])

// 4G设备统计
const g4Stats = ref([
  { label: '总量', value: '378' },
  { label: '在线', value: '264' },
  { label: '新增绑定', value: '8' }
])

// 地区分布数据
const regionData = ref([
  { name: '北京', value: 156, color: '#409eff' },
  { name: '上海', value: 134, color: '#67c23a' },
  { name: '杭州', value: 98, color: '#e6a23c' }
])

// 计算最大值用于图表比例
const maxValue = computed(() => {
  return Math.max(...regionData.value.map(item => item.value))
})

// 选择器数据
const selectedMonth = ref('7')
const selectedYear = ref('2025')
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .breadcrumb {
    margin-bottom: 20px;
    padding: 10px 0;
    
    .breadcrumb-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 8px;
      background-color: #c0c4cc;
      
      &.active {
        background-color: #409eff;
      }
    }
  }

  .data-overview-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }

    .data-item {
      display: flex;
      align-items: center;
      padding: 16px;
      background: #fafafa;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .data-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        color: white;
        font-size: 20px;
      }

      .data-content {
        flex: 1;

        .data-value {
          font-size: 24px;
          font-weight: 700;
          color: #303133;
          line-height: 1.2;
        }

        .data-label {
          font-size: 14px;
          color: #909399;
          margin-top: 4px;
        }
      }
    }
  }

  .device-stats {
    margin-bottom: 20px;

    .device-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }

      .device-item {
        text-align: center;
        padding: 20px 0;

        .device-value {
          font-size: 28px;
          font-weight: 700;
          color: #409eff;
          line-height: 1.2;
        }

        .device-label {
          font-size: 14px;
          color: #909399;
          margin-top: 8px;
        }
      }
    }
  }

  .region-chart-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }

      .chart-controls {
        display: flex;
        gap: 12px;
      }
    }

    .chart-container {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 20px 0;
      min-height: 250px;

      .chart-bars {
        display: flex;
        align-items: flex-end;
        gap: 40px;
        flex: 1;

        .chart-bar-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;

          .bar-label {
            font-size: 14px;
            color: #606266;
            font-weight: 500;
          }

          .bar-container {
            width: 60px;
            height: 200px;
            display: flex;
            align-items: flex-end;
            position: relative;

            .bar {
              width: 100%;
              border-radius: 4px 4px 0 0;
              transition: all 0.3s ease;
              position: relative;

              &:hover {
                transform: scaleY(1.05);
              }
            }
          }

          .bar-value {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
          }
        }
      }

      .chart-nav {
        display: flex;
        align-items: center;
        padding-left: 20px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .home {
    padding: 10px;

    .data-overview-card {
      .data-item {
        margin-bottom: 10px;
      }
    }

    .device-stats {
      .el-col {
        margin-bottom: 20px;
      }
    }

    .region-chart-card {
      .chart-container {
        .chart-bars {
          gap: 20px;

          .chart-bar-item {
            .bar-container {
              width: 40px;
            }
          }
        }
      }
    }
  }
}
</style>
