<template>
  <div class="system-load-heatmap">
    <div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></div>
  </div>
</template>

<script setup>
import { computed, shallowRef } from 'vue'
import { HeatmapChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, VisualMapComponent } from 'echarts/components'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'

import { useEcharts } from '../../composables/useEcharts.js'
import { useThemeColors } from '../../composables/useThemeColors.js'

use([GridComponent, TooltipComponent, VisualMapComponent, HeatmapChart, CanvasRenderer])

const props = defineProps({
  hours: { type: Array, required: true },
  tools: { type: Array, required: true },
  values: { type: Array, required: true }
})

const chartElement = shallowRef(null)
const themeColors = useThemeColors()
const maxValue = computed(() => Math.max(...props.values.map((item) => Number(item[2] || 0)), 1))
const ariaLabel = computed(() =>
  props.values.map(([hourIndex, toolIndex, value]) => (
    `${props.hours[hourIndex] || ''}${props.tools[toolIndex] || ''}${value || 0}次`
  )).join('；')
)

const chartOptions = computed(() => ({
  backgroundColor: 'transparent',
  animation: true,
  animationDuration: 760,
  animationEasing: 'cubicOut',
  grid: {
    top: 20,
    right: 18,
    bottom: 18,
    left: 78,
    containLabel: false
  },
  tooltip: {
    position: 'top',
    confine: true,
    appendToBody: true,
    backgroundColor: 'rgba(255, 255, 255, 0.98)',
    borderColor: 'rgba(148, 163, 184, 0.24)',
    borderWidth: 1,
    padding: [9, 10],
    textStyle: {
      color: '#334155',
      fontSize: 12,
      fontWeight: 700
    },
    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
    formatter: (params) => {
      const [hourIndex, toolIndex, value] = params.value || []
      return `${params.marker}${props.tools[toolIndex] || ''}<br/>${props.hours[hourIndex] || ''}: ${value || 0} 次`
    }
  },
  visualMap: {
    show: false,
    min: 0,
    max: maxValue.value,
    inRange: {
      color: [
        '#eef6fb',
        '#d7e9f3',
        themeColors.value.chartPrimary,
        themeColors.value.primaryActive
      ]
    }
  },
  xAxis: {
    type: 'category',
    data: props.hours,
    splitArea: { show: true },
    axisTick: { show: false },
    axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.28)' } },
    axisLabel: {
      color: '#64748b',
      fontSize: 11,
      fontWeight: 700
    }
  },
  yAxis: {
    type: 'category',
    data: props.tools,
    splitArea: { show: true },
    axisTick: { show: false },
    axisLine: { show: false },
    axisLabel: {
      color: '#475569',
      fontSize: 12,
      fontWeight: 750
    }
  },
  series: [
    {
      name: '调用热力',
      type: 'heatmap',
      data: props.values,
      label: {
        show: true,
        color: '#ffffff',
        fontSize: 10,
        fontWeight: 800,
        formatter: ({ value }) => value?.[2] || 0
      },
      itemStyle: {
        borderColor: '#ffffff',
        borderWidth: 2,
        borderRadius: 4
      },
      emphasis: {
        itemStyle: {
          borderColor: themeColors.value.primaryActive,
          borderWidth: 2
        }
      }
    }
  ]
}))

useEcharts(chartElement, chartOptions)
</script>

<style scoped>
.system-load-heatmap {
  height: 320px;
}

.chart-body {
  width: 100%;
  height: 100%;
}
</style>
