<template>
  <BaseEChart :options="chartOptions" v-bind="$attrs" />
</template>

<script setup>
import { computed } from 'vue'
import BaseEChart from './BaseEChart.vue'

defineOptions({
  name: 'LineChart'
})

const props = defineProps({
  // 数据项
  data: {
    type: Array,
    required: true
  },
  // x轴数据
  xAxis: {
    type: Array,
    required: true
  },
  // 是否平滑曲线
  smooth: {
    type: Boolean,
    default: true
  },
  // 是否显示面积
  area: {
    type: Boolean,
    default: false
  },
  // 系列配置
  series: {
    type: Array,
    default: () => []
  },
  // 图表标题
  title: {
    type: String,
    default: ''
  }
})

const chartOptions = computed(() => {
  const series = props.series.length > 0 ? props.series : [{
    name: '数值',
    data: props.data,
    type: 'line',
    smooth: props.smooth,
    areaStyle: props.area ? {} : null,
    showSymbol: true,
    symbolSize: 6,
    lineStyle: {
      width: 2
    }
  }]

  return {
    title: props.title ? {
      text: props.title,
      left: 'center',
      top: 10
    } : null,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      top: props.title ? '60px' : '40px',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.xAxis,
      axisLine: {
        lineStyle: {
          color: '#E5E7EB'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#E5E7EB'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series
  }
})
</script> 