<template>
  <div class="energy-page">
    <!-- 第一行：状态Tab (实时状态、时序状态、稼动率、能耗效率) + 搜索 -->
    <div class="top-toolbar">
      <div class="status-tabs">
        <div 
          v-for="tab in statusTabs" 
          :key="tab.key"
          :class="['status-tab', { active: currentStatus === tab.key }]"
          @click="currentStatus = tab.key"
        >
          {{ tab.label }}
        </div>
      </div>
    </div>

    <!-- 筛选栏（仅实时状态显示） -->
    <div v-if="currentStatus === 'realtime'" class="filter-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="输入设备名称搜索"
        clearable
        size="default"
        style="width: 220px; margin-right: 16px;"
        @keyup.enter="doSearch"
        @clear="doSearch"
      />
      <div class="filter-tags">
        <span :class="['tag-item', 'black', { active: !runStatusFilter }]" @click="filterByRunStatus('')"><i></i>全部{{ totalCounts.all }}台</span>
        <span :class="['tag-item', 'red', { active: runStatusFilter === '1' }]" @click="filterByRunStatus('1')"><i></i>停机:{{ totalCounts.stop }}台</span>
        <span :class="['tag-item', 'green', { active: runStatusFilter === '2' }]" @click="filterByRunStatus('2')"><i></i>待机:{{ totalCounts.standby }}台</span>
        <span :class="['tag-item', 'blue', { active: runStatusFilter === '3' }]" @click="filterByRunStatus('3')"><i></i>运行:{{ totalCounts.run }}台</span>
        <span :class="['tag-item', 'gray', { active: runStatusFilter === '0' }]" @click="filterByRunStatus('0')"><i></i>离线:{{ totalCounts.offline }}台</span>
      </div>
    </div>

    <!-- ========== 实时状态：设备卡片 ========== -->
    <div v-if="currentStatus === 'realtime'" class="tab-content">
    <!-- 设备卡片网格 -->
    <div class="device-grid">
      <div class="grid-inner">
      <div v-for="device in pagedDevices" :key="device.id" :class="['energy-card', 'status-' + device.runStatus]">
        <div class="card-header">
          <span class="device-name">{{ device.name }}</span>
        </div>
        
        <div class="card-body">
          <div class="energy-icon lightning-icon">
            <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2003/2000/svg">
              <path d="M35.5 4 L17 36 h14 l-6 24 22 -32 H33 l8 -24 Z"
                    fill="#f5a623" stroke="#d48806" stroke-width="1.5" stroke-linejoin="round"/>
            </svg>
          </div>
          
          <div class="info-list">
            <div class="info-item">用电量:<span>{{ device.evalue }} kw·h</span></div>
            <div class="info-item">{{ getRunStatusLabel(device.runStatus) }}:<span>{{ device.duration }}</span></div>
          </div>
        </div>

        <div class="card-footer">
          <button class="action-btn primary" @click="openDetail('report', device)">
            <el-icon><Document /></el-icon>运行状态
          </button>
          <button class="action-btn danger" @click="openDetail('safety', device)">
            <el-icon><Lock /></el-icon>用时用电
          </button>
        </div>
      </div>
      </div><!-- /grid-inner -->
    </div>

    <!-- 分页 -->
    <div v-if="totalDevices > 0" class="pagination-wrapper">
      <div class="pagination-controls">
        <select class="page-size-select" :value="PAGE_SIZE">
          <option value="12">12 条/页</option>
        </select>
        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage = 1; fetchDeviceList()">«</button>
        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--; fetchDeviceList()"><</button>
        <template v-for="(p, i) in visiblePages" :key="i">
          <button v-if="typeof p === 'number'" :class="['page-btn', { active: currentPage === p }]" @click="currentPage = p; fetchDeviceList()">{{ p }}</button>
          <span v-else class="page-dots">{{ p }}</span>
        </template>
        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++; fetchDeviceList()">></button>
        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage = totalPages; fetchDeviceList()">»</button>
      </div>
    </div>
    </div><!-- /tab-content realtime -->

    <!-- ========== 时序状态：Canvas甘特图 ========== -->
    <div v-else-if="currentStatus === 'timeseries'" class="tab-content timeseries-view" ref="tsWrapRef">
      <div class="ts-toolbar">
        <span class="ts-label">查询方式：</span>
        <el-radio-group v-model="tsQueryMode" size="small" @change="onTsModeChange">
          <el-radio-button value="day">日查询</el-radio-button>
        </el-radio-group>
        <el-date-picker v-model="tsSelectedDate" type="date" placeholder="" size="small"
          style="width:160px;margin-left:8px;" value-format="YYYY-MM-DD"
          :disabled-date="disabledDateFuture" @change="fetchTimelineData" />
        <el-button type="primary" size="small" style="margin-left:8px;" @click="fetchTimelineData">查询</el-button>
      </div>

      <div class="ts-gantt-wrap" v-loading="tsLoading">
        <div class="ts-fixed-col"><canvas ref="tsFixedCanvasRef"></canvas></div>
        <div class="ts-scroll-area" ref="tsScrollAreaRef" @scroll="onTsScroll">
          <canvas ref="tsGanttCanvasRef" @mousemove="onTsGanttMouseMove" @mouseleave="onTsGanttMouseLeave" @wheel.prevent.stop="onTsGanttWheel"></canvas>
          <div v-if="tsHover.show" class="gantt-tooltip" :style="{ left: tsHover.x + 'px', top: tsHover.y + 'px' }">
            <div class="gtt-title">{{ tsHover.deviceName }}</div>
            <div class="gtt-row"><span class="gtt-label">状态</span><span class="gtt-val" :style="{ color: TS_STATUS_COLORS[tsHover.status] }">{{ tsStatusLabel(tsHover.status) }}</span></div>
            <div class="gtt-row"><span class="gtt-label">开始</span><span class="gtt-val">{{ tsHover.startTime }}</span></div>
            <div class="gtt-row"><span class="gtt-label">结束</span><span class="gtt-val">{{ tsHover.endTime || '-' }}</span></div>
            <div class="gtt-row"><span class="gtt-label">时长</span><span class="gtt-val gtt-highlight">{{ tsFormatDuration(tsHover.duration) }}</span></div>
          </div>
        </div>
      </div>

      <div class="pagination-wrapper">
        <span>共 {{ tsTotal }} 条</span>
        <el-pagination small layout="sizes, prev, pager, next, jumper"
          v-model:current-page="tsPageNo" v-model:page-size="tsPageSize"
          :total="tsTotal" :page-sizes="[12, 24, 48]" @size-change="fetchTimelineData" @current-change="fetchTimelineData" />
      </div>
    </div>

    <!-- ========== 稼动率：多图表视图 ========== -->
    <div v-else-if="currentStatus === 'utilization'" class="tab-content util-view">
      <div class="util-toolbar">
        <span class="util-label">查询方式：</span>
        <el-radio-group v-model="utilQueryMode" size="small">
          <el-radio-button value="day">日查询</el-radio-button>
          <el-radio-button value="week">周查询</el-radio-button>
          <el-radio-button value="month">月查询</el-radio-button>
        </el-radio-group>
        <el-date-picker v-model="utilDate" type="date" placeholder="2026-04-28" size="small" style="width:160px;margin-left:8px;" />
        <div style="flex:1"></div>
        <el-button type="primary" size="small">查询</el-button>
      </div>

      <div class="util-top-charts">
        <div class="pie-card">
          <div class="pie-title">总稼动率：</div>
          <div class="pie-chart-svg">
            <svg viewBox="0 0 200 180"><circle cx="90" cy="90" r="70" fill="none" stroke="#ddd" stroke-width="35"/></svg>
            <div class="pie-empty-text">暂无数据</div>
          </div>
        </div>
        <div class="pie-card">
          <div class="pie-title">当前机台运行状态：</div>
          <div class="pie-chart-svg">
            <svg viewBox="0 0 200 180"><circle cx="90" cy="90" r="70" fill="none" stroke="#909399" stroke-width="35" stroke-dasharray="440 440" transform="rotate(-90 90 90)"/>
              <text x="130" y="85" text-anchor="middle" font-size="12" fill="#333"><tspan>x</tspan> 离线</text>
            </svg>
            <div class="pie-legend center-leg">
              <span class="leg-item"><i class="dot g"></i>绿灯</span>
              <span class="leg-item"><i class="dot r"></i>红灯</span>
              <span class="leg-item"><i class="dot gy"></i>离线</span>
            </div>
          </div>
        </div>
        <div class="bar-card">
          <div class="pie-title">异常机台排名：</div>
          <div class="abnormal-list"></div>
          <div class="abn-legend" style="margin-top:auto;"><i class="dot y"></i>待机 &nbsp; <i class="dot r"></i>停机</div>
        </div>
      </div>

      <div class="util-bottom-chart">
        <div class="stack-bar-toolbar">
          <span>排序：</span>
          <el-radio-group v-model="sortMode" size="small">
            <el-radio-button value="duration">绿灯时长</el-radio-button>
            <el-radio-button value="rate" checked>稼动率</el-radio-button>
          </el-radio-group>
        </div>
        <div class="stack-bar-legend">
          <span class="leg-item"><i class="dot g"></i>运行</span>
          <span class="leg-item"><i class="dot y"></i>待机</span>
          <span class="leg-item"><i class="dot r"></i>停机</span>
          <span class="leg-item"><i class="dot gy"></i>离线</span>
        </div>
        <div class="stack-bar-chart">
          <svg viewBox="0 0 1400 280">
            <g font-size="10" fill="#999" text-anchor="end">
              <text x="28" y="18">3时</text><text x="28" y="73">3时</text>
              <text x="28" y="128">2时</text><text x="28" y="183">1时</text><text x="28" y="238">0时</text>
            </g>
            <line x1="36" y1="240" x2="1380" y2="240" stroke="#ddd" stroke-width="1"/>
            <template v-for="(col, ci) in energyStackBarData" :key="ci">
              <rect :x="200+ci*80" :y="240-col.g*60" width="40" :height="col.g*60" fill="#67c23a" rx="1"/>
              <rect :x="200+ci*80" :y="240-(col.g+col.y)*60" width="40" :height="col.y*60" fill="#e6a23c" rx="1"/>
              <rect :x="200+ci*80" :y="240-(col.g+col.y+col.r)*60" width="40" :height="col.r*60" fill="#f56c6c" rx="1"/>
              <rect :x="200+ci*80" :y="240-(col.g+col.y+col.r+col.gy)*60" width="40" :height="col.gy*60" fill="#909399" rx="1"/>
              <text :x="220+ci*80" y="258" text-anchor="middle" font-size="9" fill="#666">{{ col.name }}</text>
            </template>
          </svg>
        </div>
      </div>
    </div>

    <!-- ========== 能耗效率：折线图 ========== -->
    <div v-else-if="currentStatus === 'efficiency'" class="tab-content eff-view">
      <div class="eff-toolbar">
        <span class="eff-label">查询方式：</span>
        <el-radio-group v-model="effQueryMode" size="small">
          <el-radio-button value="day">日查询</el-radio-button>
          <el-radio-button value="week">周查询</el-radio-button>
          <el-radio-button value="month">月查询</el-radio-button>
        </el-radio-group>
        <el-date-picker v-model="effDate" type="date" placeholder="2026-04-28" size="small" style="width:160px;margin-left:8px;" />
        <el-select v-model="effDeviceFilter" size="small" style="width:140px;margin-left:8px;">
          <el-option label="磨粉设备1 +1" value="dev1" />
        </el-select>
        <div style="flex:1"></div>
        <el-button size="small" circle><el-icon><Histogram /></el-icon></el-button>
        <el-button size="small" circle><el-icon><Document /></el-icon></el-button>
      </div>
      <div class="eff-legend">
        <span class="leg-line" style="--lc:#5470c6;"><i></i>磨粉设备1</span>
        <span class="leg-line" style="--lc:#91cc75;"><i></i>磨粉设备2</span>
      </div>
      <div class="eff-chart">
        <svg viewBox="0 0 1400 400">
          <!-- Y轴刻度 -->
          <g font-size="11" fill="#999" text-anchor="end">
            <text x="35" y="24">1</text><text x="35" y="96">0.8</text>
            <text x="35" y="168">0.6</text><text x="35" y="240">0.4</text>
            <text x="35" y="312">0.2</text><text x="35" y="380">0</text>
          </g>
          <!-- 网格线 -->
          <g stroke="#eee" stroke-width="1">
            <line x1="46" y1="20" x2="1370" y2="20"/><line x1="46" y1="92" x2="1370" y2="92"/>
            <line x1="46" y1="164" x2="1370" y2="164"/><line x1="46" y1="236" x2="1370" y2="236"/>
            <line x1="46" y1="308" x2="1370" y2="308"/><line x1="46" y1="380" x2="1370" y2="380"/>
          </g>
          <!-- X轴标签 -->
          <g font-size="10" fill="#666" text-anchor="middle">
            <template v-for="i in 24" :key="i">
              <text :x="46+(i-1)*55" y="398">{{ i }}</text>
            </template>
          </g>
          <!-- 折线1 -->
          <polyline :points="effLine1Points" fill="none" stroke="#5470c6" stroke-width="2"/>
          <!-- 折线2 -->
          <polyline :points="effLine2Points" fill="none" stroke="#91cc75" stroke-width="2"/>
          <!-- X轴线 -->
          <line x1="46" y1="380" x2="1370" y2="380" stroke="#ccc" stroke-width="1.5"/>
        </svg>
      </div>
    </div>

    <!-- 能耗报表弹窗 -->
    <EnergyReportDialog
      v-model:visible="dialogVisible.report"
      :device="currentDevice"
    />
    <!-- 用电安全弹窗 -->
    <SafetyDialog
      v-model:visible="dialogVisible.safety"
      :device="currentDevice"
    />
    <!-- 预警设置弹窗 -->
    <WarningSettingDialog
      v-model:visible="dialogVisible.warning"
      :device="currentDevice"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick, onBeforeUnmount } from 'vue'
import { Search, Menu, Document, Lock, Setting, Warning, Histogram } from '@element-plus/icons-vue'
import EnergyReportDialog from '../components/EnergyReportDialog.vue'
import SafetyDialog from '../components/SafetyDialog.vue'
import WarningSettingDialog from '../components/WarningSettingDialog.vue'

const selectedFactory = ref('新建')
const searchKeyword = ref('')
const currentStatus = ref('realtime')
const runStatusFilter = ref('') // runStatus 筛选: ''=全部, '0'=离线, '1'=停机, '2'=待机, '3'=运行

// 各状态数量（接口返回后更新）
const totalCounts = reactive({ all: 0, stop: 0, standby: 0, run: 0, offline: 0 })

// 点击状态筛选
function filterByRunStatus(runStatus) {
  if (runStatusFilter.value === runStatus) return
  runStatusFilter.value = runStatus
  currentPage.value = 1
  fetchDeviceList()
}

// 搜索
function doSearch() {
  currentPage.value = 1
  fetchDeviceList()
}

// 能耗页面4个Tab（第4个是能耗效率，与智能灯不同）
const statusTabs = [
  { key: 'realtime', label: '实时状态' },
  { key: 'timeseries', label: '时序状态' },
  { key: 'utilization', label: '稼动率' },
  { key: 'efficiency', label: '能耗效率' }
]

const deviceList = ref([])
const totalDevices = ref(0)

const PAGE_SIZE = 12
const currentPage = ref(1)
const totalPages = computed(() => Math.ceil(totalDevices.value / PAGE_SIZE) || 1)
const visiblePages = computed(() => {
  const pages = []
  const maxVisible = 5
  const cp = currentPage.value
  const tp = totalPages.value
  let start = Math.max(1, cp - Math.floor(maxVisible / 2))
  let end = Math.min(tp, start + maxVisible - 1)
  if (end - start + 1 < maxVisible) start = Math.max(1, end - maxVisible + 1)
  if (start > 1) { pages.push(1); if (start > 2) pages.push('...') }
  for (let i = start; i <= end; i++) pages.push(i)
  if (end < tp) { if (end < tp - 1) pages.push('...'); pages.push(tp) }
  return pages
})
// 服务端分页，pagedDevices 直接使用接口返回的 list
const pagedDevices = computed(() => deviceList.value)

// 获取能耗设备列表
async function fetchDeviceList() {
  try {
    const params = new URLSearchParams({
      pageNo: currentPage.value,
      pageSize: PAGE_SIZE,
      projectState: '1',
    })
    if (searchKeyword.value) params.append('deviceName', searchKeyword.value)
    if (runStatusFilter.value !== '') params.append('runStatus', runStatusFilter.value)

    const res = await fetch(`/api/energy/list?${params}`)
    const data = await res.json()
    deviceList.value = (data.list || []).map(item => ({
      id: item.id,
      name: item.deviceName || item.dtuSn,
      evalue: parseFloat(item.evalue) || 0,
      runStatus: String(item.runStatus ?? '0'),
      duration: item.duration || '0秒',
      _raw: item,
    }))
    totalDevices.value = data.total || 0

    // 刷新统计数据
    await fetchStats()
  } catch (err) {
    console.error('获取能耗设备列表失败:', err)
  }
}

// 获取运行状态统计
async function fetchStats() {
  try {
    const res = await fetch('/api/energy/stats')
    const data = await res.json()
    totalCounts.all = data.total || 0
    totalCounts.offline = parseInt(data['0']) || 0  // runStatus=0 离线
    totalCounts.stop = parseInt(data['1']) || 0      // runStatus=1 停机
    totalCounts.standby = parseInt(data['2']) || 0   // runStatus=2 待机
    totalCounts.run = parseInt(data['3']) || 0       // runStatus=3 运行
  } catch (err) {
    console.error('获取能耗统计失败:', err)
  }
}

// 页面挂载时加载设备列表
onMounted(() => {
  fetchDeviceList()
})

// runStatus 状态文字映射
const RUN_STATUS_LABELS = { '0': '离线', '1': '停机', '2': '待机', '3': '运行' }
function getRunStatusLabel(runStatus) {
  return RUN_STATUS_LABELS[String(runStatus)] || '未知'
}

const dialogVisible = reactive({
  report: false,
  safety: false,
  param: false,
  warning: false,
  setting: false
})
const currentDevice = ref(null)

function openDetail(type, device) {
  currentDevice.value = device
  dialogVisible[type] = true
}

// ========== 时序状态：Canvas甘特图 ==========
const TS_STATUS_COLORS = { 0: '#909399', 1: '#e74c3c', 2: '#67c23a', 3: '#c5d94e' }
const TS_STATUS_MAP = { 0: '离线', 1: '停机', 2: '运行', 3: '待机' }

const tsQueryMode = ref('day')
const tsSelectedDate = ref(new Date().toISOString().slice(0, 10))
const tsPageNo = ref(1)
const tsPageSize = ref(12)
const tsTotal = ref(0)
const tsLoading = ref(false)
const tsTimelineList = ref([])
// 视图缩放：zoomLevel=1显示24h，越大显示的时间范围越短
const tsZoomLevel = ref(1)
const TS_ZOOM_MIN = 1       // 最小：一屏24h
const TS_ZOOM_MAX = 8       // 最大：一屏约3h
// 视图中心时间点（毫秒），用于鼠标位置为中心的缩放
const tsViewCenterMs = ref(0)

function disabledDateFuture(time) { return time.getTime() > Date.now() }
function onTsModeChange() { fetchTimelineData() }
function tsStatusLabel(s) { return TS_STATUS_MAP[s] || '未知' }
function tsFormatDuration(sec) {
  if (!sec && sec !== 0) return '-'
  sec = Number(sec)
  const h = Math.floor(sec / 3600), m = Math.floor((sec % 3600) / 60), s = sec % 60
  let str = ''
  if (h > 0) str += h + '时'
  if (m > 0) str += m + '分'
  if (s > 0 || !str) str += s + '秒'
  return str
}

// Canvas refs
const tsFixedCanvasRef = ref(null)
const tsGanttCanvasRef = ref(null)
const tsScrollAreaRef = ref(null)
let tsResizeObs = null

// Hover
const tsHover = reactive({ show: false, x: 0, y: 0, rowIdx: -1, segIdx: -1,
  deviceName: '', status: 0, startTime: '', endTime: '', duration: 0 })
let tsHitRects = []

// 布局常量
const TS_ROW_H = 36
const TS_FIXED_W = 220
const TS_AXIS_H = 32

async function fetchTimelineData() {
  tsLoading.value = true
  tsZoomLevel.value = 1
  tsViewCenterMs.value = 0
  try {
    const url = `/api/energy/timelineStatus?date=${tsSelectedDate.value}&pageSize=${tsPageSize.value}&pageNo=${tsPageNo.value}`
    const res = await fetch(url)
    const data = await res.json()
    if (data.code === 200) {
      tsTimelineList.value = data.list || []
      tsTotal.value = data.total || 0
      await nextTick()
      drawTsAll()
    }
  } catch (err) {
    console.error('获取时序状态失败:', err)
  } finally {
    tsLoading.value = false
  }
}

function getDpr() { return window.devicePixelRatio || 1 }

function drawTsAll() { drawTsFixedCol(); drawTsGanttChart(); }

// 左侧固定列绘制
function drawTsFixedCol() {
  const canvas = tsFixedCanvasRef.value; if (!canvas) return
  const list = tsTimelineList.value
  const h = Math.max(TS_AXIS_H + list.length * TS_ROW_H + 8, 80)
  canvas.width = TS_FIXED_W * getDpr(); canvas.height = h * getDpr()
  canvas.style.width = TS_FIXED_W + 'px'; canvas.style.height = h + 'px'
  const ctx = canvas.getContext('2d'); ctx.scale(getDpr(), getDpr())
  ctx.fillStyle = '#fafafa'; ctx.fillRect(0, 0, TS_FIXED_W, h)

  // 表头
  ctx.fillStyle = '#f0f2f5'; ctx.fillRect(0, 0, TS_FIXED_W, TS_AXIS_H)
  ctx.strokeStyle = '#e4e7ed'; ctx.lineWidth = 1
  ctx.beginPath(); ctx.moveTo(0, TS_AXIS_H); ctx.lineTo(TS_FIXED_W, TS_AXIS_H); ctx.stroke()

  ctx.font = 'bold 13px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#333'
  const cW = [TS_FIXED_W * 0.42, TS_FIXED_W * 0.22, TS_FIXED_W * 0.36]
  ctx.fillText('设备名称', cW[0] / 2, TS_AXIS_H / 2)
  ctx.fillText('稼动率', cW[0] + cW[1] / 2, TS_AXIS_H / 2)
  ctx.fillText('用电量', cW[0] + cW[1] + cW[2] / 2, TS_AXIS_H / 2)

  // 列分隔线
  ctx.strokeStyle = '#ebeef5'
  let cx = cW[0]; ctx.beginPath(); ctx.moveTo(cx, 0); ctx.lineTo(cx, h); ctx.stroke()
  cx += cW[1]; ctx.beginPath(); ctx.moveTo(cx, 0); ctx.lineTo(cx, h); ctx.stroke()

  // 数据行
  ctx.font = '12px sans-serif'
  list.forEach((item, i) => {
    const y = TS_AXIS_H + i * TS_ROW_H
    if (i % 2 === 1) { ctx.fillStyle = '#f9f9f9'; ctx.fillRect(0, y, TS_FIXED_W, TS_ROW_H) }
    ctx.strokeStyle = '#f0f0f0'; ctx.beginPath(); ctx.moveTo(0, y + TS_ROW_H); ctx.lineTo(TS_FIXED_W, y + TS_ROW_H); ctx.stroke()
    const cy = y + TS_ROW_H / 2
    ctx.fillStyle = '#303133'; ctx.textAlign = 'left'
    ctx.fillText(item.deviceName || item.dtuSn || '-', 10, cy)
    const ur = item.utilizationRate ?? 0
    ctx.fillStyle = ur >= 30 ? '#67c23a' : ur > 0 ? '#e6a23c' : '#909399'
    ctx.textAlign = 'center'
    ctx.fillText((ur % 1 === 0 ? ur.toFixed(1) : ur.toFixed(2)) + '%', cW[0] + cW[1] / 2, cy)
    ctx.fillStyle = '#303133'; ctx.textAlign = 'right'
    ctx.fillText(String(item.totalKwh ?? 0), cW[0] + cW[1] + cW[2] - 8, cy)
  })
}

// 甘特图绘制（视图缩放：canvas宽度始终=容器宽度，不产生滚动条）
function drawTsGanttChart() {
  const canvas = tsGanttCanvasRef.value; const wrap = tsScrollAreaRef.value
  if (!canvas || !wrap) return
  const list = tsTimelineList.value
  const w = wrap.clientWidth || 800
  const h = Math.max(TS_AXIS_H + list.length * TS_ROW_H + 8, 80)

  canvas.width = w * getDpr(); canvas.height = h * getDpr()
  canvas.style.width = w + 'px'; canvas.style.height = h + 'px'
  const ctx = canvas.getContext('2d'); ctx.scale(getDpr(), getDpr())

  ctx.clearRect(0, 0, w, h)
  tsHitRects = []

  const dateStr = tsSelectedDate.value || new Date().toISOString().slice(0, 10)
  const dayStartMs = new Date(dateStr + 'T00:00:00').getTime()
  const dayEndMs = dayStartMs + 86400000

  // 根据zoomLevel计算可见时间范围（小时）
  const visibleHours = Math.max(24 / tsZoomLevel.value, 3)
  const visibleMs = visibleHours * 3600000

  // 视图中心点，默认为当天中午
  let center = tsViewCenterMs.value || (dayStartMs + 43200000)
  if (tsZoomLevel.value <= 1) center = dayStartMs + 43200000
  const halfVis = visibleMs / 2
  if (center - halfVis < dayStartMs) center = dayStartMs + halfVis
  if (center + halfVis > dayEndMs) center = dayEndMs - halfVis

  const viewStartMs = center - halfVis
  const viewEndMs = center + halfVis
  const viewRangeMs = viewEndMs - viewStartMs

  // 表头背景
  ctx.fillStyle = '#f0f2f5'; ctx.fillRect(0, 0, w, TS_AXIS_H)
  ctx.strokeStyle = '#e4e7ed'; ctx.lineWidth = 1
  ctx.beginPath(); ctx.moveTo(0, TS_AXIS_H); ctx.lineTo(w, TS_AXIS_H); ctx.stroke()

  // 时间刻度（根据可见范围动态调整间隔）
  ctx.font = '11px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#666'
  let stepMinutes = 60
  if (visibleHours <= 4) stepMinutes = 15
  else if (visibleHours <= 8) stepMinutes = 30
  else if (visibleHours <= 16) stepMinutes = 45

  const tickStep = stepMinutes * 60000
  const firstTick = Math.ceil(viewStartMs / tickStep) * tickStep
  for (let t = firstTick; t <= viewEndMs; t += tickStep) {
    const px = ((t - viewStartMs) / viewRangeMs) * w
    ctx.strokeStyle = '#ebeef5'; ctx.lineWidth = 0.5
    ctx.beginPath(); ctx.moveTo(px, TS_AXIS_H); ctx.lineTo(px, h); ctx.stroke()
    const hh = new Date(t).getHours(), mm = new Date(t).getMinutes()
    ctx.fillText(hh.toString().padStart(2,'0')+':'+mm.toString().padStart(2,'0'), px, TS_AXIS_H/2)
  }

  // 数据行条带
  list.forEach((item, rowIdx) => {
    const y = TS_AXIS_H + rowIdx * TS_ROW_H
    const barY = y + TS_ROW_H * 0.15; const barH = TS_ROW_H * 0.7
    if (rowIdx % 2 === 1) { ctx.fillStyle = '#f9f9f9'; ctx.fillRect(0, y, w, TS_ROW_H) }
    ctx.strokeStyle = '#f0f0f0'; ctx.beginPath(); ctx.moveTo(0, y+TS_ROW_H); ctx.lineTo(w, y+TS_ROW_H); ctx.stroke()

    ;(item.timelineList || []).forEach((seg, segIdx) => {
      if (!seg.duration || seg.duration <= 0) return
      const sMs = new Date(seg.startTime).getTime()
      const eMs = seg.endTime ? new Date(seg.endTime).getTime() : sMs + (seg.duration||0)*1000
      const x = ((sMs - viewStartMs) / viewRangeMs) * w
      const sw = Math.max(((eMs - sMs) / viewRangeMs) * w, 2)
      const drawW = Math.max(Math.min(sw, w - x - 1), 0)

      const isHover = (tsHover.show && rowIdx===tsHover.rowIdx && segIdx===tsHover.segIdx)
      ctx.fillStyle = isHover ? (TS_STATUS_COLORS[seg.runStatus]||'#ccc'):(TS_STATUS_COLORS[seg.runStatus]||'#ccc')
      ctx.globalAlpha = isHover?1:0.85
      if(drawW > 0) roundRect(ctx,x,barY,drawW,barH,0);ctx.fill()
      ctx.globalAlpha=1

      if(x+sw>=-50 && x<w+50){
        tsHitRects.push({rowIdx,segIdx,x,y:barY,w:drawW,h:barH,
          ...item,runStatus:seg.runStatus,startTime:seg.startTime,endTime:seg.endTime||'',duration:seg.duration})
      }
    })
  })

  // 当前时间线
  const now=Date.now(),nowPx=((now-viewStartMs)/viewRangeMs)*w
  if(nowPx>=0 && nowPx<=w){ctx.strokeStyle='#e74c3c';ctx.lineWidth=1.5;ctx.setLineDash([4,3])
    ctx.beginPath();ctx.moveTo(nowPx,TS_AXIS_H);ctx.lineTo(nowPx,h);ctx.stroke();ctx.setLineDash([])}
}

// 鼠标滚轮缩放：以鼠标位置为中心放大/缩小可见时间范围（无滚动条）
let tsZoomLock=false
function onTsGanttWheel(e){
  e.preventDefault();if(tsZoomLock)return
  tsZoomLock=true;setTimeout(()=>{tsZoomLock=false},60)

  const delta=e.deltaY>0?-0.25:0.25
  let newL=Math.max(TS_ZOOM_MIN,Math.min(TS_ZOOM_MAX,tsZoomLevel.value+delta))
  if(newL===tsZoomLevel.value)return

  const wrap=tsScrollAreaRef.value,cnv=tsGanttCanvasRef.value
  if(!wrap||!cnv)return
  const rect=cnv.getBoundingClientRect(),mx=e.clientX-rect.left

  const dateStr=tsSelectedDate.value||new Date().toISOString().slice(0,10)
  const dayStartMs=new Date(dateStr+'T00:00:00').getTime()

  const oldVH=Math.max(24/tsZoomLevel.value,3),oldVM=oldVH*3600000
  let center=tsViewCenterMs.value||(dayStartMs+43200000)
  let oldVS=center-oldVM/2;if(oldVS<dayStartMs)oldVS=dayStartMs
  const mouseTimeAt=oldVS+(mx/rect.width)*oldVM

  tsZoomLevel.value=newL
  const newVH=Math.max(24/newL,3),newVM=newVH*3600000
  const newVS=mouseTimeAt-(mx/rect.width)*newVM
  tsViewCenterMs.value=newVS+newVM/2

  drawTsAll()
}

function roundRect(ctx, x, y, w, h, r) {
  if (w < 1 || h < 1) return
  if (r > w / 2) r = w / 2
  if (r > h / 2) r = h / 2
  if (r <= 0) { ctx.fillRect(x, y, w, h); return }
  ctx.beginPath(); ctx.moveTo(x+r, y); ctx.arcTo(x+w, y, x+w, y+h, r)
  ctx.arcTo(x+w, y+h, x, y+h, r); ctx.arcTo(x, y+h, x, y, r); ctx.arcTo(x, y, x+w, y, r); ctx.closePath()
}

// Hover事件
function onTsGanttMouseMove(e) {
  const canvas = tsGanttCanvasRef.value; const wrap = tsScrollAreaRef.value
  if (!canvas || !wrap) return
  const rect = canvas.getBoundingClientRect()
  const mx = e.clientX - rect.left, my = e.clientY - rect.top
  let hit = null
  for (let i = tsHitRects.length - 1; i >= 0; i--) {
    const r = tsHitRects[i]
    if (mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h) { hit = r; break }
  }
  if (hit) {
    tsHover.rowIdx = hit.rowIdx; tsHover.segIdx = hit.segIdx
    tsHover.deviceName = hit.deviceName || hit.dtuSn || ''
    tsHover.status = hit.runStatus ?? 0
    tsHover.startTime = hit.startTime ? hit.startTime.slice(11, 19) : ''
    tsHover.endTime = hit.endTime ? hit.endTime.slice(11, 19) : ''
    tsHover.duration = hit.duration || 0
    if (!tsHover.show) {
      tsHover.show = true
      let tx = mx + 12, ty = my - 100
      if (tx + 180 > wrap.clientWidth - 20) tx = mx - 190
      if (ty < 10) ty = my + 16
      tsHover.x = tx; tsHover.y = ty
    }
  } else {
    tsHover.show = false
  }
  drawTsGanttChart()
}
function onTsGanttMouseLeave() { tsHover.show = false; drawTsGanttChart() }
function onTsScroll() { drawTsFixedCol() }

// 监听tab切换自动加载
watch(currentStatus, async (val) => {
  if (val === 'timeseries') {
    await nextTick()
    initTsObserver()
    fetchTimelineData()
  } else {
    destroyTsObserver()
  }
})

function initTsObserver() {
  destroyTsObserver()
  tsResizeObs = new ResizeObserver(() => { if (currentStatus.value === 'timeseries') drawTsAll() })
  const el = document.querySelector('.ts-gantt-wrap')
  if (el) tsResizeObs.observe(el)
}
function destroyTsObserver() { if (tsResizeObs) { tsResizeObs.disconnect(); tsResizeObs = null } }
onBeforeUnmount(() => destroyTsObserver())

// ========== 稼动率数据 ==========
const utilQueryMode = ref('day')
const utilDate = ref('2026-04-28')
const sortMode = ref('rate')
const energyStackBarData = computed(() => [
  { name: '磨粉设备1', g: 3.5, y: 0, r: 0, gy: 1 },
  { name: '磨粉设备2', g: 3.5, y: 0, r: 0, gy: 1 }
])

// ========== 能耗效率数据 ==========
const effQueryMode = ref('day')
const effDate = ref('2026-04-28')
const effDeviceFilter = ref('dev1')
const effLine1Points = computed(() => {
  const pts = []
  for (let i = 0; i < 24; i++) {
    pts.push(`${46 + i * 55},${380 - 0}`)
  }
  return pts.join(' ')
})
const effLine2Points = computed(() => {
  const pts = []
  for (let i = 0; i < 24; i++) {
    pts.push(`${46 + i * 55},${380 - 0}`)
  }
  return pts.join(' ')
})
</script>

<style scoped>
.energy-page {
  min-height: 100%;
  height: calc(100vh - 0px);
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}
.device-grid {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  padding: 16px 20px;
}
.device-grid .grid-inner {
  display: grid;
  grid-template-columns: repeat(6, 270px);
  gap: 16px;
}
.top-toolbar {
  background: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
}
.status-tabs {
  display: flex;
  gap: 4px;
}
.status-tab {
  padding: 14px 18px;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  position: relative;
  transition: all 0.2s;
}
.status-tab:hover {
  color: #409eff;
}
.status-tab.active {
  color: #409eff;
  font-weight: bold;
}
.status-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: #409eff;
}
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-bar {
  background: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
}
.filter-label {
  font-size: 13px;
  color: #999;
}
.filter-tags {
  display: flex;
  gap: 16px;
}
.tag-item {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.tag-item:hover {
  opacity: 0.8;
}
.tag-item.active {
  font-weight: bold;
}
.tag-item i {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 2px;
}
.tag-item.black i { background: #333; }
.tag-item.red i { background: #f56c6c; }
.tag-item.green i { background: #67c23a; }
.tag-item.blue i { background: #409eff; }
.tag-item.gray i { background: #909399; }

.energy-card {
  min-width: 270px;
  height: 340px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
}
/* runStatus 状态背景色 */
.energy-card.status-0 { background: linear-gradient(145deg, #b8b8b8 0%, #999 100%); }
.energy-card.status-1 { background: linear-gradient(145deg, #f56c6c 0%, #e74c3c 100%); }
.energy-card.status-2 { background: linear-gradient(145deg, #7ec87e 0%, #5cb85c 100%); }
.energy-card.status-3 { background: linear-gradient(145deg, #32a756 0%, #289048 100%); }
.energy-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.card-header {
  color: #fff;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
}
.menu-icon {
  cursor: pointer;
  color: #aaa;
}
.card-body {
  padding: 10px 16px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.energy-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
}
.lightning-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 12px rgba(255,200,0,0.5));
}
.info-list {
  text-align: center;
  color: #fff;
  font-size: 13px;
  line-height: 2;
}
.info-item span {
  color: #fff;
  font-weight: 500;
}
.value-highlight {
  color: #f5a623 !important;
  font-weight: bold;
}
.card-footer {
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 6px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: #fff;
  background: rgba(0,0,0,0.15);
}
.action-btn:hover {
  opacity: 0.8;
  transform: scale(1.02);
}
.action-btn.primary { border-color: rgba(64,158,255,0.5); }
.action-btn.danger { border-color: rgba(245,108,108,0.5); }
.action-btn.info { border-color: rgba(144,147,153,0.45); }
.action-btn.setting { border-color: rgba(144,147,153,0.45); }
/* ========== 自定义分页 ========== */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 20px;
  border-top: 1px solid #e8e8e8;
}
.pagination-info { font-size: 13px; color: #666; }
.pagination-info strong { color: #333; }

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-size-select {
  height: 30px;
  padding: 2px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  color: #606266;
  outline: none;
  cursor: pointer;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  color: #606266;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.page-btn:hover:not(:disabled) {
  color: #409eff;
  border-color: #409eff;
}
.page-btn.active {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
.page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: #999;
  font-size: 13px;
}

/* ========== Tab内容区通用 ========== */
.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ========== 时序状态 ========== */
.timeseries-view {
  background: #f5f7fa;
}
.ts-toolbar {
  background: #fff;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e8e8e8;
}
.ts-label {
  font-size: 13px; color: #666; font-weight: bold;
}
.ts-table-wrap {
  flex: 1;
  overflow: auto;
  background: #fff;
  margin: 12px 20px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}
.ts-header-row {
  display: flex;
  align-items: flex-end;
  position: sticky;
  top: 0;
  background: #fafafa;
  border-bottom: 2px solid #e0e0e0;
  z-index: 2;
}
.ts-col-name {
  width: 160px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  flex-shrink: 0;
  text-align: center;
}
.ts-sub-col { width: 70px; }
.ts-sub-col2 { width: 70px; }
.ts-timeline-area {
  flex: 1;
  min-width: 800px;
}
.ts-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  min-height: 36px;
}
.ts-row.row-gray .ts-cell-name { background: #f5f5f5; }
.ts-cell-name {
  width: 160px;
  padding: 6px 12px;
  flex-shrink: 0;
  font-size: 12px;
}
.ts-link { color: #409eff; cursor: pointer; }
.ts-link:hover { text-decoration: underline; }
.ts-cell-rate {
  width: 70px;
  padding: 6px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  flex-shrink: 0;
}
.ts-row.row-gray .ts-cell-rate { background: #f0f0f0; }
.ts-cell-bars {
  flex: 1;
  min-width: 800px;
  padding: 4px 8px;
}
.bar-track {
  height: 22px;
  background: #f5f5f5;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.bar-seg {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 0 2px 2px 0;
}
.seg-g { background: #67c23a; }
.seg-y { background: #e6a23c; }
.seg-r { background: #f56c6c; }
.seg-gy { background: #909399; }

/* ========== 时序状态：Canvas甘特图 ========== */
.ts-gantt-wrap {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: auto;
  background: #fff;
  margin: 8px 20px 0;
  border: 1px solid #e8e8e8;
  position: relative;
}
.ts-fixed-col {
  width: 220px;
  flex-shrink: 0;
}
.ts-fixed-col canvas { display: block; }
.ts-scroll-area {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.ts-scroll-area canvas { display: block; }

/* Tooltip - 相对于 ts-scroll-area 定位 */
.gantt-tooltip {
  position: absolute;
  background: rgba(30,40,55,0.95);
  border-radius: 6px;
  padding: 8px 14px;
  min-width: 180px;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.gtt-title {
  font-size: 12px; font-weight:bold; color:#eef1f7; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.gtt-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px; line-height:2; font-size:12px;
}
.gtt-label { color:#aab2c0; flex-shrink:0; }
.gtt-val { color:#eef1f7; font-weight:500; display:flex; align-items:center; gap:4px; }
.gtt-highlight { font-weight:bold; }

/* ========== 稼动率 ========== */
.util-view {
  background: #f5f7fa;
  overflow-y: auto;
}
.util-toolbar {
  background: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e8e8e8;
}
.util-label {
  font-size: 13px; color: #666; font-weight: bold;
}
.util-top-charts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 14px 20px;
}
.pie-card, .bar-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.pie-title {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.pie-chart-svg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  position: relative;
}
.pie-chart-svg svg { max-width: 200px; max-height: 180px; }
.pie-empty-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 14px; color: #ccc;
}
.pie-legend {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #666;
  line-height: 1.5;
}
.center-leg { justify-content: center; }
.leg-item { display: inline-flex; align-items: center; gap: 3px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.dot.g { background: #67c23a; }
.dot.y { background: #e6a23c; }
.dot.r { background: #f56c6c; }
.dot.gy { background: #909399; }

.abnormal-list { flex: 1; overflow-y: auto; }
.abn-footer {
  margin-top: 6px;
  font-size: 10px;
  color: #bbb;
  text-align: right;
}
.abn-legend {
  margin-top: 4px;
  font-size: 11px;
  color: #999;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.util-bottom-chart {
  margin: 0 20px 14px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 14px;
}
.stack-bar-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #666;
}
.stack-bar-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
}
.stack-bar-chart {
  overflow-x: auto;
}
.stack-bar-chart svg { min-width: 100%; }

/* ========== 能耗效率 ========== */
.eff-view {
  background: #f5f7fa;
  overflow-y: auto;
}
.eff-toolbar {
  background: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e8e8e8;
}
.eff-label {
  font-size: 13px; color: #666; font-weight: bold;
}
.eff-legend {
  padding: 10px 24px;
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 20px;
}
.leg-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.leg-line i {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--lc);
}
.eff-chart {
  margin: 0 20px 20px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 14px;
  overflow-x: auto;
}
.eff-chart svg { min-width: 1200px; }
</style>