<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { formatTime } from '@/utils/format'
import { Link, Warning, Connection } from '@element-plus/icons-vue'
import { MoneyService } from '@/api/hot'
import { userNum } from '@/api/user'

const router = useRouter()

// 数据加载
const money = ref(0)
const users = ref(0)

// 模拟数据 - 场馆使用率
const venueUsage = ref([
  { name: '教学楼A', percent: 75 },
  { name: '图书馆', percent: 42 },
  { name: '体育馆', percent: 92 },
  { name: '实验楼', percent: 28 }
])

// 模拟数据 - 故障设备
const faultyDevices = ref([
  { name: '空调机组A3-1', time: '10:23' },
  { name: '闸机B2-5', time: '11:15' },
  { name: '灯光系统C1', time: '13:47' }
])

// 模拟数据 - 在线设备
const onlineDevices = ref([
  { name: '门禁系统A', status: true },
  { name: '监控摄像头B', status: true },
  { name: '智能电表C', status: false },
  { name: '消防报警器D', status: true }
])

// 进度条颜色映射
const getProgressColor = (percent) => {
  if (percent < 50) return '#67c23a'
  if (percent < 80) return '#e69c19'
  return '#f56c6c'
}

// 加载用户数量
const getUsers = async () => {
  // 加载用户数量
  const {
    data: { data }
  } = await userNum()
  users.value = data
}

// 加载营业额
const getMoney = async () => {
  // 加载营业额
  const {
    data: { data }
  } = await MoneyService()
  money.value = Number(data)
}
// 初始化数据
onMounted(async () => {
  getUsers()
  getMoney()
})
</script>
<template>
  <page-container title="首页">
    <!-- 主体看板区域 -->
    <div class="dashboard-container">
      <!-- 场馆总数 -->
      <el-card class="dashboard-card">
        <div class="card-content">
          <div class="title">场馆总数</div>
          <div class="value">
            3
            <el-icon
              style="vertical-align: middle; cursor: pointer"
              @click="router.push('/type/manage')"
            >
              <Link />
            </el-icon>
          </div>
        </div>
      </el-card>

      <!-- 交易总额 -->
      <el-card class="dashboard-card">
        <div class="card-content">
          <div class="title">交易总额 / 元</div>
          <div class="value">
            ¥{{ money.toFixed(2) }}
            <span class="time-tag">{{ formatTime(new Date()) }}</span>
          </div>
        </div>
      </el-card>

      <!-- 注册用户 -->
      <el-card class="dashboard-card">
        <div class="card-content">
          <div class="title">累计注册用户</div>
          <div class="value">{{ users }}</div>
        </div>
      </el-card>

      <!-- 场馆使用率 -->
      <el-card class="dashboard-card usage-card">
        <template #header>
          <div class="card-header">
            <span>场馆实时使用率</span>
          </div>
        </template>
        <div
          v-for="(item, index) in venueUsage"
          :key="index"
          class="usage-item"
        >
          <div class="venue-name">{{ item.name }}</div>
          <el-progress
            :percentage="item.percent"
            :color="getProgressColor(item.percent)"
            :show-text="false"
          />
          <div class="percent-text">{{ item.percent }}%</div>
        </div>
      </el-card>

      <!-- 故障设备预警 -->
      <el-card class="dashboard-card alert-card">
        <template #header>
          <div class="card-header">
            <el-icon><Warning /></el-icon>
            <span style="margin-left: 8px; color: #f56c6c">故障设备预警</span>
          </div>
        </template>
        <div
          v-for="(device, index) in faultyDevices"
          :key="index"
          class="alert-item"
        >
          <el-tag type="danger" class="device-tag">⚠️</el-tag>
          <span class="device-name">{{ device.name }}</span>
          <span class="device-time">{{ device.time }}</span>
        </div>
      </el-card>

      <!-- 设备在线状态 -->
      <el-card class="dashboard-card status-card">
        <template #header>
          <div class="card-header">
            <el-icon><Connection /></el-icon>
            <span style="margin-left: 8px">关键设备在线状态</span>
          </div>
        </template>
        <div
          v-for="(device, index) in onlineDevices"
          :key="index"
          class="status-item"
        >
          <el-switch
            v-model="device.status"
            :active-color="device.status ? '#1890ff' : '#f56c6c'"
            :inactive-color="white"
          />
          <span class="device-name">{{ device.name }}</span>
        </div>
      </el-card>
    </div>
  </page-container>
</template>
<style scoped>
.dashboard-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  padding: 20px;
}

.dashboard-card {
  flex: 1 1 30%;
  min-width: 280px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 20px;
}

.title {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
}

.time-tag {
  font-size: 12px;
  padding: 2px 6px;
  background: #f0f9eb;
  color: #67c23a;
  border-radius: 4px;
}

/* 场馆使用率样式 */
.usage-card .usage-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

.venue-name {
  width: 100px;
  font-weight: 500;
  color: #333;
}

.percent-text {
  font-size: 14px;
  color: #999;
  min-width: 40px;
  text-align: right;
}

/* 故障预警样式 */
.alert-card .alert-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.device-tag {
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.device-name {
  flex: 1;
  color: #f56c6c;
  font-weight: 500;
}

.device-time {
  font-size: 12px;
  color: #999;
}

/* 设备状态样式 */
.status-card .status-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

.device-name {
  color: #333;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
