<!--
  资产价值趋势图组件
  展示资产价值、折旧、净值趋势
-->

<template>
  <div class="asset-value-trend-chart">
    <LineChart
      :data="dateData"
      :series="seriesData"
      title="资产价值趋势"
      :area="true"
      :smooth="true"
      x-axis-label="日期"
      y-axis-label="金额(万元)"
      :show-data-zoom="true"
      height="400px"
      @click="handleClick"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import LineChart from '../LineChart.vue'
import type { AssetTrendData } from '@/types/charts'

/** Props */
interface Props {
  data: AssetTrendData[]
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  loading: false,
})

/** Emits */
interface Emits {
  (e: 'click', item: AssetTrendData): void
}

const emit = defineEmits<Emits>()

/** 日期数据 */
const dateData = computed(() => {
  return props.data.map(item => ({
    name: item.date,
    value: item.value / 10000, // 转换为万元
  }))
})

/** 系列数据 */
const seriesData = computed(() => {
  const valueData = props.data.map(item => item.value / 10000)
  const depreciationData = props.data.map(item => (item.depreciation || 0) / 10000)
  const netValueData = props.data.map(item => (item.netValue || item.value) / 10000)

  return [
    {
      name: '总价值',
      data: valueData,
      color: '#475569',
    },
    {
      name: '累计折旧',
      data: depreciationData,
      color: '#ef4444',
    },
    {
      name: '净值',
      data: netValueData,
      color: '#10b981',
    },
  ]
})

/** 处理点击 */
const handleClick = (item: any) => {
  const original = props.data.find(d => d.date === item.name)
  if (original) {
    emit('click', original)
  }
}
</script>

<style scoped lang="scss">
.asset-value-trend-chart {
  width: 100%;
  height: 100%;
}
</style>
