<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title=""
    width="calc(100vw - 40px)"
    :style="{ maxWidth: '1400px' }"
    top="3vh"
    destroy-on-close
    class="util-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <span class="title-text">{{ deviceName }} 稼动率查询方式：</span>
        <div class="header-center">
          <el-radio-group v-model="queryMode" 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>
          <span class="date-wrap" v-if="queryMode === 'day'">
            <el-date-picker v-model="queryDateRange" type="daterange" start-placeholder="开始" end-placeholder="结束"
              size="small" value-format="YYYY-MM-DD" @change="fetchOeeData" />
          </span>
        </div>
        <div class="header-right"></div>
      </div>
    </template>

    <div class="util-body">
      <!-- 上排：颜色时长明细 + 颜色时长总计 -->
      <div class="top-row">
        <div class="chart-card">
          <div class="card-title-row">
            <h4>颜色时长明细</h4>
            <span class="card-subtitle">Duration detail</span>
          </div>
          <div class="legend-inline">
            <span class="leg"><i class="dot green"></i>绿灯</span>
            <span class="leg"><i class="dot yellow"></i>黄灯</span>
            <span class="leg"><i class="dot red"></i>红灯</span>
            <span class="leg"><i class="dot gray"></i>离线</span>
          </div>
          <div class="canvas-wrap" @mousemove="onBarMove($event, 'dur')" @mouseleave="onBarLeave('dur')">
            <canvas ref="durCanvas" :width="durCanvasW" :height="260"></canvas>
            <div v-if="barHover.dur.show" class="bar-tooltip" :style="{ left: barHover.dur.x + 'px', top: barHover.dur.y + 'px' }">
              <div class="tt-title">{{ barHover.dur.label }}</div>
              <template v-for="(row, i) in barHover.dur.rows" :key="i">
                <div class="tt-row" v-if="row.v > 0"><i class="tt-dot" :style="{ background: row.c }"></i>{{ row.n }}: {{ row.t }}</div>
              </template>
            </div>
          </div>
        </div>

        <div class="pie-card">
          <div class="card-title-row">
            <h4>颜色时长总计</h4>
            <span class="card-subtitle">Duration statistics</span>
          </div>
          <div class="pie-main">
            <div class="canvas-wrap pie-canvas-wrap" @mousemove="onPieMove($event, 'dur')" @mouseleave="onPieLeave('dur')">
              <canvas ref="durPieCanvas" width="200" height="200"></canvas>
              <div v-if="pieHover.dur.show && pieHover.dur.seg" class="pie-tooltip" :style="{ left: pieHover.dur.x + 'px', top: pieHover.dur.y + 'px' }">
                <strong>{{ pieHover.dur.seg.name }}:</strong> {{ formatDur(pieHover.dur.seg.val) }}
                &nbsp;({{ pieHover.dur.seg.pct }}%)
              </div>
            </div>
            <div class="pie-legend">
              <div class="pleg"><span class="pdot green"></span>绿灯</div>
              <div class="pleg"><span class="pdot yellow"></span>黄灯</div>
              <div class="pleg"><span class="pdot red"></span>红灯</div>
              <div class="pleg"><span class="pdot gray"></span>离线</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下排：颜色次数明细 + 颜色次数总计 -->
      <div class="bottom-row">
        <div class="chart-card">
          <div class="card-title-row">
            <h4>颜色次数明细</h4>
            <span class="card-subtitle">Frequency detail</span>
          </div>
          <div class="legend-inline">
            <span class="leg"><i class="dot green"></i>绿灯</span>
            <span class="leg"><i class="dot yellow"></i>黄灯</span>
            <span class="leg"><i class="dot red"></i>红灯</span>
            <span class="leg"><i class="dot gray"></i>离线</span>
          </div>
          <div class="canvas-wrap" @mousemove="onBarMove($event, 'freq')" @mouseleave="onBarLeave('freq')">
            <canvas ref="freqCanvas" :width="freqCanvasW" :height="280"></canvas>
            <div v-if="barHover.freq.show" class="bar-tooltip" :style="{ left: barHover.freq.x + 'px', top: barHover.freq.y + 'px' }">
              <div class="tt-title">{{ barHover.freq.label }}</div>
              <template v-for="(row, i) in barHover.freq.rows" :key="i">
                <div class="tt-row" v-if="row.v > 0"><i class="tt-dot" :style="{ background: row.c }"></i>{{ row.n }}: {{ row.v }}次</div>
              </template>
            </div>
          </div>
        </div>

        <div class="pie-card">
          <div class="card-title-row">
            <h4>颜色次数总计</h4>
            <span class="card-subtitle">Frequency statistics</span>
          </div>
          <div class="pie-main">
            <div class="canvas-wrap pie-canvas-wrap" @mousemove="onPieMove($event, 'freq')" @mouseleave="onPieLeave('freq')">
              <canvas ref="freqPieCanvas" width="200" height="200"></canvas>
              <div v-if="pieHover.freq.show && pieHover.freq.seg" class="pie-tooltip" :style="{ left: pieHover.freq.x + 'px', top: pieHover.freq.y + 'px' }">
                <strong>{{ pieHover.freq.seg.name }}:</strong> {{ pieHover.freq.seg.val }}次
                &nbsp;({{ pieHover.freq.seg.pct }}%)
              </div>
            </div>
            <div class="pie-legend">
              <div class="pleg"><span class="pdot green"></span>绿灯</div>
              <div class="pleg"><span class="pdot yellow"></span>黄灯</div>
              <div class="pleg"><span class="pdot red"></span>红灯</div>
              <div class="pleg"><span class="pdot gray"></span>离线</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, nextTick, getCurrentInstance, inject } from 'vue'

const props = defineProps({
  visible: Boolean,
  device: Object
})
defineEmits(['update:visible'])

const queryMode = ref('day')
const now = new Date()
const weekAgo = new Date(now)
weekAgo.setDate(weekAgo.getDate() - 6)
const queryDateRange = ref([formatDate(weekAgo), formatDate(now)])
const oeeData = ref(null)

// 从全局获取corpCode
const corpCode = inject('corpCode')
function withCorpCode(url) {
  if (!corpCode.value) return url
  const sep = url.includes('?') ? '&' : '?'
  return `${url}${sep}corpCode=${encodeURIComponent(corpCode.value)}`
}

// 布局常量
const padL = 50
const padB = 24
const COLORS = { green: '#67c23a', yellow: '#e6a23c', red: '#f56c6c', off: '#909399' }
const COLOR_NAMES = { green: '绿灯', yellow: '黄灯', red: '红灯', off: '离线' }

// Canvas refs
const durCanvas = ref(null)
const freqCanvas = ref(null)
const durPieCanvas = ref(null)
const freqPieCanvas = ref(null)

// ========== 工具函数 ==========
function formatDate(d) {
  if (!d) return ''
  const dt = new Date(d)
  return `${dt.getFullYear()}-${String(dt.getMonth()+1).padStart(2,'0')}-${String(dt.getDate()).padStart(2,'0')}`
}
function formatDateShort(s) {
  if (!s) return ''
  return s.slice(5)
}
function formatSec(s) {
  if (s <= 0) return '0秒'
  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = Math.floor(s % 60)
  if (h > 0) return `${h}时${m}分${sec}秒`
  if (m > 0) return `${m}分${sec}秒`
  return `${sec}秒`
}
function formatDur(v) {
  return typeof v === 'number' ? formatSec(v) : (v || '0')
}

// ========== computed 数据 ==========
const summaryDur = computed(() => oeeData.value?.summary || {})
const summaryFreq = computed(() => oeeData.value?.summary || {})
const displayList = computed(() => oeeData.value?.list || [])

// 设备名称
const deviceName = computed(() => props.device?._raw?.name || props.device?.name || '设备')

// 时长最大值（每根柱子堆叠总和的最大值）
const maxDurSec = computed(() => {
  const list = displayList.value
  if (!list.length) return 86400
  let max = 1
  list.forEach(item => {
    const total = (item.off?.seconds || 0) + (item.red?.seconds || 0) +
      (item.yellow?.seconds || 0) + (item.green?.seconds || 0)
    max = Math.max(max, total)
  })
  return max
})

// 次数最大值（每根柱子堆叠总和的最大值）
const maxFreqCount = computed(() => {
  const list = displayList.value
  if (!list.length) return 100
  let max = 1
  list.forEach(item => {
    const total = (item.off?.count || 0) + (item.red?.count || 0) +
      (item.yellow?.count || 0) + (item.green?.count || 0)
    max = Math.max(max, total)
  })
  return max
})

// Canvas 宽度
const durCanvasW = computed(() => {
  const n = Math.max(displayList.value.length, 1)
  return Math.max(400, padL + n * 80 + 30)
})
const freqCanvasW = computed(() => {
  const n = Math.max(displayList.value.length, 1)
  return Math.max(400, padL + n * 80 + 30)
})

// Y轴刻度 — 时长（0在下，最大值在上）
const durYTicks = computed(() => {
  const ticks = []
  for (let i = 0; i <= 5; i++) {
    const sec = maxDurSec.value * i / 5
    const h = Math.floor(sec / 3600)
    const m = Math.floor((sec % 3600) / 60)
    ticks.push(h > 0 ? `${h}时` : `${m}分`)
  }
  return ticks
})
// Y轴刻度 — 次数（0在下，最大值在上）
const freqYTicks = computed(() => {
  const ticks = []
  const step = Math.ceil(maxFreqCount.value / 6 / 10) * 10 || 10
  for (let i = 0; i <= 6; i++) ticks.push(i * step)
  return ticks
})

// 饼图数据 — 时长
const durPieSegs = computed(() => {
  const s = summaryDur.value
  const items = [
    { key: 'green', name: '绿灯', val: s.green?.seconds || 0, color: COLORS.green },
    { key: 'yellow', name: '黄灯', val: s.yellow?.seconds || 0, color: COLORS.yellow },
    { key: 'red', name: '红灯', val: s.red?.seconds || 0, color: COLORS.red },
    { key: 'off', name: '离线', val: s.off?.seconds || 0, color: COLORS.off },
  ].filter(x => x.val > 0).sort((a, b) => b.val - a.val)
  const total = items.reduce((sum, x) => sum + x.val, 0) || 1
  let angle = -Math.PI / 2
  return items.map(item => {
    const sweep = (item.val / total) * Math.PI * 2
    const seg = { ...item, startAngle: angle, endAngle: angle + sweep, pct: ((item.val / total) * 100).toFixed(2) }
    angle += sweep
    return seg
  })
})

// 饼图数据 — 次数
const freqPieSegs = computed(() => {
  const s = summaryFreq.value
  const items = [
    { key: 'green', name: '绿灯', val: s.green?.count || 0, color: COLORS.green },
    { key: 'yellow', name: '黄灯', val: s.yellow?.count || 0, color: COLORS.yellow },
    { key: 'red', name: '红灯', val: s.red?.count || 0, color: COLORS.red },
    { key: 'off', name: '离线', val: s.off?.count || 0, color: COLORS.off },
  ].filter(x => x.val > 0).sort((a, b) => b.val - a.val)
  const total = items.reduce((sum, x) => sum + x.val, 0) || 1
  let angle = -Math.PI / 2
  return items.map(item => {
    const sweep = (item.val / total) * Math.PI * 2
    const seg = { ...item, startAngle: angle, endAngle: angle + sweep, pct: ((item.val / total) * 100).toFixed(2) }
    angle += sweep
    return seg
  })
})

// ========== hover 状态 ==========
const barHover = reactive({
  dur: { show: false, x: 0, y: 0, label: '', rows: [] },
  freq: { show: false, x: 0, y: 0, label: '', rows: [] },
})
const pieHover = reactive({
  dur: { show: false, x: 0, y: 0, seg: null },
  freq: { show: false, x: 0, y: 0, seg: null },
})

// 存储柱子位置用于 hit test（每次重绘后更新）
let durBarsMeta = []
let freqBarsMeta = []

// ========== 绘制函数 ==========
const dpr = window.devicePixelRatio || 1
function setupCanvas(cvs, cssW, cssH) {
  cvs.width = Math.round(cssW * dpr)
  cvs.height = Math.round(cssH * dpr)
  cvs.style.width = cssW + 'px'
  cvs.style.height = cssH + 'px'
  const ctx = cvs.getContext('2d')
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
  return { ctx, W: cssW, H: cssH }
}

function drawDurBar() {
  const cvs = durCanvas.value
  if (!cvs) return
  const wrap = cvs.parentElement
  const cssW = wrap ? wrap.clientWidth : durCanvasW.value
  const cssH = 260
  const { ctx, W, H } = setupCanvas(cvs, cssW, cssH)
  ctx.clearRect(0, 0, W, H)
  const plotTop = 20, plotBottom = H - padB
  const plotH = plotBottom - plotTop
  const n = displayList.value.length
  const groupW = n ? (W - padL - 10) / n : 1
  const ticks = durYTicks.value
  const maxSec = maxDurSec.value

  // Y轴刻度（最大值在上，0在下）
  ctx.font = '10px sans-serif'
  ctx.fillStyle = '#999'
  ctx.textAlign = 'right'
  for (let i = 0; i < ticks.length; i++) {
    const y = plotBottom - (i / (ticks.length - 1)) * plotH + 3
    ctx.fillText(ticks[i], 32, y)
  }

  // X轴标签
  ctx.font = '9px sans-serif'
  ctx.fillStyle = '#666'
  ctx.textAlign = 'center'
  displayList.value.forEach((item, i) => {
    ctx.fillText(item.label || formatDateShort(item.startDate), padL + (i + 0.5) * groupW, H - 4)
  })

  // 网格线
  ctx.strokeStyle = '#f0f0f0'
  ctx.lineWidth = 1
  for (let i = 0; i < ticks.length; i++) {
    const y = plotBottom - (i / (ticks.length - 1)) * plotH
    ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(W - 10, y); ctx.stroke()
  }

  // 绘制柱子并记录位置（从底部向上堆叠：离线底 → 绿灯顶）
  durBarsMeta = []
  displayList.value.forEach((item, idx) => {
    const bx = padL + idx * groupW + (groupW - Math.min(groupW - 8, 50)) / 2
    const bw = Math.min(groupW - 8, 50)
    const stack = [
      { k: 'off', sec: item.off?.seconds || 0 },
      { k: 'red', sec: item.red?.seconds || 0 },
      { k: 'yellow', sec: item.yellow?.seconds || 0 },
      { k: 'green', sec: item.green?.seconds || 0 },
    ]
    const scale = plotH / maxSec
    let curY = plotBottom
    const barRect = { x: bx, w: bw, idx, label: item.label || formatDateShort(item.startDate), colors: [] }
    stack.forEach(seg => {
      if (seg.sec <= 0) return
      const h = seg.sec * scale
      curY -= h
      ctx.fillStyle = COLORS[seg.k]
      ctx.fillRect(bx, curY, bw, h)
      barRect.colors.push({ c: COLORS[seg.k], n: COLOR_NAMES[seg.k], t: formatSec(seg.sec), v: seg.sec, rect: { x: bx, y: curY, w: bw, h } })
    })
    durBarsMeta.push(barRect)
  })
}

function drawFreqBar() {
  const cvs = freqCanvas.value
  if (!cvs) return
  const wrap = cvs.parentElement
  const cssW = wrap ? wrap.clientWidth : freqCanvasW.value
  const cssH = 280
  const { ctx, W, H } = setupCanvas(cvs, cssW, cssH)
  ctx.clearRect(0, 0, W, H)
  const plotTop = 28, plotBottom = H - padB
  const plotH = plotBottom - plotTop
  const n = displayList.value.length
  const groupW = n ? (W - padL - 10) / n : 1
  const ticks = freqYTicks.value
  const maxCnt = freqYTicks.value[ticks.length - 1] || maxFreqCount.value || 1

  // Y轴（最大值在上，0在下）
  ctx.font = '10px sans-serif'; ctx.fillStyle = '#999'; ctx.textAlign = 'right'
  for (let i = 0; i < ticks.length; i++) {
    const y = plotBottom - (i / (ticks.length - 1)) * plotH + 3
    ctx.fillText(ticks[i] + '次', 32, y)
  }

  // X轴
  ctx.font = '9px sans-serif'; ctx.fillStyle = '#666'; ctx.textAlign = 'center'
  displayList.value.forEach((item, i) => {
    ctx.fillText(item.label || formatDateShort(item.startDate), padL + (i + 0.5) * groupW, H - 4)
  })

  // 网格
  ctx.strokeStyle = '#f0f0f0'; ctx.lineWidth = 1
  for (let i = 0; i < ticks.length; i++) {
    const y = plotBottom - (i / (ticks.length - 1)) * plotH
    ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(W - 10, y); ctx.stroke()
  }

  // 柱子（从底部向上堆叠：离线底 → 绿灯顶）
  freqBarsMeta = []
  displayList.value.forEach((item, idx) => {
    const bx = padL + idx * groupW + (groupW - Math.min(groupW - 8, 50)) / 2
    const bw = Math.min(groupW - 8, 50)
    const scale = plotH / maxCnt
    let curY = plotBottom
    const barRect = { x: bx, w: bw, idx, label: item.label || formatDateShort(item.startDate), colors: [] }
    const stack = [
      { k: 'off', cnt: item.off?.count || 0 },
      { k: 'red', cnt: item.red?.count || 0 },
      { k: 'yellow', cnt: item.yellow?.count || 0 },
      { k: 'green', cnt: item.green?.count || 0 },
    ]
    stack.forEach(seg => {
      if (seg.cnt <= 0) return
      const h = seg.cnt * scale
      curY -= h
      ctx.fillStyle = COLORS[seg.k]
      ctx.fillRect(bx, curY, bw, h)
      barRect.colors.push({ c: COLORS[seg.k], n: COLOR_NAMES[seg.k], t: '', v: seg.cnt, rect: { x: bx, y: curY, w: bw, h } })
    })
    freqBarsMeta.push(barRect)
  })
}

let durPieHighlightIdx = -1
let freqPieHighlightIdx = -1

function drawDurPie(highlightIdx = -1) {
  const cvs = durPieCanvas.value
  if (!cvs) return
  const { ctx } = setupCanvas(cvs, 180, 180)
  ctx.clearRect(0, 0, 180, 180)
  const cx = 90, cy = 90, R = 68
  const segs = durPieSegs.value

  segs.forEach((seg, i) => {
    const isHL = i === highlightIdx
    const r = isHL ? R + 5 : R
    ctx.beginPath()
    ctx.moveTo(cx, cy)
    ctx.arc(cx, cy, r, seg.startAngle, seg.endAngle)
    ctx.closePath()
    ctx.fillStyle = isHL ? lightenColor(seg.color, 20) : seg.color
    ctx.fill()
  })

  // 每个扇区中间显示白色文字（百分比 + 名称）
  ctx.fillStyle = '#fff'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  segs.forEach((seg) => {
    const midAngle = (seg.startAngle + seg.endAngle) / 2
    // 文字位置在扇区半径的约60%处
    const tx = cx + Math.cos(midAngle) * R * 0.58
    const ty = cy + Math.sin(midAngle) * R * 0.58
    ctx.font = 'bold 12px sans-serif'
    ctx.fillText(seg.pct + '%', tx, ty - 6)
    ctx.font = '9px sans-serif'
    ctx.fillText(seg.name, tx, ty + 7)
  })
}

function drawFreqPie(highlightIdx = -1) {
  const cvs = freqPieCanvas.value
  if (!cvs) return
  const { ctx } = setupCanvas(cvs, 180, 180)
  ctx.clearRect(0, 0, 180, 180)
  const cx = 90, cy = 90, R = 68
  const segs = freqPieSegs.value

  segs.forEach((seg, i) => {
    const isHL = i === highlightIdx
    const r = isHL ? R + 5 : R
    ctx.beginPath()
    ctx.moveTo(cx, cy)
    ctx.arc(cx, cy, r, seg.startAngle, seg.endAngle)
    ctx.closePath()
    ctx.fillStyle = isHL ? lightenColor(seg.color, 20) : seg.color
    ctx.fill()
  })

  // 每个扇区中间显示白色文字（百分比 + 名称）
  ctx.fillStyle = '#fff'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  segs.forEach((seg) => {
    const midAngle = (seg.startAngle + seg.endAngle) / 2
    const tx = cx + Math.cos(midAngle) * R * 0.58
    const ty = cy + Math.sin(midAngle) * R * 0.58
    ctx.font = 'bold 12px sans-serif'
    ctx.fillText(seg.pct + '%', tx, ty - 6)
    ctx.font = '9px sans-serif'
    ctx.fillText(seg.name, tx, ty + 7)
  })
}

function lightenColor(hex, amt) {
  let c = hex.replace('#','')
  if(c.length===3) c=c[0]+c[0]+c[1]+c[1]+c[2]+c[2]
  const num = parseInt(c,16)
  const r = Math.min(255,(num>>16)+amt), g = Math.min(255,((num>>8)&0xff)+amt), b = Math.min(255,(num&0xff)+amt)
  return `rgb(${r},${g},${b})`
}

// ========== hover 事件处理 ==========
function getCanvasPos(e, canvasEl) {
  const rect = canvasEl.getBoundingClientRect()
  const scaleX = canvasEl.width / rect.width
  const scaleY = canvasEl.height / rect.height
  return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }
}

function onBarMove(e, type) {
  const cvs = type === 'dur' ? durCanvas.value : freqCanvas.value
  if (!cvs) return
  const pos = getCanvasPos(e, cvs)
  const metaArr = type === 'dur' ? durBarsMeta : freqBarsMeta
  const state = barHover[type]

  for (const bar of metaArr) {
    if (pos.x >= bar.x && pos.x <= bar.x + bar.w) {
      state.show = true
      state.x = e.offsetX + 10
      state.y = e.offsetY - 10
      state.label = bar.label
      state.rows = bar.colors.map(c => ({ n: c.n, c: c.c, t: c.t, v: c.v }))
      return
    }
  }
  state.show = false
}

function onBarLeave(type) {
  barHover[type].show = false
}

function onPieMove(e, type) {
  const cvs = type === 'dur' ? durPieCanvas.value : freqPieCanvas.value
  if (!cvs) return
  const pos = getCanvasPos(e, cvs)
  const cx = 90, cy = 90
  const dx = pos.x - cx, dy = pos.y - cy
  const dist = Math.sqrt(dx * dx + dy * dy)
  const segs = type === 'dur' ? durPieSegs.value : freqPieSegs.value
  const state = pieHover[type]

  if (dist > 0 && dist <= 76) {
    let angle = Math.atan2(dy, dx)
    if (angle < -Math.PI / 2) angle += Math.PI * 2
    for (let i = 0; i < segs.length; i++) {
      let sa = segs[i].startAngle, ea = segs[i].endAngle
      if (sa < -Math.PI / 2) sa += Math.PI * 2
      if (ea < -Math.PI / 2) ea += Math.PI * 2
      if (angle >= sa && angle < ea) {
        state.show = true
        state.x = e.offsetX + 10
        state.y = e.offsetY - 10
        state.seg = segs[i]
        if (type === 'dur') { durPieHighlightIdx = i; drawDurPie(i) }
        else { freqPieHighlightIdx = i; drawFreqPie(i) }
        return
      }
    }
  }
  if (state.show) {
    state.show = false
    if (type === 'dur') { durPieHighlightIdx = -1; drawDurPie(-1) }
    else { freqPieHighlightIdx = -1; drawFreqPie(-1) }
  }
}

function onPieLeave(type) {
  pieHover[type].show = false
  if (type === 'dur') { durPieHighlightIdx = -1; drawDurPie(-1) }
  else { freqPieHighlightIdx = -1; drawFreqPie(-1) }
}

// ========== 重绘全部 ==========
function redrawAll() {
  nextTick(() => {
    drawDurBar()
    drawFreqBar()
    drawDurPie(-1)
    drawFreqPie(-1)
  })
}

// ========== 接口调用 ==========
async function fetchOeeData() {
  const dtuSn = props.device?._raw?.dtuSn || ''
  if (!dtuSn) return
  let params = `dtuSn=${dtuSn}&type=${queryMode.value}`
  if (queryMode.value === 'day') {
    const [start, end] = queryDateRange.value || []
    if (!start || !end) return
    params += `&startDate=${start}&endDate=${end}`
  }
  try {
    const res = await fetch(withCorpCode(`/api/device/oeeStats?${params}`))
    oeeData.value = await res.json()
  } catch (err) {
    console.error('获取稼动率数据失败:', err)
  }
}

watch(queryMode, () => fetchOeeData())
watch(oeeData, () => redrawAll())
watch([durCanvasW, freqCanvasW], () => redrawAll())

watch(() => props.visible, (val) => {
  if (val) { fetchOeeData() }
})

onMounted(() => {
  if (props.visible) fetchOeeData()
})
</script>

<style scoped>
.util-dialog :deep(.el-dialog) {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.util-dialog :deep(.el-dialog__header) {
  padding: 10px 20px;
  border-bottom: 1px solid #e8e8e8;
  margin: 0;
  flex-shrink: 0;
}
.util-dialog :deep(.el-dialog__body) {
  overflow-y: auto;
  flex: 1;
}
.dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.title-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}
.header-center {
  display: flex;
  align-items: center;
  flex: 1;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.util-body { padding: 0; }
.top-row, .bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
  gap: 12px;
  padding: 12px 16px;
}
.bottom-row { border-top: 1px solid #e8e8e8; }

.chart-card, .pie-card {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 16px;
  background: #fff;
}
.card-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.card-title-row h4 {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0;
}
.card-subtitle { font-size: 11px; color: #aaa; }

.legend-inline {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: #666;
  margin-bottom: 8px;
}
.leg { display: flex; align-items: center; gap: 4px; }
.dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.dot.green { background: #67c23a; }
.dot.yellow { background: #e6a23c; }
.dot.red { background: #f56c6c; }
.dot.gray { background: #909399; }

.canvas-wrap {
  position: relative;
  width: 100%;
}
.canvas-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
}

/* 柱状图 tooltip */
.bar-tooltip {
  position: absolute;
  z-index: 10;
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.7;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(8px, -100%);
}
.tt-title {
  font-weight: bold;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding-bottom: 2px;
}
.tt-row { display: flex; align-items: center; gap: 4px; }
.tt-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

/* 环形图区域 */
.pie-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pie-canvas-wrap { width: 180px; height: 180px; }
.pie-canvas-wrap canvas { width: 180px; height: 180px; }

/* 环形图 tooltip */
.pie-tooltip {
  position: absolute;
  z-index: 10;
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(8px, -100%);
}

.pie-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #666;
}
.pleg { display: flex; align-items: center; gap: 4px; }
.pdot { width: 10px; height: 10px; border-radius: 2px; }
.pdot.green { background: #67c23a; }
.pdot.yellow { background: #e6a23c; }
.pdot.red { background: #f56c6c; }
.pdot.gray { background: #909399; }
.date-wrap {
  display: inline-block;
  width: 360px;
  margin-left: 8px;
  overflow: hidden;
  vertical-align: middle;
}
</style>