<template>
  <div v-if="!configured" class="not-configured">
    未配置
  </div>
  <div v-else class="chart-container">
    <Chart :options="chartOptions" :height="height" :width="width" />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import Chart from '@/components/chart/index.vue'

interface Props {
  recordId: number | string
  configured?: boolean
  height?: string
  width?: string
}

const props = withDefaults(defineProps<Props>(), {
  configured: true,
  height: '60px',
  width: '160px',
})

// 生成 Conn 多条曲线数据（活跃连接、空闲连接、等待连接）
const generateConnData = (id: number | string) => {
  const numericId = typeof id === 'string' ? parseInt(id, 10) || 1 : id
  const baseActive = (numericId * 23) % 50 + 20
  const baseIdle = (numericId * 17) % 30 + 10
  const baseWaiting = (numericId * 11) % 20 + 5

  const activeData: number[] = []
  const idleData: number[] = []
  const waitingData: number[] = []

  for (let i = 0; i < 12; i++) {
    const variation = Math.sin(i + numericId * 0.5) * 15
    activeData.push(Math.max(0, Math.min(100, baseActive + variation + Math.random() * 10)))
    idleData.push(Math.max(0, Math.min(80, baseIdle + Math.cos(i + numericId) * 10 + Math.random() * 8)))
    waitingData.push(Math.max(0, Math.min(50, baseWaiting + Math.sin(i * 0.8 + numericId) * 8 + Math.random() * 5)))
  }

  return { activeData, idleData, waitingData }
}

// 获取图表配置
const chartOptions = computed(() => {
  const { activeData, idleData, waitingData } = generateConnData(props.recordId)

  return {
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        if (params && params.length > 0) {
          let result = ''
          params.forEach((item: any) => {
            result += `${item.marker}${item.seriesName}: ${item.value.toFixed(1)}<br/>`
          })
          return result
        }
        return ''
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: 0,
      right: 0,
      top: 18,
      bottom: 5,
    },
    xAxis: {
      type: 'category',
      show: false,
      data: activeData.map((_, i) => i),
    },
    yAxis: {
      type: 'value',
      show: false,
      min: 0,
      max: 100,
    },
    series: [
      {
        name: '活跃',
        type: 'line',
        data: activeData,
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: '#165DFF',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(22, 93, 255, 0.3)' },
              { offset: 1, color: 'rgba(22, 93, 255, 0.05)' },
            ],
          },
        },
      },
      {
        name: '空闲',
        type: 'line',
        data: idleData,
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: '#00B42A',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(0, 180, 42, 0.3)' },
              { offset: 1, color: 'rgba(0, 180, 42, 0.05)' },
            ],
          },
        },
      },
      {
        name: '等待',
        type: 'line',
        data: waitingData,
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: '#FF7D00',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(255, 125, 0, 0.3)' },
              { offset: 1, color: 'rgba(255, 125, 0, 0.05)' },
            ],
          },
        },
      },
    ],
  }
})
</script>

<style scoped lang="less">
.not-configured {
  color: rgb(var(--text-3));
  font-size: 12px;
  text-align: center;
  padding: 8px 0;
}

.chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
</style>