<template>
  <div class="ts-h5">
    <div class="toolbar">
      <div class="left">
        <div class="mode">日查询</div>
        <el-date-picker
          v-model="tsDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期"
          size="small"
          style="width: 150px;"
          :disabled-date="disabledDate"
          @change="onDateChange"
        />
      </div>
      <el-button type="primary" size="small" :loading="loading" @click="resetAndFetch">查询</el-button>
    </div>

    <div class="canvas-card">
      <div
        ref="ganttContainerRef"
        class="gantt-wrap"
        @wheel.prevent="onGanttWheel"
        @pointerdown="onPointerDown"
        @pointermove="onPointerMove"
        @pointerup="onPointerUp"
        @pointercancel="onPointerUp"
        @pointerleave="onPointerLeave"
      >
        <canvas ref="ganttCanvasRef" class="gantt-canvas"></canvas>
        <div
          v-if="ganttHoveredSeg"
          class="gantt-tooltip"
          :style="{ left: ganttTooltipPos.x + 'px', top: ganttTooltipPos.y + 'px' }"
        >
          <div class="gtt-row">
            <span class="gtt-dot" :style="{ background: getLampColor(ganttHoveredSeg.lampState) }"></span>
            {{ getLampLabelName(ganttHoveredSeg.lampState) }}: {{ formatDuration(ganttHoveredSeg.duration) }}
          </div>
          <div class="gtt-sub">{{ formatTimeRange(ganttHoveredSeg.startTime, ganttHoveredSeg.endTime) }}</div>
        </div>
      </div>

      <el-empty v-if="!loading && timeSeriesData.length === 0" description="暂无数据" />

      <div v-if="timeSeriesData.length > 0" class="load-more">
        <div ref="sentinelRef" class="load-sentinel"></div>
        <div v-if="loadingMore" class="load-text">加载中...</div>
        <div v-else-if="!loading && !hasMore" class="load-text">没有更多了</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { apiFetch } from '../../config/api.js'

const tsDate = ref('')
const loading = ref(false)
const loadingMore = ref(false)
const tsPageNo = ref(0)
const tsPageSize = 12
const timeSeriesData = ref([])
const hasMore = ref(true)

const canLoadMore = computed(() => timeSeriesData.value.length > 0 && hasMore.value)

function disabledDate(time) {
  return time.getTime() > Date.now()
}

function onDateChange() {
  resetAndFetch()
}

function getLampLabelName(lampState) {
  if (lampState === 3 || lampState === '3') return '绿灯'
  if (lampState === 2 || lampState === '2') return '黄灯'
  if (lampState === 1 || lampState === '1') return '红灯'
  return '灭灯'
}

function getLampColor(lampState) {
  if (lampState === 3 || lampState === '3') return '#67c23a'
  if (lampState === 2 || lampState === '2') return '#e6a23c'
  if (lampState === 1 || lampState === '1') return '#f56c6c'
  return '#909399'
}

function formatDuration(dur) {
  const v = Number(dur || 0)
  if (v <= 0) return '0秒'
  if (v > 3600) {
    const h = Math.floor(v / 3600)
    const m = Math.floor((v % 3600) / 60)
    return `${h}时${m}分`
  }
  if (v > 60) {
    const m = Math.floor(v / 60)
    const s = Math.floor(v % 60)
    return `${m}分${s}秒`
  }
  return `${Math.floor(v)}秒`
}

function formatTimeRange(start, end) {
  const fmt = (ts) => {
    const d = ts ? new Date(String(ts).replace(/-/g, '/')) : new Date()
    return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')} ${String(
      d.getHours()
    ).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
  }
  return `${fmt(start)} ~ ${fmt(end || start)}`
}

function getTimeBounds() {
  const dateStr = tsDate.value || ''
  const startDate = dateStr ? new Date(dateStr) : new Date()
  startDate.setHours(0, 0, 0, 0)
  const endDate = new Date(startDate)
  endDate.setHours(23, 59, 59, 999)
  return { startTime: startDate.getTime(), endTime: endDate.getTime() + 1 }
}

function parseStartTime(timeStr) {
  const d = new Date(String(timeStr).replace(/-/g, '/'))
  return d.getTime()
}

function resetAndFetch() {
  tsPageNo.value = 0
  timeSeriesData.value = []
  hasMore.value = true
  ganttZoomLevel.value = 1
  ganttViewOffsetX.value = 0
  fetchTimeSeriesData({ page: 1, append: false })
}

async function fetchTimeSeriesData({ page = 1, append = false } = {}) {
  if (!tsDate.value) {
    ElMessage.warning('请选择查询日期')
    return
  }

  if (loading.value || loadingMore.value) return
  if (append && !hasMore.value) return
  if (append) loadingMore.value = true
  else loading.value = true
  try {
    const params = new URLSearchParams({
      startDate: tsDate.value,
      endDate: tsDate.value,
      pageNo: String(page),
      pageSize: String(tsPageSize)
    })
    const res = await apiFetch(`/api/device/oeeTimeline?${params}`)
    const data = await res.json()
    const records = data?.data?.records || []
    const mapped = records.map(record => ({
      name: record.deviceName || record.dtuSn || '',
      rate: Number.parseFloat(record.availabilityRatio || 0).toFixed(1),
      segments: (record.lampData || []).map(item => ({
        duration: item.duration,
        lampState: item.lampState,
        startTime: item.startTime,
        endTime: item.endTime || ''
      }))
    }))
    hasMore.value = mapped.length >= tsPageSize
    timeSeriesData.value = append ? timeSeriesData.value.concat(mapped) : mapped
    tsPageNo.value = page

    await nextTick()
    drawGanttChart()
    await nextTick()
    ensureAutoLoad()
  } catch (e) {
    ElMessage.error('获取时序数据失败')
    console.warn(e)
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

const ganttCanvasRef = ref(null)
const ganttContainerRef = ref(null)
const ganttZoomLevel = ref(1)
const ganttViewOffsetX = ref(0)
const GANTT_MIN_ZOOM = 0.06
const GANTT_MAX_ZOOM = 1

const ganttHoveredSeg = ref(null)
const ganttTooltipPos = ref({ x: 0, y: 0 })

function clampViewOffset(vo, z, plotW) {
  const maxVo = Math.max(0, plotW - plotW * z)
  return Math.max(0, Math.min(maxVo, vo))
}

function onGanttWheel(e) {
  const container = ganttContainerRef.value
  if (!container) return
  const rect = container.getBoundingClientRect()
  const PAD = 8
  const nameColWidth = 100
  const rateColWidth = 56
  const leftFixedWidth = nameColWidth + rateColWidth
  const mx = e.clientX - rect.left - PAD
  if (mx < leftFixedWidth || mx < 0) return

  const plotW = container.clientWidth - PAD * 2 - leftFixedWidth
  if (plotW <= 0) return

  const z = ganttZoomLevel.value
  const vo = ganttViewOffsetX.value
  const mouseDataX = vo + (mx - leftFixedWidth) * z
  const delta = e.deltaY < 0 ? 0.8 : 1.25
  const nextZ = Math.max(GANTT_MIN_ZOOM, Math.min(GANTT_MAX_ZOOM, z * delta))
  let nextVo = mouseDataX - (mx - leftFixedWidth) * nextZ
  nextVo = clampViewOffset(nextVo, nextZ, plotW)
  ganttViewOffsetX.value = nextVo
  ganttZoomLevel.value = nextZ
  drawGanttChart()
}

const drag = ref({ active: false, pointerId: null, startX: 0, startVo: 0, moved: false })

function onPointerDown(e) {
  if (!ganttContainerRef.value) return
  drag.value.active = true
  drag.value.pointerId = e.pointerId
  drag.value.startX = e.clientX
  drag.value.startVo = ganttViewOffsetX.value
  drag.value.moved = false
  e.currentTarget.setPointerCapture?.(e.pointerId)
}

function onPointerMove(e) {
  const container = ganttContainerRef.value
  if (!container) return

  if (drag.value.active && drag.value.pointerId === e.pointerId) {
    const dx = e.clientX - drag.value.startX
    if (Math.abs(dx) > 4) drag.value.moved = true

    const PAD = 8
    const nameColWidth = 100
    const rateColWidth = 56
    const leftFixedWidth = nameColWidth + rateColWidth
    const plotW = container.clientWidth - PAD * 2 - leftFixedWidth
    if (plotW > 0) {
      const z = ganttZoomLevel.value
      let nextVo = drag.value.startVo - dx * z
      nextVo = clampViewOffset(nextVo, z, plotW)
      ganttViewOffsetX.value = nextVo
      drawGanttChart()
    }
    return
  }

  if (e.pointerType === 'mouse') onHitTest(e)
}

function onPointerUp(e) {
  if (drag.value.active && drag.value.pointerId === e.pointerId) {
    drag.value.active = false
    drag.value.pointerId = null
    if (!drag.value.moved) onHitTest(e)
  }
}

function onPointerLeave() {
  if (ganttHoveredSeg.value) {
    ganttHoveredSeg.value = null
    drawGanttChart()
  }
}

function onHitTest(e) {
  const container = ganttContainerRef.value
  if (!container) return
  const rect = container.getBoundingClientRect()
  const PAD = 8
  const nameColWidth = 100
  const rateColWidth = 56
  const leftFixedWidth = nameColWidth + rateColWidth
  const mx = e.clientX - rect.left - PAD
  const my = e.clientY - rect.top - PAD
  if (mx < leftFixedWidth || mx < 0) {
    if (ganttHoveredSeg.value) {
      ganttHoveredSeg.value = null
      drawGanttChart()
    }
    return
  }

  const rowHeight = 34
  const headerHeight = 36
  const rowIdx = Math.floor((my - headerHeight) / rowHeight)
  if (rowIdx < 0 || rowIdx >= timeSeriesData.value.length) {
    if (ganttHoveredSeg.value) {
      ganttHoveredSeg.value = null
      drawGanttChart()
    }
    return
  }

  const dev = timeSeriesData.value[rowIdx]
  const { startTime: tStart, endTime: tEnd } = getTimeBounds()
  const totalMs = tEnd - tStart || 86400000
  const plotW = container.clientWidth - PAD * 2 - leftFixedWidth
  const barPad = 4
  const innerPlotW = plotW - barPad * 2
  const z = ganttZoomLevel.value
  const vo = ganttViewOffsetX.value
  const mouseDataX = vo + (mx - leftFixedWidth) * z

  const rowY = headerHeight + rowIdx * rowHeight
  const barY = rowY + (rowHeight - 16) / 2
  const barH = 16
  if (my < barY || my > barY + barH) {
    if (ganttHoveredSeg.value) {
      ganttHoveredSeg.value = null
      drawGanttChart()
    }
    return
  }

  let hitSeg = null
  for (let i = (dev.segments || []).length - 1; i >= 0; i--) {
    const seg = dev.segments[i]
    const segStartMs = parseStartTime(seg.startTime)
    const durMs = (seg.duration || 0) * 1000
    const pct = Math.max(0, (segStartMs - tStart) / totalMs)
    const wPct = durMs / totalMs
    const dataSx = barPad + pct * innerPlotW
    const dataSw = Math.max(wPct * innerPlotW, 1)
    if (mouseDataX >= dataSx && mouseDataX <= dataSx + dataSw) {
      hitSeg = seg
      break
    }
  }

  if (hitSeg !== ganttHoveredSeg.value) {
    ganttHoveredSeg.value = hitSeg
    if (hitSeg) {
      ganttTooltipPos.value = { x: mx + PAD + 8, y: my + PAD + 8 }
    }
    drawGanttChart()
  } else if (hitSeg) {
    ganttTooltipPos.value = { x: mx + PAD + 8, y: my + PAD + 8 }
  }
}

function drawGanttChart() {
  const canvas = ganttCanvasRef.value
  const container = ganttContainerRef.value
  if (!canvas || !container) return

  const PAD = 8
  const rowHeight = 34
  const headerHeight = 36
  const nameColWidth = 100
  const rateColWidth = 56
  const leftFixedWidth = nameColWidth + rateColWidth
  const containerW = container.clientWidth - PAD * 2
  const plotW = containerW - leftFixedWidth
  const totalHeight = Math.max(headerHeight + timeSeriesData.value.length * rowHeight, 200)

  canvas.width = containerW
  canvas.height = totalHeight
  canvas.style.width = containerW + 'px'
  canvas.style.height = totalHeight + 'px'

  const ctx = canvas.getContext('2d')
  const W = containerW
  const H = totalHeight

  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, W, H)

  const { startTime: tStart, endTime: tEnd } = getTimeBounds()
  const totalMs = tEnd - tStart || 86400000

  const z = ganttZoomLevel.value
  const vo = clampViewOffset(ganttViewOffsetX.value, z, plotW)
  ganttViewOffsetX.value = vo

  ctx.fillStyle = '#fafafa'
  ctx.fillRect(0, 0, leftFixedWidth, headerHeight)
  ctx.strokeStyle = '#e0e0e0'
  ctx.lineWidth = 2
  ctx.beginPath()
  ctx.moveTo(0, headerHeight)
  ctx.lineTo(leftFixedWidth, headerHeight)
  ctx.stroke()
  ctx.fillStyle = '#333'
  ctx.font = 'bold 12px sans-serif'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText('设备', nameColWidth / 2, headerHeight / 2)
  ctx.fillText('稼动', nameColWidth + rateColWidth / 2, headerHeight / 2)
  ctx.strokeStyle = '#ebeef5'
  ctx.lineWidth = 1
  ctx.beginPath()
  ctx.moveTo(nameColWidth, 0)
  ctx.lineTo(nameColWidth, H)
  ctx.stroke()
  ctx.beginPath()
  ctx.moveTo(leftFixedWidth, 0)
  ctx.lineTo(leftFixedWidth, H)
  ctx.stroke()

  timeSeriesData.value.forEach((dev, idx) => {
    const y = headerHeight + idx * rowHeight
    ctx.fillStyle = idx % 2 === 0 ? '#fff' : '#fafbfc'
    ctx.fillRect(0, y, leftFixedWidth, rowHeight)
    ctx.strokeStyle = '#ebeef5'
    ctx.beginPath()
    ctx.moveTo(0, y)
    ctx.lineTo(leftFixedWidth, y)
    ctx.stroke()
    ctx.fillStyle = '#409eff'
    ctx.font = '11px sans-serif'
    ctx.textAlign = 'left'
    ctx.textBaseline = 'middle'
    const dn = dev.name.length > 9 ? dev.name.slice(0, 9) + '..' : dev.name
    ctx.fillText(dn, 8, y + rowHeight / 2)
    ctx.fillStyle = '#333'
    ctx.font = 'bold 11px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText(`${dev.rate}%`, nameColWidth + rateColWidth / 2, y + rowHeight / 2)
  })

  ctx.fillStyle = '#fafafa'
  ctx.fillRect(leftFixedWidth, 0, plotW, headerHeight)
  ctx.strokeStyle = '#e0e0e0'
  ctx.lineWidth = 2
  ctx.beginPath()
  ctx.moveTo(leftFixedWidth, headerHeight)
  ctx.lineTo(W, headerHeight)
  ctx.stroke()

  const visMs = Math.max(1000, totalMs * z)
  let stepMs = 2 * 3600 * 1000
  if (visMs <= 600000) stepMs = 15 * 60 * 1000
  else if (visMs <= 1800000) stepMs = 30 * 60 * 1000
  else if (visMs <= 28800000) stepMs = 3600 * 1000
  else stepMs = 2 * 3600 * 1000

  const leftMs = (vo / plotW) * totalMs
  let firstMs = Math.floor(leftMs / stepMs) * stepMs
  if (firstMs < 0) firstMs = 0

  ctx.font = '10px sans-serif'
  ctx.fillStyle = '#666'
  for (let ms = firstMs; ms <= totalMs + stepMs * 2; ms += stepMs) {
    const dataX = (ms / totalMs) * plotW
    const screenX = leftFixedWidth + (dataX - vo) / z
    if (screenX < leftFixedWidth - 60 || screenX > W + 60) continue
    const dt = new Date(tStart + ms)
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(`${String(dt.getHours()).padStart(2, '0')}:${String(dt.getMinutes()).padStart(2, '0')}`, screenX, headerHeight / 2)
    ctx.strokeStyle = '#f0f0f0'
    ctx.lineWidth = 0.5
    ctx.beginPath()
    ctx.moveTo(screenX, headerHeight)
    ctx.lineTo(screenX, H)
    ctx.stroke()
  }

  timeSeriesData.value.forEach((dev, idx) => {
    const y = headerHeight + idx * rowHeight
    ctx.fillStyle = idx % 2 === 0 ? '#fff' : '#fafbfc'
    ctx.fillRect(leftFixedWidth, y, W - leftFixedWidth, rowHeight)
    ctx.strokeStyle = '#ebeef5'
    ctx.lineWidth = 1
    ctx.beginPath()
    ctx.moveTo(leftFixedWidth, y)
    ctx.lineTo(W, y)
    ctx.stroke()

    const segs = dev.segments || []
    if (segs.length === 0) return

    const barY = y + (rowHeight - 16) / 2
    const barH = 16
    const barPad = 4
    const innerPlotW = plotW - barPad * 2

    ctx.save()
    ctx.beginPath()
    ctx.rect(leftFixedWidth, headerHeight, W - leftFixedWidth, H - headerHeight)
    ctx.clip()

    segs.forEach(seg => {
      const segStartMs = parseStartTime(seg.startTime)
      const durMs = (seg.duration || 0) * 1000
      const pct = Math.max(0, (segStartMs - tStart) / totalMs)
      const wPct = durMs / totalMs
      const dataSx = barPad + pct * innerPlotW
      const dataSw = Math.max(wPct * innerPlotW, 1)
      const sx = leftFixedWidth + (dataSx - vo) / z
      const sw = dataSw / z
      if (sx + sw < leftFixedWidth - 20 || sx > W + 20) return

      const isHovered = ganttHoveredSeg.value === seg
      ctx.fillStyle = getLampColor(seg.lampState)
      if (isHovered) {
        ctx.globalAlpha = 0.7
        ctx.fillRect(sx, barY - 2, sw, barH + 4)
        ctx.globalAlpha = 1
        ctx.strokeStyle = 'rgba(0,0,0,0.5)'
        ctx.lineWidth = 1.5
        ctx.strokeRect(sx, barY - 2, sw, barH + 4)
      } else {
        ctx.fillRect(sx, barY, sw, barH)
        ctx.strokeStyle = 'rgba(255,255,255,0.35)'
        ctx.lineWidth = 0.5
        ctx.strokeRect(sx, barY, sw, barH)
      }
    })

    ctx.restore()
  })
}

const sentinelRef = ref(null)
let sentinelObserver = null
let ensureTimer = null

function loadMoreIfNeeded() {
  if (loading.value || loadingMore.value) return
  if (!canLoadMore.value) return
  const nextPage = tsPageNo.value + 1
  fetchTimeSeriesData({ page: nextPage, append: true })
}

function ensureAutoLoad() {
  if (ensureTimer) return
  ensureTimer = window.setTimeout(() => {
    ensureTimer = null
    if (!sentinelRef.value) return
    if (loading.value || loadingMore.value) return
    if (!canLoadMore.value) return
    const rect = sentinelRef.value.getBoundingClientRect()
    const vh = window.innerHeight || document.documentElement.clientHeight
    if (rect.top <= vh + 200) loadMoreIfNeeded()
  }, 0)
}

function attachObserver() {
  if (!sentinelRef.value) return
  if (!('IntersectionObserver' in window)) return
  if (sentinelObserver) return
  sentinelObserver = new IntersectionObserver(
    (entries) => {
      if (entries.some(e => e.isIntersecting)) loadMoreIfNeeded()
    },
    { root: null, rootMargin: '300px 0px 300px 0px', threshold: 0 }
  )
  sentinelObserver.observe(sentinelRef.value)
}

function detachObserver() {
  if (sentinelObserver) {
    sentinelObserver.disconnect()
    sentinelObserver = null
  }
}

onMounted(() => {
  const today = new Date()
  tsDate.value = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
  resetAndFetch()
  attachObserver()
})

onBeforeUnmount(() => {
  detachObserver()
  if (ensureTimer) {
    window.clearTimeout(ensureTimer)
    ensureTimer = null
  }
})

onActivated(() => {
  attachObserver()
  ensureAutoLoad()
})

onDeactivated(() => {
  detachObserver()
})
</script>

<style scoped>
.ts-h5 {
  padding: 0;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mode {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.canvas-card {
  margin-top: 10px;
}

.gantt-wrap {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 8px;
  overflow: hidden;
  touch-action: pan-y;
}

.gantt-canvas {
  width: 100%;
  display: block;
}

.gantt-tooltip {
  position: absolute;
  min-width: 180px;
  max-width: 240px;
  padding: 8px 10px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  pointer-events: none;
}

.gtt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.45;
}

.gtt-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.gtt-sub {
  margin-top: 6px;
  opacity: 0.9;
  line-height: 1.35;
  word-break: break-all;
}

.page-info,
.load-text {
  font-size: 12px;
  color: #475569;
}

.load-more {
  margin-top: 10px;
  text-align: center;
}

.load-sentinel {
  height: 1px;
}
</style>