<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import type { EChartsCoreOption } from 'echarts'
import { useChart } from '@/composables/useChart'
import { darkTitle, darkTooltip, darkGrid, darkAxis } from '@/utils/echartsDark'

// 净值曲线(独立组件)。数据源 equity-curve 接口 = BacktestResult.equity_curve,
// 不依赖 *_metrics.json(CTA 引擎当前未生成该文件,致 BenchmarkCurve 等图全空)。
// 零成交时净值是 N 天平线(初始资金不变),也要画出而非空白。
//
// 模板总渲染 chart-box(无 v-if): 否则数据异步到达时 v-else 切换 + watch 默认 pre
// flush 时机下 el.value 尚未绑定 → ensureChart 跳过 → echarts 永不 init → 净值图空白。
// watch 加 flush:'post' 进一步保证 DOM patch 后再 render。
const props = defineProps<{ dates: string[]; equity: number[] }>()
const el = ref<HTMLDivElement>()
const { setOption } = useChart(el)

function render(): void {
  if (!props.dates.length || !props.equity.length) return
  const option: EChartsCoreOption = {
    title: darkTitle('净值曲线'),
    tooltip: darkTooltip(),
    grid: darkGrid(),
    xAxis: { type: 'category', data: props.dates, ...darkAxis() },
    yAxis: { type: 'value', scale: true, name: '净值(元)', ...darkAxis() },
    series: [
      {
        type: 'line',
        name: '净值',
        smooth: true,
        showSymbol: false,
        lineStyle: { color: '#00e5ff', width: 1.6 },
        areaStyle: { color: '#00e5ff', opacity: 0.12 },
        data: props.equity,
      },
    ],
  }
  setOption(option)
}

onMounted(render)
watch(() => [props.dates, props.equity], render, { deep: true, flush: 'post' })
</script>

<template>
  <div ref="el" class="chart-box" />
</template>

<style scoped>
.chart-box { width: 100%; height: 320px; }
</style>
