<template>
  <div class="chart-card">
    <div class="chart-card-header">
      <span class="chart-card-title">年度销售额完成率</span>
    </div>
    <div class="gauge-chart-container" ref="chartRef"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null

const initGaugeChart = () => {
  const el = chartRef.value
  if (!el) return

  chartInstance = echarts.init(el)

  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(145, 200, 255, 0.9)',
      borderColor: '#409EFF',
      borderWidth: 1,
      textStyle: { color: '#0a3b70', fontSize: 11 },
      padding: [8, 12],
      borderRadius: 6,
      formatter: '完成率：{c}%<br/>目标：1500万元<br/>已完成：1275万元'
    },
    series: [
      {
        name: '完成率',
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 10,
        radius: '80%',
        center: ['50%', '70%'],
        axisLine: {
          lineStyle: {
            width: 15,
            color: [
              [0.3, '#F56C6C'],
              [0.7, '#E6A23C'],
              [1, '#409EFF']
            ]
          }
        },
        splitLine: {
          length: 15,
          lineStyle: {
            color: '#b4c7e7',
            width: 2
          }
        },
        axisTick: {
          length: 8,
          lineStyle: {
            color: '#b4c7e7',
            width: 1
          }
        },
        axisLabel: {
          color: '#e0e6ff',
          fontSize: 10,
          distance: 20
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '85%',
          width: 8,
          color: '#fff',
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 5
        },
        title: {
          fontSize: 14,
          color: '#e0e6ff',
          offsetCenter: [0, '50%']
        },
        detail: {
          fontSize: 16,
          color: '#409EFF',
          fontWeight: 600,
          offsetCenter: [0, '20%'],
          formatter: '{value}%'
        },
        data: [{ value: 85, name: '销售额完成率' }]
      }
    ]
  }

  chartInstance.setOption(option)
  window.addEventListener('resize', () => chartInstance.resize())
}

onMounted(() => initGaugeChart())
</script>

<style scoped>
.chart-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-card-header {
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  background-color: rgba(26, 80, 139, 0.5);
  border-bottom: 1px solid #1a508b;
  display: flex;
  align-items: center;
}

.chart-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  letter-spacing: 0.5px;
}

.gauge-chart-container {
  flex: 1;
  width: 100%;
  height: calc(100% - 40px);
  margin: 0;
  padding: 0;
}

:deep(.echarts-tooltip) {
  background-color: rgba(145, 200, 255, 0.9) !important;
  border-color: #409EFF !important;
  color: #0a3b70 !important;
  border-radius: 6px !important;
}
</style>