<template>
  <div class="page-console">
    <!-- 顶部头部栏：标题 + 自动投递设置 + 快速统计 + 设置按钮 -->
    <div class="console-header">
      <div class="header-left">
        <div class="header-title-section">
          <h2 class="page-title">控制台</h2>
          <!-- 自动投递设置摘要 -->
          <div class="delivery-settings-summary">
            <div class="summary-item">
              <span class="summary-label">自动投递：</span>
              <span :class="['summary-value', deliveryConfig.autoDelivery ? 'enabled' : 'disabled']">
                {{ deliveryConfig.autoDelivery ? '已开启' : '已关闭' }}
              </span>
            </div>
            <div class="summary-item">
              <span class="summary-label">投递时间：</span>
              <span class="summary-value">{{ deliveryConfig.startTime || '09:00' }} - {{ deliveryConfig.endTime ||
                '18:00' }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">仅工作日：</span>
              <span class="summary-value">{{ deliveryConfig.workdaysOnly ? '是' : '否' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="header-right">
        <!-- 快速统计 -->
        <div class="quick-stats">
          <div class="quick-stat-item">
            <span class="stat-label">今日投递</span>
            <span class="stat-value">{{ deliveryStats.todayCount || 0 }}</span>
          </div>
          <div class="quick-stat-item">
            <span class="stat-label">今日找工作</span>
            <span class="stat-value">{{ todayJobSearchCount || 0 }}</span>
          </div>
          <div class="quick-stat-item">
            <span class="stat-label">今日沟通</span>
            <span class="stat-value">{{ todayChatCount || 0 }}</span>
          </div>
          <div class="quick-stat-item highlight">
            <span class="stat-label">执行中任务</span>
            <span class="stat-value">{{ currentActivity ? 1 : 0 }}</span>
          </div>
        </div>

        <!-- 设置按钮 -->
        <button class="btn-settings" @click="toggleSettings">
          <span class="settings-icon">⚙️</span>
          <span class="settings-text">设置</span>
        </button>
      </div>
    </div>

    <!-- 设置弹窗 -->
    <div v-if="showSettings" class="settings-modal" @click.self="toggleSettings">
      <div class="settings-modal-content">
        <div class="modal-header">
          <h3 class="modal-title">自动投递设置</h3>
          <button class="btn-close" @click="toggleSettings">×</button>
        </div>
        <div class="modal-body">
          <DeliverySettings :config="deliveryConfig" @update-config="handleUpdateConfig" />
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="toggleSettings">取消</button>
          <button class="btn btn-primary" @click="handleSaveConfig">保存</button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="console-content">
      <!-- 左侧：系统状态和任务信息 -->
      <div class="content-left">
        <!-- 系统状态卡片 -->
        <div class="status-card">
          <div class="card-header">
            <h3 class="card-title">系统状态</h3>
          </div>
          <div class="status-grid">
            <!-- 用户登录状态 -->
            <div class="status-item">
              <div class="status-label">用户登录</div>
              <div class="status-value">
                <span :class="['status-badge', isLoggedIn ? 'status-success' : 'status-error']">
                  {{ isLoggedIn ? '已登录' : '未登录' }}
                </span>
              </div>
              <div v-if="isLoggedIn && userName" class="status-detail">{{ userName }}</div>
              <div v-if="isLoggedIn && remainingDays !== null" class="status-detail">
                剩余: <span :class="remainingDays <= 3 ? 'text-warning' : ''">{{ remainingDays }}天</span>
              </div>
              <div class="status-actions">
                <button class="btn-action" @click="handleReloadBrowser" title="重新加载浏览器页面">
                  🔄 重新加载
                </button>
                <button class="btn-action" @click="handleShowBrowser" title="显示浏览器窗口">
                  🖥️ 显示浏览器
                </button>
              </div>
            </div>

            <!-- 平台登录状态 -->
            <div class="status-item">
              <div class="status-label">平台登录</div>
              <div class="status-detail">{{ displayPlatform }}</div>
              <div class="status-detail">
                <span :class="['status-badge', isPlatformLoggedIn ? 'status-success' : 'status-warning']">
                  {{ isPlatformLoggedIn ? '已登录' : '未登录' }}
                </span>
              </div>
            </div>

            <!-- 设备信息 -->
            <div class="status-item">
              <div class="status-label">设备信息</div>
              <div class="status-detail">SN: {{ snCode || '-' }}</div>
              <div class="status-detail">ID: {{ deviceId || '-' }}</div>
            </div>

            <!-- 系统资源 -->
            <div class="status-item">
              <div class="status-label">系统资源</div>
              <div class="status-detail">运行: {{ uptime }}</div>
              <div class="status-detail">CPU: {{ cpuUsage }}</div>
              <div class="status-detail">内存: {{ memUsage }}</div>
            </div>
          </div>
        </div>

        <!-- 任务信息卡片 -->
        <div class="task-card">
          <div class="card-header">
            <h3 class="card-title">任务信息</h3>
          </div>

          <!-- 设备工作状态（新方案：直接显示服务端格式化好的文本） -->
          <div v-if="displayText" class="device-work-status">
            <div class="status-header">
              <span class="status-label">设备工作状态</span>
            </div>
            <div class="status-content">
              <div class="status-text">{{ displayText }}</div>
            </div>
          </div>

          <!-- 当前活动（兼容显示） -->
          <div v-if="currentActivity" class="current-activity">
            <div class="task-header">
              <span class="task-label">当前活动</span>
              <span :class="['status-badge', 'status-info']">{{ currentActivity.status === 'running' ? '执行中' :
                currentActivity.status === 'completed' ? '已完成' : '未知' }}</span>
            </div>
            <div class="task-content">
              <div class="task-name">{{ currentActivity.description || currentActivity.name || '-' }}</div>
              <div v-if="currentActivity.progress !== null && currentActivity.progress !== undefined"
                class="task-progress">
                <div class="progress-bar">
                  <div class="progress-fill" :style="{ width: currentActivity.progress + '%' }"></div>
                </div>
                <span class="progress-text">{{ currentActivity.progress }}%</span>
              </div>
              <div v-if="currentActivity.currentStep" class="task-step">{{ currentActivity.currentStep }}</div>
            </div>
          </div>
          <div v-else-if="!displayText" class="no-task">暂无执行中的活动</div>

          <!-- 待执行队列 -->
          <div v-if="pendingQueue" class="pending-queue">
            <div class="task-header">
              <span class="task-label">待执行队列</span>
              <span class="task-count">{{ pendingQueue.totalCount || 0 }}个</span>
            </div>
            <div class="queue-content">
              <div class="queue-count">待执行: {{ pendingQueue.totalCount || 0 }}个任务</div>
            </div>
          </div>

          <!-- 下次任务执行时间（使用服务端格式化好的文本） -->
          <div v-if="nextExecuteTimeText" class="next-task-time">
            <div class="task-header">
              <span class="task-label">下次执行时间</span>
            </div>
            <div class="time-content">{{ nextExecuteTimeText }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧：二维码和详细统计 -->
      <div class="content-right">
        <!-- 二维码卡片 -->
        <div class="qr-card">
          <div class="card-header">
            <h3 class="card-title">登录二维码</h3>
            <button v-if="!isPlatformLoggedIn" class="btn-qr-refresh" @click="handleGetQrCode">
              获取二维码
            </button>
          </div>
          <div class="qr-content">
            <div v-if="!qrCodeUrl" class="qr-placeholder">
              <p>点击"获取二维码"按钮获取二维码</p>
            </div>
            <div v-else class="qr-display">
              <img :src="qrCodeUrl" alt="登录二维码" class="qr-image">
              <div class="qr-info">
                <p>请使用微信扫描二维码登录</p>
                <p v-if="qrCodeCountdownActive && qrCodeCountdown > 0" class="qr-countdown">
                  {{ qrCodeCountdown }}秒后自动刷新
                </p>
                <p v-if="qrCodeExpired" class="qr-expired">
                  二维码已过期，请重新获取
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- 近7天投递趋势图表 -->
        <div class="trend-chart-card">
          <div class="card-header">
            <h3 class="card-title">近7天投递趋势</h3>
          </div>
          <div class="chart-content">
            <DeliveryTrendChart :data="trendData" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DeliverySettings from '../components/DeliverySettings.vue';
import DeliveryTrendChart from '../components/DeliveryTrendChart.vue';
import { mapState, mapActions } from 'vuex';
import applyRecordsAPI from '../api/apply_records.js';
import taskMixin from '../mixins/taskMixin.js';
import eventListenerMixin from '../mixins/eventListenerMixin.js';
import systemInfoMixin from '../mixins/systemInfoMixin.js';
import qrCodeMixin from '../mixins/qrCodeMixin.js';
import mqttMixin from '../mixins/mqttMixin.js';
import logMixin from '../mixins/logMixin.js';
let glTaskStats = null
export default {
  name: 'ConsolePage',
  mixins: [taskMixin, eventListenerMixin, systemInfoMixin, qrCodeMixin, mqttMixin, logMixin],
  components: {
    DeliverySettings,
    DeliveryTrendChart
  },
  data() {
    return {
      showSettings: false,
      trendData: []
    };
  },
  computed: {
    ...mapState('auth', ['isLoggedIn', 'userName', 'remainingDays', 'snCode', 'platformType']),
    ...mapState('task', ['displayText', 'nextExecuteTimeText', 'currentActivity', 'pendingQueue', 'deviceStatus', 'taskStats']),
    ...mapState('delivery', ['deliveryStats', 'deliveryConfig']),
    ...mapState('platform', ['isPlatformLoggedIn']),
    ...mapState('qrCode', ['qrCodeUrl', 'qrCodeCountdownActive', 'qrCodeCountdown', 'qrCodeExpired']),
    ...mapState('system', ['deviceId', 'uptime', 'cpuUsage', 'memUsage']),

    // 今日找工作数量（今日完成的任务数）
    todayJobSearchCount() {
      return this.taskStats ? this.taskStats.todayCount : 0;
    },

    // 今日沟通数量（暂时使用 0，后续可以添加沟通统计接口）
    todayChatCount() {
      return 0; // TODO: 后续添加沟通统计接口
    },

    // 直接从 auth.platformType 转换显示名称，避免数据冗余
    displayPlatform() {
      if (this.platformType) {
        const platformNames = {
          'boss': 'BOSS直聘',
          'liepin': '猎聘',
          'zhilian': '智联招聘',
          '1': 'BOSS直聘'
        };
        return platformNames[this.platformType] || this.platformType;
      }
      return '-';
    },
  },
  watch: {
   
  },
  mounted() {
    // 加载趋势数据
    this.loadTrendData();
    // 加载投递配置
    this.loadDeliveryConfig();
    // 加载投递统计
    this.loadDeliveryStats();
    // 加载任务统计


    this.autoLoadTaskStats()


    // 确保事件监听器已设置（通过 eventListenerMixin）
    if (this.setupEventListeners) {
      this.setupEventListeners();
    }

    // 主动查询MQTT连接状态，确保UI显示正确
    this.$nextTick(async () => {
      if (this.checkMQTTStatus) {
        await this.checkMQTTStatus();
        console.log('[ConsolePage] MQTT状态已查询');
      }
    });

    // 如果已有二维码，启动自动刷新
    if (this.qrCodeUrl && !this.isPlatformLoggedIn) {
      this.startQrCodeAutoRefresh();
    }

    // 添加调试信息
    this.$nextTick(() => {
      console.log('[ConsolePage] 页面已挂载，设备工作状态:', {
        displayText: this.displayText,
        nextExecuteTimeText: this.nextExecuteTimeText,
        currentActivity: this.currentActivity,
        pendingQueue: this.pendingQueue,
        deviceStatus: this.deviceStatus,
        isLoggedIn: this.isLoggedIn,
        snCode: this.snCode,
        storeState: this.$store ? this.$store.state.task : null
      });
    });
  },
  beforeUnmount() {
    // 组件销毁时清理二维码定时器
    if (this.stopQrCodeAutoRefresh) {
      this.stopQrCodeAutoRefresh();
    }
  },
  methods: {
    ...mapActions('delivery', ['updateDeliveryConfig', 'saveDeliveryConfig']),
    formatTaskTime(time) {
      if (!time) return '-';
      try {
        const date = new Date(time);
        const now = new Date();
        const diff = date.getTime() - now.getTime();

        if (diff < 0) {
          return '已过期';
        }

        const minutes = Math.floor(diff / (1000 * 60));
        const hours = Math.floor(minutes / 60);
        const days = Math.floor(hours / 24);

        if (days > 0) {
          return `${days}天后 (${date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })})`;
        } else if (hours > 0) {
          return `${hours}小时后 (${date.toLocaleString('zh-CN', { hour: '2-digit', minute: '2-digit' })})`;
        } else if (minutes > 0) {
          return `${minutes}分钟后 (${date.toLocaleString('zh-CN', { hour: '2-digit', minute: '2-digit' })})`;
        } else {
          return '即将执行';
        }
      } catch (error) {
        return time;
      }
    },
    toggleSettings() {
      this.showSettings = !this.showSettings;
    },
    async loadTrendData() {
      try {
        // 获取 snCode 用于请求
        const snCode = this.$store?.state?.auth?.snCode;
        const result = await applyRecordsAPI.getTrendData(snCode);

        // 检查响应格式：code === 0 表示成功
        if (result && result.code === 0 && result.data) {
          // 如果后端返回的是数组格式
          if (Array.isArray(result.data)) {
            this.trendData = result.data;
          } else if (result.data.trendData) {
            this.trendData = result.data.trendData;
          } else {
            // 如果没有数据，生成7天的空数据
            this.generateEmptyTrendData();
          }
        } else {
          this.generateEmptyTrendData();
        }
      } catch (error) {
        console.error('加载趋势数据失败:', error);
        this.generateEmptyTrendData();
      }
    },
    generateEmptyTrendData() {
      const today = new Date();
      this.trendData = Array.from({ length: 7 }, (_, i) => {
        const date = new Date(today);
        date.setDate(date.getDate() - (6 - i));
        return {
          date: this.formatDate(date),
          value: 0
        };
      });
    },
    formatDate(date) {
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${month}/${day}`;
    },
    handleUpdateConfig({ key, value }) {
      this.updateDeliveryConfig({ key, value });
    },
    async handleSaveConfig() {
      try {
        const result = await this.saveDeliveryConfig();
        if (result && result.success) {
          this.showSettings = false;
          this.addLog('success', '投递配置已保存');
        } else {
          this.addLog('error', result?.error || '保存配置失败');
        }
      } catch (error) {
        console.error('保存配置失败:', error);
        this.addLog('error', `保存配置失败: ${error.message}`);
      }
    },
    async loadDeliveryConfig() {
      try {
        await this.$store.dispatch('delivery/loadDeliveryConfig');
      } catch (error) {
        console.error('加载投递配置失败:', error);
      }
    },
    async loadDeliveryStats() {
      try {
        await this.$store.dispatch('delivery/loadDeliveryStats');
      } catch (error) {
        console.error('加载投递统计失败:', error);
      }
    },
    async loadTaskStats() {
      try {
        await this.$store.dispatch('task/loadTaskStats');
      } catch (error) {
        console.error('加载任务统计失败:', error);
      }
    },
    async autoLoadTaskStats() {


      this.loadTaskStats()

      // 60秒调用一下保持是最新的
      if (!glTaskStats) {
        glTaskStats = setInterval(() => {
          this.loadTaskStats()
        }, 60 * 1000)
      }

    },
    async handleGetQrCode() {
      const success = await this.getQrCode();
      if (success) {
        // 获取成功后启动自动刷新
        this.startQrCodeAutoRefresh();
      }
    },
    async handleReloadBrowser() {
      try {
        const result = await window.electronAPI.invoke('browser-window:reload');
        if (result && result.success) {
          this.addLog('success', '浏览器页面已重新加载');
        } else {
          this.addLog('error', result?.error || '重新加载失败');
        }
      } catch (error) {
        console.error('重新加载浏览器失败:', error);
        this.addLog('error', `重新加载失败: ${error.message}`);
      }
    },
    async handleShowBrowser() {
      try {
        const result = await window.electronAPI.invoke('browser-window:show');
        if (result && result.success) {
          this.addLog('success', '浏览器窗口已显示');
        } else {
          this.addLog('error', result?.error || '显示浏览器失败');
        }
      } catch (error) {
        console.error('显示浏览器失败:', error);
        this.addLog('error', `显示浏览器失败: ${error.message}`);
      }
    }
  },
  beforeDestroy() {
    if (glTaskStats) {
      clearInterval(glTaskStats)
      glTaskStats = null
    }
  }
};
</script>

<style lang="less" scoped>
.page-console {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  background: #f5f5f5;
}

/* 头部栏 */
.console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.header-left {
  flex: 1;
  display: flex;
  align-items: center;
}

.header-title-section {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;

  .page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
  }
}

/* 自动投递设置摘要 */
.delivery-settings-summary {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;

  .summary-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;

    .summary-label {
      color: #666;
      white-space: nowrap;
    }

    .summary-value {
      font-weight: 500;
      white-space: nowrap;

      &.enabled {
        color: #4CAF50;
      }

      &.disabled {
        color: #999;
      }
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.quick-stats {
  display: flex;
  gap: 20px;
  align-items: center;
}

.quick-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 15px;
  background: #f9f9f9;
  border-radius: 6px;
  min-width: 60px;

  &.highlight {
    background: #e8f5e9;
  }

  .stat-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
  }

  .stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #4CAF50;
  }
}

.btn-settings {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background: #45a049;
  }

  .settings-icon {
    font-size: 16px;
  }
}

/* 设置弹窗 */
.settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.settings-modal-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;

  .modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }

  .btn-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      background: #f5f5f5;
      color: #333;
    }
  }
}

.modal-body {
  padding: 20px;

  .settings-section {
    margin-bottom: 0;

    .page-title {
      display: none; // 隐藏重复的标题，因为弹窗头部已经有了
    }

    .settings-form-horizontal {
      border: none;
      box-shadow: none;
      padding: 0;
    }

    .form-row {
      flex-direction: column;
      align-items: stretch;
      gap: 15px;
    }

    .form-item {
      justify-content: space-between;
      width: 100%;

      .form-label {
        min-width: 120px;
      }

      .form-input {
        flex: 1;
        max-width: 300px;
      }
    }
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;

  .btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;

    &.btn-secondary {
      background: #f5f5f5;
      color: #666;

      &:hover {
        background: #e0e0e0;
      }
    }

    &.btn-primary {
      background: #4CAF50;
      color: #fff;

      &:hover {
        background: #45a049;
      }
    }
  }
}

/* 主要内容区域 */
.console-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

.content-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 卡片通用样式 */
.status-card,
.task-card,
.qr-card,
.stats-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;

  .card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
}

/* 系统状态 */
.status-card {
  display: flex;
  flex-direction: column;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 20px;
  flex: 1;
}

.status-item {
  .status-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
  }

  .status-value {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
  }

  .status-detail {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
  }

  .status-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
  }

  .btn-action {
    padding: 4px 10px;
    font-size: 11px;
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;

    &:hover {
      background: #e0e0e0;
      border-color: #ccc;
      color: #333;
    }

    &:active {
      transform: scale(0.98);
    }
  }
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;

  &.status-success {
    background: #e8f5e9;
    color: #4caf50;
  }

  &.status-error {
    background: #ffebee;
    color: #f44336;
  }

  &.status-warning {
    background: #fff3e0;
    color: #ff9800;
  }

  &.status-info {
    background: #e3f2fd;
    color: #2196f3;
  }
}

.text-warning {
  color: #ff9800;
}

/* 任务信息 */
.task-card {
  .card-body {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .mqtt-topic-info {
      font-size: 12px;
      color: #666;

      .topic-label {
        margin-right: 5px;
      }

      .topic-value {
        color: #2196f3;
        font-family: monospace;
      }
    }
  }
}

.current-task,
.pending-tasks,
.next-task-time,
.device-work-status,
.current-activity,
.pending-queue {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;

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

.device-work-status {
  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .status-label {
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
  }

  .status-content {
    .status-text {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
      word-break: break-word;
    }
  }
}

.current-activity {
  .task-content {
    .task-name {
      font-size: 15px;
      font-weight: 500;
      color: #333;
      margin-bottom: 10px;
    }
  }
}

.pending-queue {
  .queue-content {
    .queue-count {
      font-size: 14px;
      color: #666;
    }
  }
}

.next-task-time {
  .time-content {
    color: #666;
    font-size: 14px;
  }
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;

  .task-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }

  .task-count {
    font-size: 12px;
    color: #999;
  }
}

.task-content {
  .task-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
  }

  .task-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;

    .progress-bar {
      flex: 1;
      height: 6px;
      background: #e0e0e0;
      border-radius: 3px;
      overflow: hidden;

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #4caf50, #8bc34a);
        transition: width 0.3s ease;
      }
    }

    .progress-text {
      font-size: 12px;
      color: #666;
      min-width: 35px;
    }
  }

  .task-step {
    font-size: 12px;
    color: #666;
  }
}

.pending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pending-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f9f9f9;
  border-radius: 4px;

  .pending-name {
    font-size: 13px;
    color: #333;
  }
}

.no-task {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 13px;
}

/* 二维码卡片 */
.qr-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* 允许flex子元素收缩 */

  .btn-qr-refresh {
    padding: 6px 12px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;

    &:hover {
      background: #45a049;
    }
  }
}

.qr-content {
  padding: 20px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.qr-placeholder {
  padding: 40px 20px;
  color: #999;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* 趋势图表卡片 */
.trend-chart-card {
  .chart-content {
    padding: 20px;
  }
}

.qr-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;

  .qr-image {
    max-width: 100%;
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .qr-info {
    margin-top: 12px;
    font-size: 12px;
    color: #666;
    text-align: center;

    p {
      margin: 4px 0;
    }

    .qr-countdown {
      color: #2196f3;
      font-weight: 600;
    }

    .qr-expired {
      color: #f44336;
      font-weight: 600;
    }
  }
}

/* 统计卡片 */
.stats-list {
  padding: 20px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;

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

  &.highlight {
    background: #f9f9f9;
    margin: 0 -20px;
    padding: 12px 20px;
    border-radius: 0;
  }

  .stat-row-label {
    font-size: 14px;
    color: #666;
  }

  .stat-row-value {
    font-size: 18px;
    font-weight: 600;
    color: #4CAF50;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .console-content {
    grid-template-columns: 1fr;
  }

  .status-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .console-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
  }

  .delivery-settings-summary {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .console-header {
    padding: 12px 15px;
  }

  .header-left {
    width: 100%;

    .page-title {
      font-size: 20px;
    }
  }

  .delivery-settings-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .quick-stats {
    flex-wrap: wrap;
    gap: 10px;
  }

  .header-right {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .console-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .header-right {
    flex-direction: column;
    gap: 15px;
  }

  .quick-stats {
    justify-content: space-around;
    width: 100%;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }
}
</style>
