<template>
  <div class="screen-page">
    <!-- 顶部栏 -->
    <header class="screen-header">
      <div class="header-left">CNC机床数据采集系统</div>
      <div class="header-right">
        <el-select v-model="filterWorkshop" placeholder="车间" size="small" style="width:120px;margin-right:8px" @change="refreshAll">
          <el-option label="全部" value="" />
          <el-option v-for="w in workshopOptions" :key="w" :label="w" :value="w" />
        </el-select>
        <el-select v-model="filterBrand" placeholder="品牌" size="small" style="width:120px;margin-right:16px" @change="refreshAll">
          <el-option label="全部" value="" />
          <el-option v-for="b in brandOptions" :key="b" :label="b" :value="b" />
        </el-select>
        <span class="header-time">{{ currentTime }}</span>
      </div>
    </header>

    <!-- 第一行：统计数字卡片 -->
    <div class="stat-row">
      <div class="stat-card" v-for="s in statCards" :key="s.key">
        <div class="stat-label">{{ s.label }}</div>
        <div class="stat-value" :style="{ color: s.color }">{{ s.value }}</div>
        <div class="stat-sub" v-if="s.sub">{{ s.sub }}</div>
      </div>
    </div>

    <!-- 第二行：图表区 -->
    <div class="chart-row">
      <div class="chart-card">
        <div class="chart-title">各车间产量</div>
        <div ref="barChartRef" class="chart-container"></div>
      </div>
      <div class="chart-card">
        <div class="chart-title">产量趋势(7天)</div>
        <div ref="lineChartRef" class="chart-container"></div>
      </div>
    </div>

    <!-- 第三行：排行+状态 -->
    <div class="bottom-row">
      <div class="rank-card">
        <div class="chart-title">机床产量排行</div>
        <div class="rank-list">
          <div v-if="machineRank.length === 0" class="no-data">暂无数据</div>
          <div v-for="item in machineRank" :key="item.rank" class="rank-item">
            <span class="rank-num" :class="{ 'rank-top': item.rank <= 3 }">{{ item.rank }}</span>
            <span class="rank-name">{{ item.machineName }}</span>
            <span class="rank-value">{{ item.quantity }}</span>
          </div>
        </div>
      </div>
      <div class="rank-card">
        <div class="chart-title">工人产量排行</div>
        <div class="rank-list">
          <div v-if="workerRank.length === 0" class="no-data">暂无数据</div>
          <div v-for="item in workerRank" :key="item.rank" class="rank-item">
            <span class="rank-num" :class="{ 'rank-top': item.rank <= 3 }">{{ item.rank }}</span>
            <span class="rank-name">{{ item.workerName }}</span>
            <span class="rank-value">{{ item.quantity }}</span>
          </div>
        </div>
      </div>
      <div class="status-card">
        <div class="chart-title">机床状态总览</div>
        <div class="status-grid">
          <div v-if="machineStatus.length === 0" class="no-data">暂无机床</div>
          <div v-for="m in machineStatus" :key="m.machineId" class="status-block" :class="m.isOnline ? 'online' : 'offline'" :title="m.machineName"></div>
        </div>
        <div class="status-legend">
          <span class="legend-item"><span class="legend-block online"></span> 在线</span>
          <span class="legend-item"><span class="legend-block offline"></span> 离线</span>
        </div>
      </div>
    </div>
  </div>
</template>
