<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts'

import { onMounted, ref, watch } from 'vue'

import { EchartsUI, useEcharts } from '@vben/plugins/echarts'

const props = defineProps<{
  teacherCount: number
  studentCount: number
  classCount: number
}>()

const chartRef = ref<EchartsUIType>()
const { renderEcharts } = useEcharts(chartRef)

function render() {
  const items = [
    { name: '参与教师', value: Number(props.teacherCount), color: '#1E40AF' },
    { name: '参与学生', value: Number(props.studentCount), color: '#3B82F6' },
    { name: '参与班级', value: Number(props.classCount), color: '#F59E0B' },
  ]

  renderEcharts({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      backgroundColor: '#fff',
      borderColor: '#E2E8F0',
      textStyle: { color: '#0F172A' },
    },
    grid: {
      left: '8%',
      right: '8%',
      bottom: '10%',
      top: '10%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: items.map((d) => d.name),
      axisLabel: { color: '#475569', fontSize: 13, fontWeight: 500 },
      axisLine: { lineStyle: { color: '#E2E8F0' } },
      axisTick: { show: false },
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#94A3B8' },
      splitLine: { lineStyle: { color: '#F1F5F9', type: 'dashed' } },
      axisLine: { show: false },
      axisTick: { show: false },
    },
    series: [
      {
        type: 'bar',
        barWidth: '44%',
        label: {
          show: true,
          position: 'top',
          fontSize: 15,
          fontWeight: 700,
          color: '#0F172A',
        },
        data: items.map((d) => ({
          value: d.value,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: d.color },
                { offset: 1, color: `${d.color}40` },
              ],
            },
            borderRadius: [8, 8, 0, 0],
          },
        })),
        animationDuration: 800,
        animationEasing: 'cubicOut',
      },
    ],
  })
}

onMounted(render)
watch(() => [props.teacherCount, props.studentCount, props.classCount], render)
</script>

<template>
  <EchartsUI ref="chartRef" class="h-[260px] w-full" />
</template>
