<template>
  <div class="app-container robot-home">
    <!-- 顶部状态区 -->
    <div class="status-hero">
      <div class="status-main">
        <div class="robot-icon">
          <svg viewBox="0 0 24 24" width="36" height="36" fill="currentColor">
            <path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A2.5 2.5 0 0 0 5 15.5 2.5 2.5 0 0 0 7.5 18a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 7.5 13m9 0a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5z"/>
          </svg>
        </div>
        <div class="status-info">
          <div class="status-name">{{ robotStatus.robotName }}</div>
          <div class="status-code">{{ robotStatus.robotCode }}</div>
          <div class="status-tags">
            <el-tag :type="robotStatus.onlineStatus === 'online' ? 'success' : 'info'" size="small">
              {{ robotStatus.onlineStatus === 'online' ? '在线' : '离线' }}
            </el-tag>
            <el-tag :type="workStatusType" size="small">
              {{ workStatusText }}
            </el-tag>
          </div>
        </div>
      </div>
      <div class="status-indicators">
        <div class="indicator-item">
          <span class="indicator-label">电量</span>
          <span class="indicator-value">{{ robotStatus.batteryLevel }}%</span>
          <el-progress :percentage="robotStatus.batteryLevel" :color="batteryColor" :show-text="false" style="width: 64px" />
        </div>
        <div class="indicator-item">
          <span class="indicator-label">充电</span>
          <el-tag :type="chargeTagType" size="small">{{ chargeStatusText }}</el-tag>
        </div>
        <div class="indicator-item">
          <span class="indicator-label">网络</span>
          <el-tag :type="robotStatus.networkStatus === 'normal' ? 'success' : 'danger'" size="small">
            {{ robotStatus.networkStatus === 'normal' ? '正常' : '异常' }}
          </el-tag>
        </div>
        <div class="indicator-item">
          <span class="indicator-label">IP</span>
          <span class="indicator-value mono">{{ robotStatus.ipAddress }}</span>
        </div>
        <div class="indicator-item">
          <span class="indicator-label">版本</span>
          <span class="indicator-value">{{ robotStatus.currentVersion }}</span>
        </div>
      </div>
      <div class="status-time">
        <span class="time-label">最后更新</span>
        <span class="time-value mono">{{ nowTime }}</span>
      </div>
    </div>

    <!-- 主工作区：左侧视频 + 右侧喊话+控制 -->
    <div class="main-grid">
      <!-- 左侧：视频预览 -->
      <el-card class="dashboard-card video-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">视频预览</span>
            <el-tag :type="videoConnected ? 'success' : 'info'" size="small">
              {{ videoConnected ? '播放中' : '未连接' }}
            </el-tag>
          </div>
        </template>
        <div class="video-placeholder">
          <div class="video-center">
            <svg viewBox="0 0 24 24" width="52" height="52" fill="currentColor" class="video-icon">
              <path d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z"/>
            </svg>
            <div class="video-hint-primary">等待接入视频流</div>
            <div class="video-hint-secondary">机器人摄像头实时画面将在此显示</div>
          </div>
        </div>
        <div class="video-meta">
          <span>码流：主码流</span>
          <span>分辨率：1280 × 720</span>
          <span>更新时间：{{ nowTime }}</span>
        </div>
        <div class="video-actions">
          <el-button type="primary" plain @click="refreshVideo">
            <el-icon><RefreshRight /></el-icon>刷新
          </el-button>
          <el-button type="primary" plain @click="reconnectVideo">
            <el-icon><Connection /></el-icon>重新连接
          </el-button>
          <el-button type="primary" plain @click="handleFullscreenVideo">
            <el-icon><FullScreen /></el-icon>全屏
          </el-button>
        </div>
      </el-card>

      <!-- 右侧：喊话 + 控制 -->
      <div class="right-panel">
        <!-- 远程喊话 -->
        <el-card class="dashboard-card shout-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">远程喊话</span>
            </div>
          </template>
          <div class="mic-panel">
            <!-- 麦克风大按钮 -->
            <div
              class="mic-button"
              :class="{ 'is-speaking': shoutState.speaking }"
              @click="toggleShout"
            >
              <el-icon class="mic-icon" :size="44">
                <Microphone />
              </el-icon>
            </div>
            <!-- 状态文字 -->
            <div class="mic-status" :class="statusClass">{{ shoutState.statusText }}</div>
            <!-- 说明文字 -->
            <div class="mic-desc">点击麦克风按钮开始远程喊话，再次点击结束喊话</div>
            <!-- 音量控制 -->
            <div class="volume-row">
              <el-icon :size="16" style="color: #909399"><Microphone /></el-icon>
              <span style="font-size: 12px; color: #909399; width: 36px">音量</span>
              <el-slider
                v-model="shoutState.volume"
                :min="0"
                :max="100"
                style="flex: 1"
              />
              <span style="font-size: 12px; color: #606266; width: 28px; text-align: right">{{ shoutState.volume }}</span>
            </div>
            <!-- 底部操作 -->
            <div class="shout-actions">
              <el-button :disabled="shoutState.connected" @click="connectShout">连接设备</el-button>
              <el-button
                :disabled="!shoutState.connected"
                type="danger"
                @click="stopShout"
              >结束喊话</el-button>
            </div>
          </div>
        </el-card>

        <!-- 设备控制 -->
        <el-card class="dashboard-card control-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">设备控制</span>
            </div>
          </template>
          <div class="control-grid">
            <button class="control-action is-charge" @click="handleDeviceControl('charge')">
              <span class="control-action-title">一键充电</span>
              <span class="control-action-desc">进入充电流程</span>
            </button>
            <button class="control-action is-stop" @click="handleDeviceControl('stopCharge')">
              <span class="control-action-title">停止充电</span>
              <span class="control-action-desc">停止当前充电</span>
            </button>
            <button class="control-action is-reboot" @click="confirmDanger('reboot')">
              <span class="control-action-title">重启机器人</span>
              <span class="control-action-desc">整机重启</span>
            </button>
            <button class="control-action is-shutdown" @click="confirmDanger('shutdown')">
              <span class="control-action-title">关机</span>
              <span class="control-action-desc">安全关机</span>
            </button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 统计卡片区 -->
    <div class="stat-grid">
      <el-card
        v-for="stat in stats"
        :key="stat.key"
        class="dashboard-card stat-card"
        shadow="hover"
      >
        <div class="stat-body">
          <div class="stat-icon" :style="{ color: stat.color }">
            <el-icon><component :is="stat.icon" /></el-icon>
          </div>
          <div class="stat-data">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
            <div class="stat-desc">{{ stat.desc }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 底部记录区 -->
    <div class="record-grid">
      <!-- 最近告警 -->
      <el-card class="dashboard-card record-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">最近告警</span>
            <el-button type="primary" link size="small" @click="goTo('/alarm')">查看更多</el-button>
          </div>
        </template>
        <el-table :data="recentAlarms" size="small" :max-height="220">
          <el-table-column prop="alarmTime" label="时间" width="80" />
          <el-table-column prop="alarmLevel" label="级别" width="70">
            <template #default="{ row }">
              <el-tag :type="alarmLevelType(row.alarmLevel)" size="small">{{ row.alarmLevel }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="alarmType" label="类型" width="90" />
          <el-table-column prop="description" label="描述" min-width="120" show-overflow-tooltip />
          <el-table-column prop="handleStatus" label="状态" width="70">
            <template #default="{ row }">
              <el-tag :type="row.handleStatus === '已处理' ? 'success' : 'warning'" size="small">
                {{ row.handleStatus }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 最近记录 -->
      <el-card class="dashboard-card record-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">最近记录</span>
          </div>
        </template>
        <div class="recent-list">
          <div
            v-for="item in recentRecords"
            :key="item.key"
            class="recent-item"
            @click="goToRecord(item)"
          >
            <div class="recent-left">
              <el-icon class="recent-icon" :style="{ color: item.color }">
                <component :is="item.icon" />
              </el-icon>
              <div class="recent-info">
                <div class="recent-type">{{ item.type }}</div>
                <div class="recent-summary">{{ item.summary }}</div>
              </div>
            </div>
            <div class="recent-time">{{ item.time }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted, onBeforeUnmount, markRaw } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  RefreshRight,
  Connection,
  FullScreen,
  User,
  Calendar,
  ChatDotRound,
  Bell,
  Operation,
  WarningFilled,
  Document,
  Microphone,
} from '@element-plus/icons-vue'

// ============ 时间更新 ============
const nowTime = ref('')
function updateNowTime() {
  const now = new Date()
  const h = String(now.getHours()).padStart(2, '0')
  const m = String(now.getMinutes()).padStart(2, '0')
  const s = String(now.getSeconds()).padStart(2, '0')
  const M = String(now.getMonth() + 1).padStart(2, '0')
  const d = String(now.getDate()).padStart(2, '0')
  nowTime.value = `${M}月${d}日 ${h}:${m}:${s}`
}
let timer = null
onMounted(() => {
  updateNowTime()
  timer = setInterval(updateNowTime, 1000)
})
onBeforeUnmount(() => {
  if (timer) clearInterval(timer)
})

// ============ 机器人状态 ============
const robotStatus = reactive({
  robotName: '迎宾巡逻机器人',
  robotCode: 'RB-LOCAL-001',
  onlineStatus: 'online',
  workStatus: 'standby',
  batteryLevel: 85,
  chargeStatus: 'notCharging',
  networkStatus: 'normal',
  ipAddress: '192.168.0.30',
  currentVersion: 'v1.0.0',
})

const batteryColor = computed(() => {
  if (robotStatus.batteryLevel <= 20) return '#f56c6c'
  if (robotStatus.batteryLevel <= 50) return '#e6a23c'
  return '#67c23a'
})

const workStatusType = computed(() => {
  const map = { standby: 'success', running: 'primary', error: 'danger', charging: 'warning' }
  return map[robotStatus.workStatus] || 'info'
})

const workStatusText = computed(() => {
  const map = { standby: '待机中', running: '工作中', error: '异常', charging: '充电中' }
  return map[robotStatus.workStatus] || robotStatus.workStatus
})

const chargeTagType = computed(() => {
  const map = { notCharging: 'info', charging: 'warning', charged: 'success' }
  return map[robotStatus.chargeStatus] || 'info'
})

const chargeStatusText = computed(() => {
  const map = { notCharging: '未充电', charging: '充电中', charged: '已充满' }
  return map[robotStatus.chargeStatus] || robotStatus.chargeStatus
})

// ============ 视频预览 ============
const videoConnected = ref(false)

function refreshVideo() {
  ElMessage.warning('视频流接口暂未接入')
}

function reconnectVideo() {
  ElMessage.warning('视频流接口暂未接入')
}

function handleFullscreenVideo() {
  ElMessage.warning('视频流接口暂未接入')
}

// ============ 远程喊话 ============
const shoutState = reactive({
  connected: false,
  speaking: false,
  statusText: '未连接',
  volume: 70,
  lastStartTime: '',
  lastEndTime: '',
})

const statusClass = computed(() => {
  if (shoutState.speaking) return 'status-speaking'
  if (shoutState.connected) return 'status-ready'
  return 'status-idle'
})

function connectShout() {
  shoutState.connected = true
  shoutState.statusText = '准备就绪'
  ElMessage.warning('远程喊话接口暂未接入，当前仅模拟连接状态')
}

function toggleShout() {
  if (!shoutState.connected) {
    ElMessage.warning('请先连接远程喊话通道')
    return
  }
  if (!shoutState.speaking) {
    shoutState.speaking = true
    shoutState.statusText = '正在喊话'
    shoutState.lastStartTime = nowTime.value
    ElMessage.warning('麦克风采集接口暂未接入，当前仅模拟喊话状态')
  } else {
    stopShout()
  }
}

function stopShout() {
  if (!shoutState.speaking) {
    shoutState.statusText = shoutState.connected ? '准备就绪' : '未连接'
    return
  }
  shoutState.speaking = false
  shoutState.statusText = '已结束'
  shoutState.lastEndTime = nowTime.value
  ElMessage.info('已结束远程喊话')
}

// ============ 设备控制 ============
function handleDeviceControl(action) {
  const names = {
    charge: '一键充电',
    stopCharge: '停止充电',
    reboot: '重启机器人',
    shutdown: '关机',
  }
  ElMessage.warning(`设备控制接口暂未接入：${names[action] || action}`)
}

function confirmDanger(action) {
  const msgs = {
    reboot: '此操作将重启机器人，请确认是否继续？',
    shutdown: '此操作将关闭机器人，请确认是否继续？',
  }
  const titles = {
    reboot: '确认执行“重启机器人”吗？',
    shutdown: '确认执行“关机”吗？',
  }
  ElMessageBox.confirm(msgs[action], titles[action], {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      handleDeviceControl(action)
    })
    .catch(() => {})
}

// ============ 统计数据 ============
const stats = reactive([
  { key: 'visitor', label: '今日访客', value: 12, desc: '累计登记人数', color: '#409eff', icon: markRaw(User) },
  { key: 'appointment', label: '今日预约', value: 5, desc: '待到访预约', color: '#e6a23c', icon: markRaw(Calendar) },
  { key: 'dialogue', label: '今日对话', value: 38, desc: '人机交互次数', color: '#67c23a', icon: markRaw(ChatDotRound) },
  { key: 'broadcast', label: '今日播报', value: 16, desc: '播报任务执行', color: '#909399', icon: markRaw(Microphone) },
  { key: 'alarm', label: '今日告警', value: 2, desc: '安防告警记录', color: '#f56c6c', icon: markRaw(Bell) },
  { key: 'operate', label: '今日操作', value: 9, desc: '运维操作次数', color: '#843cf7', icon: markRaw(Operation) },
])

// ============ 最近告警（相对时间） ============
const recentAlarms = reactive([
  { alarmTime: '09:23', alarmLevel: '警告', alarmType: '电量低', description: '电池电量低于20%，请及时充电', handleStatus: '待处理' },
  { alarmTime: '08:45', alarmLevel: '提醒', alarmType: '网络波动', description: '检测到网络短暂断开后恢复', handleStatus: '已处理' },
  { alarmTime: '昨天', alarmLevel: '警告', alarmType: '人员闯入', description: '检测到非授权人员进入警戒区域', handleStatus: '已处理' },
])

// ============ 最近记录 ============
const recentRecords = reactive([
  { key: 'v1', type: '访客登记', summary: '张先生 预约到访 已登记', time: '09:30', icon: markRaw(User), color: '#409eff', path: '/visitor' },
  { key: 'd1', type: '人机对话', summary: '你好，请问洗手间怎么走？', time: '09:28', icon: markRaw(ChatDotRound), color: '#67c23a', path: '/dialogue' },
  { key: 'o1', type: '运维操作', summary: '参数配置保存成功', time: '09:15', icon: markRaw(Operation), color: '#843cf7', path: '/param' },
  { key: 'b1', type: '播报任务', summary: '定时播报已完成 执行成功', time: '09:00', icon: markRaw(Microphone), color: '#909399', path: '/broadcast' },
  { key: 'a1', type: '安防告警', summary: '电量低于20% 警告级别', time: '08:45', icon: markRaw(WarningFilled), color: '#f56c6c', path: '/alarm' },
  { key: 'f1', type: '升级失败', summary: '视觉模块升级失败 v1.2.3', time: '昨天', icon: markRaw(Document), color: '#e6a23c', path: '/ota' },
])

function alarmLevelType(level) {
  const map = { '警告': 'warning', '提醒': 'info', '严重': 'danger' }
  return map[level] || 'info'
}

function goTo(path) {
  ElMessage.info(`跳转到${path}页面（待实现）`)
}

function goToRecord(item) {
  ElMessage.info(`跳转到 ${item.summary}（待实现）`)
}

// ============ 预留接口方法 ============
function loadDashboardData() {
  // TODO: 加载首页各项数据
}

loadDashboardData()
</script>

<style scoped lang="scss">
.robot-home {
  padding: 16px;
  background: #f5f7fb;
  min-height: calc(100vh - 84px);
}

/* ========== 通用卡片 ========== */
.dashboard-card {
  border-radius: 10px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  background: #fff;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

/* ========== 顶部状态区 ========== */
.status-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border-radius: 12px;
  border: 1px solid #e8eef7;
  padding: 18px 28px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.status-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.robot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #ecf5ff;
  border-radius: 14px;
  color: #409eff;
  flex-shrink: 0;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-name {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}

.status-code {
  font-size: 12px;
  color: #909399;
  font-family: 'Courier New', monospace;
  margin-bottom: 2px;
}

.status-tags {
  display: flex;
  gap: 6px;
}

.status-indicators {
  display: flex;
  align-items: center;
  gap: 20px;
}

.indicator-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.indicator-label {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
}

.indicator-value {
  font-size: 13px;
  color: #303133;
  font-weight: 500;
}

.indicator-value.mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.status-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-left: 20px;
  border-left: 1px solid #ebeef5;
}

.time-label {
  font-size: 11px;
  color: #c0c4cc;
}

.time-value {
  font-size: 12px;
  color: #606266;
}

.time-value.mono {
  font-family: 'Courier New', monospace;
}

/* ========== 主工作区 ========== */
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(390px, 0.9fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

/* ========== 视频预览 ========== */
.video-card {
  :deep(.el-card__body) {
    padding: 16px 18px 18px;
  }
}

.video-placeholder {
  background: #1a1a2e;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  min-height: 300px;
  max-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.video-center {
  text-align: center;
  color: #4a5568;
}

.video-icon {
  opacity: 0.35;
  margin-bottom: 10px;
}

.video-hint-primary {
  font-size: 15px;
  color: #718096;
  font-weight: 500;
  margin-bottom: 4px;
}

.video-hint-secondary {
  font-size: 12px;
  color: #4a5568;
}

.video-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 12px;
  color: #909399;
  margin-bottom: 12px;
}

.video-actions {
  display: flex;
  gap: 10px;

  .el-button {
    flex: 1;
    height: 34px;
    margin-left: 0;
  }
}

/* ========== 右侧面板 ========== */
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

/* ========== 远程喊话 ========== */
.shout-card,
.control-card {
  display: flex;
  flex-direction: column;
  :deep(.el-card__body) {
    flex: 1;
  }
}

.shout-card {
  flex: 1.1;
  min-height: 0;
}

.control-card {
  flex: 0.9;
  min-height: 0;
  :deep(.el-card__body) {
    padding: 18px;
  }
}

.mic-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  height: 100%;
  padding: 12px 0 18px;
}

.mic-button {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: #606266;
  border: 2px solid transparent;

  &:hover {
    background: #e6e8eb;
    color: #409eff;
    border-color: #409eff;
  }

  &.is-speaking {
    background: #409eff;
    color: #fff;
    box-shadow: 0 0 0 8px rgba(64, 158, 255, 0.15);
    animation: mic-pulse 1.5s ease-in-out infinite;

    .mic-icon {
      color: #fff;
    }
  }
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(64, 158, 255, 0.15); }
  50% { box-shadow: 0 0 0 14px rgba(64, 158, 255, 0.08); }
}

.mic-icon {
  color: #606266;
  transition: color 0.2s;
}

.mic-status {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 6px;
  transition: color 0.2s;

  &.status-speaking { color: #409eff; }
  &.status-ready { color: #67c23a; }
  &.status-idle { color: #909399; }
}

.mic-desc {
  font-size: 12px;
  color: #909399;
  text-align: center;
  margin-bottom: 4px;
}

.volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  width: 100%;
  padding: 0 8px;
}

.shout-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  width: 100%;
}

/* ========== 设备控制 ========== */
.control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
  align-content: center;
}

.control-action {
  border: 1px solid transparent;
  border-radius: 10px;
  min-height: 72px;
  padding: 12px 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  background: #f7f9fc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  }
}

.control-action-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.control-action-desc {
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.72;
}

.control-action.is-charge {
  background: #ecf5ff;
  border-color: #b3d8ff;
  color: #1f7aec;
}

.control-action.is-stop {
  background: #fdf6ec;
  border-color: #f5dab1;
  color: #b7791f;
}

.control-action.is-reboot {
  background: #fff5f5;
  border-color: #fbc4c4;
  color: #d64545;
}

.control-action.is-shutdown {
  background: #fef0f0;
  border-color: #f89898;
  color: #c92a2a;
}

/* ========== 统计卡片 ========== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.stat-card {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;

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

.stat-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

.stat-data {
  flex: 1;
  min-width: 0;
}

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

.stat-label {
  font-size: 13px;
  color: #606266;
  margin-top: 2px;
}

.stat-desc {
  font-size: 11px;
  color: #c0c4cc;
  margin-top: 2px;
}

/* ========== 底部记录区 ========== */
.record-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.record-card {
  :deep(.el-table) {
    border-radius: 6px;
    overflow: hidden;
  }
}

.recent-list {
  display: flex;
  flex-direction: column;
}

.recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background: #f9fafb;
    padding-left: 8px;
    padding-right: 8px;
  }
}

.recent-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.recent-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.recent-info {
  min-width: 0;
}

.recent-type {
  font-size: 13px;
  font-weight: 500;
  color: #303133;
}

.recent-summary {
  font-size: 12px;
  color: #909399;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.recent-time {
  font-size: 12px;
  color: #c0c4cc;
  flex-shrink: 0;
  margin-left: 8px;
}

/* ========== 响应式 ========== */
@media (max-width: 1400px) {
  .stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1200px) {
  .main-grid,
  .record-grid {
    grid-template-columns: 1fr;
  }
  .right-panel {
    height: auto;
  }
  .shout-card,
  .control-card {
    flex: none;
  }
}

@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .status-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .status-indicators {
    flex-wrap: wrap;
    gap: 12px;
  }

  .status-time {
    border-left: none;
    padding-left: 0;
    align-items: flex-start;
  }
}

</style>
