<template>
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <span class="card-title-icon">
          <Icon icon="fa-solid:gauge-high" />
        </span>
        <span>今日开机率/稼动率</span>
      </div>
      <span class="chip">{{ currentLineName }}</span>
    </div>
    <div class="card-body">
      <div id="chart-today" class="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'
import { useChart, colors } from '../utils'
import { DeviceOperationRecordApi, type DeviceOperationRecordVO } from '@/api/iot/deviceOperationRecord'

const { init, instance } = useChart('chart-today')

type LineMetric = { name: string; run: number; avail: number }
const lineMetrics = ref<LineMetric[]>([])

const currentLineName = ref('')
let timer: ReturnType<typeof setInterval> | null = null
let currentLineIndex = 0

const toRateNumber = (value: unknown) => {
  if (typeof value === 'number') {
    if (!Number.isFinite(value)) return 0
    if (value >= 0 && value <= 1) return Math.round(value * 10000) / 100
    return Math.max(0, Math.min(100, Math.round(value * 100) / 100))
  }
  const raw = String(value ?? '').trim()
  if (!raw) return 0
  const numeric = Number(raw.replace(/[^\d.+-]/g, ''))
  if (!Number.isFinite(numeric)) return 0
  if (raw.includes('%')) return Math.max(0, Math.min(100, Math.round(numeric * 100) / 100))
  if (numeric >= 0 && numeric <= 1) return Math.round(numeric * 10000) / 100
  return Math.max(0, Math.min(100, Math.round(numeric * 100) / 100))
}

const buildLineMetrics = (rows: DeviceOperationRecordVO[]) => {
  const groupMap = new Map<string, { name: string; power: number[]; util: number[] }>()
  rows.forEach((row) => {
    const name = String((row as any)?.lineName ?? (row as any)?.lineCode ?? row.deviceName ?? row.deviceCode ?? '').trim()
    if (!name) return
    const power = toRateNumber((row as any)?.powerOnRate)
    const util = toRateNumber((row as any)?.utilizationRate)
    const key = name
    if (!groupMap.has(key)) {
      groupMap.set(key, { name, power: [], util: [] })
    }
    const g = groupMap.get(key)!
    if (Number.isFinite(power)) g.power.push(power)
    if (Number.isFinite(util)) g.util.push(util)
  })
  const avg = (arr: number[]) => (arr.length ? arr.reduce((s, v) => s + v, 0) / arr.length : 0)
  const list = Array.from(groupMap.values()).map((g) => ({
    name: g.name,
    run: Math.round(avg(g.power) * 100) / 100,
    avail: Math.round(avg(g.util) * 100) / 100
  }))
  list.sort((a, b) => a.name.localeCompare(b.name))
  return list
}

const gaugeOption = (run: number, avail: number) => {
  return {
    backgroundColor: 'transparent',
    tooltip: { show: true },
    series: [
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        splitNumber: 10,
        radius: '88%',
        axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(30,144,255,0.18)']] } },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        pointer: { show: false },
        progress: { show: true, width: 8, itemStyle: { color: colors.blue } },
        detail: { formatter: '{value}%', color: '#fff', fontSize: 26, offsetCenter: ['0%', '-5%'] },
        title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '-25%'] },
        data: [{ value: run, name: '开机率' }]
      },
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        radius: '68%',
        axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(16,185,129,0.18)']] } },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        pointer: { show: false },
        progress: { show: true, width: 8, itemStyle: { color: colors.green } },
        detail: { formatter: '{value}%', color: '#fff', fontSize: 20, offsetCenter: ['0%', '45%'] },
        title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '25%'] },
        data: [{ value: avail, name: '稼动率' }]
      }
    ]
  }
}

const renderCurrent = () => {
  const list = lineMetrics.value
  if (!list.length) {
    currentLineName.value = '暂无数据'
    const c = instance()
    if (c) c.setOption(gaugeOption(0, 0))
    return
  }
  const idx = Math.max(0, Math.min(list.length - 1, currentLineIndex))
  const item = list[idx]
  currentLineName.value = item.name
  const c = instance()
  if (c) c.setOption(gaugeOption(item.run, item.avail))
}

const loadTodayOps = async () => {
  const res = await DeviceOperationRecordApi.getDeviceOperationList({})
  const rawList = Array.isArray(res) ? res : (res as any)?.list || (res as any)?.data || []
  const list = Array.isArray(rawList) ? (rawList as DeviceOperationRecordVO[]) : []
  lineMetrics.value = buildLineMetrics(list)
  currentLineIndex = 0
  renderCurrent()
}

const startRotate = () => {
  if (timer) clearInterval(timer)
  timer = null
  if (lineMetrics.value.length <= 1) return
  timer = setInterval(() => {
    const list = lineMetrics.value
    if (!list.length) return
    currentLineIndex = (currentLineIndex + 1) % list.length
    renderCurrent()
  }, 8000)
}

onMounted(async () => {
  const chart = init()
  if (!chart) return

  chart.setOption(gaugeOption(0, 0))
  try {
    await loadTodayOps()
  } catch (e) {
    console.error('Failed to load today ops:', e)
    lineMetrics.value = []
    currentLineIndex = 0
    renderCurrent()
  }
  startRotate()
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
.card {
  position: relative;
  display: flex;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
  border: 1px solid rgb(30 64 175 / 85%);
  border-radius: 10px;
  box-shadow:
    0 18px 45px rgb(15 23 42 / 95%),
    0 0 0 1px rgb(15 23 42 / 100%),
    inset 0 0 0 1px rgb(56 189 248 / 5%);
  flex-direction: column;
}

.card::before,
.card::after {
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
  border: 1px solid rgb(56 189 248 / 75%);
  border-radius: 2px;
  content: "";
  opacity: 0.6;
}

.card::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.card::after {
  right: -1px;
  bottom: -1px;
  border-top: none;
  border-left: none;
}

.card-header {
  display: flex;
  padding-bottom: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgb(41 54 95 / 90%);
  align-items: center;
  justify-content: space-between;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #e5f0ff;
}

.card-title-icon {
  color: #22d3ee;
}

.card-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.chip {
  display: inline-flex;
  padding: 4px 10px;
  font-size: 12px;
  color: #94a3b8;
  background: rgb(15 23 42 / 75%);
  border: 1px solid rgb(148 163 184 / 50%);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 180px;
}

@media (width <= 1600px) {
  .chart { min-height: 160px; }
}
</style>
