<template>
  <div ref="chartElement" class="digital-employee-daily-work-chart" role="img" :aria-label="ariaLabel"></div>
</template>

<script setup>
import { computed, shallowRef } from 'vue'
import { BarChart as EChartsBarChart, LineChart as EChartsLineChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } 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,
  LegendComponent,
  TooltipComponent,
  EChartsBarChart,
  EChartsLineChart,
  CanvasRenderer
])

const props = defineProps({
  rows: { type: Array, default: () => [] }
})

const chartElement = shallowRef(null)
const themeColors = useThemeColors()
const labels = computed(() => props.rows.map((item) => item.date))
const totals = computed(() => props.rows.map((item) => Number(item.total || 0)))
const failed = computed(() => props.rows.map((item) => Number(item.failed || 0)))
const outputs = computed(() => props.rows.map((item) => Number(item.businessOutputs || 0)))
const maxValue = computed(() => Math.max(...totals.value, ...failed.value, ...outputs.value, 1))
const axisMax = computed(() => Math.max(5, Math.ceil(maxValue.value * 1.2)))

const ariaLabel = computed(() =>
  props.rows.map((item) => (
    `${item.date}工作${item.total || 0}次，失败${item.failed || 0}次，产出${item.businessOutputs || 0}项`
  )).join('；')
)

const chartOptions = computed(() => ({
  backgroundColor: 'transparent',
  animation: true,
  animationDuration: 900,
  animationDurationUpdate: 700,
  grid: {
    top: 34,
    right: 18,
    bottom: 24,
    left: 30,
    containLabel: true
  },
  legend: {
    top: 0,
    right: 4,
    itemWidth: 8,
    itemHeight: 8,
    textStyle: {
      color: '#64748b',
      fontSize: 11,
      fontWeight: 700
    }
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    appendToBody: true,
    backgroundColor: 'rgba(255,255,255,.98)',
    borderColor: 'rgba(148,163,184,.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);'
  },
  xAxis: {
    type: 'category',
    data: labels.value,
    boundaryGap: true,
    axisTick: { show: false },
    axisLine: { lineStyle: { color: 'rgba(148,163,184,.26)' } },
    axisLabel: {
      color: '#64748b',
      fontSize: 11,
      fontWeight: 700
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: axisMax.value,
    splitNumber: 4,
    axisLabel: {
      color: '#64748b',
      fontSize: 11,
      fontWeight: 700
    },
    splitLine: { lineStyle: { color: 'rgba(226,232,240,.74)' } }
  },
  series: [
    {
      name: '工作次数',
      type: 'bar',
      data: totals.value,
      barWidth: 18,
      itemStyle: {
        color: themeColors.value.chartPrimary,
        borderRadius: [4, 4, 0, 0]
      }
    },
    {
      name: '失败次数',
      type: 'bar',
      data: failed.value,
      barWidth: 18,
      itemStyle: {
        color: '#ef4444',
        borderRadius: [4, 4, 0, 0]
      }
    },
    {
      name: '业务产出',
      type: 'line',
      data: outputs.value,
      smooth: true,
      symbol: 'circle',
      symbolSize: 7,
      lineStyle: {
        width: 2.5,
        color: '#0f766e'
      },
      itemStyle: {
        color: '#ffffff',
        borderColor: '#0f766e',
        borderWidth: 2.5
      }
    }
  ]
}))

useEcharts(chartElement, chartOptions)
</script>

<style scoped>
.digital-employee-daily-work-chart {
  width: 100%;
  height: 100%;
  min-height: 280px;
}
</style>
