<template>
  <div class="card">
    <div class="panel-title">
      <span class="title-dot"></span>
      <span>产量趋势</span>
      <span class="tag">今日</span>
    </div>
    <div class="panel-body">
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import { colors, style } from '../utils'
import { DeviceWarningRecordApi } from '@/api/iot/deviceWarningRecord'

const route = useRoute()
const chartRef = ref<HTMLElement | null>(null)
let chart: echarts.ECharts | null = null

const render = async () => {
	if (!chart) return

	let x: string[] = []
	let output: number[] = []

	try {
		const orgId = route.query.orgId
		const res = await DeviceWarningRecordApi.getLastSevenHoursCount({ orgId })
		const raw = res && typeof res === 'object' && 'data' in (res as any) ? (res as any).data : res
		const list = Array.isArray(raw) ? raw : []
		if (list.length > 0) {
			x = list.map((item: any) => {
				const h = item.hour || item.time || item.key || item.name || ''
				if (typeof h === 'string' && h.includes(' ')) {
					return h.split(' ')[1]
				}
				return h
			})
			output = list.map((item: any) => {
				const val = item.count ?? item.value ?? item.output ?? 0
				const n = Number(val)
				return Number.isFinite(n) ? n : 0
			})
		}
	} catch (e) {
		console.error('Fetch production trend failed:', e)
	}

	chart.setOption({
		backgroundColor: 'transparent',
		tooltip: { trigger: 'axis' },
		grid: { top: '18%', left: '6%', right: '6%', bottom: '16%', containLabel: true },
		xAxis: {
			type: 'category',
			data: x,
			axisLine: style.axisLine,
			axisLabel: { ...style.axisLabel, fontSize: 10, rotate: 40 }
		},
		yAxis: {
			type: 'value',
			axisLine: { show: false },
			axisLabel: { ...style.axisLabel, fontSize: 10 },
			splitLine: style.splitLine
		},
		series: [
			{
				name: '产量',
				type: 'bar',
				barWidth: 12,
				itemStyle: {
					borderRadius: [6, 6, 0, 0],
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: colors.purple },
						{ offset: 1, color: 'rgba(139,92,246,0.10)' }
					])
				},
				data: output
			}
		]
	})
}

const resize = () => {
  chart?.resize()
}

onMounted(() => {
  if (!chartRef.value) return
  chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
  render()
  window.addEventListener('resize', resize)
})

onUnmounted(() => {
  window.removeEventListener('resize', resize)
  chart?.dispose()
})
</script>

<style scoped>
.card {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  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: 8px;
  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: 12px;
  height: 12px;
  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;
}

.panel-title {
  display: flex;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 900;
  color: #e5f0ff;
  border-bottom: 1px solid rgb(41 54 95 / 90%);
  align-items: center;
  gap: 10px;
}

.title-dot {
  width: 10px;
  height: 10px;
  border: 1px solid rgb(56 189 248 / 95%);
  border-radius: 50%;
  box-shadow: 0 0 12px rgb(56 189 248 / 45%);
}

.tag {
  padding: 2px 8px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: rgb(148 163 184 / 95%);
  background: rgb(2 6 23 / 20%);
  border: 1px solid rgb(148 163 184 / 40%);
  border-radius: 999px;
}

.panel-body {
  flex: 1;
  min-height: 0;
  padding: 10px 12px;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 160px;
}
</style>
