<script lang="ts" setup>
import * as echarts from 'echarts'
import { ANIMATION, CHART_RENDERER, createTooltip, FONT_FAMILY, THEME } from '@/utils/kb'

const chartRef = ref<HTMLDivElement>()
let chart: echarts.ECharts | null = null

const assetValueData = [
  { name: '原值', value: 85000.77 },
  { name: '本期计提', value: 512.61 },
  { name: '累计折旧', value: 57722.06 },
  { name: '净值', value: 27152.6 }
]

function getChartOption(): echarts.EChartsOption {
  return {
    ...ANIMATION,
    color: [THEME.color.blue.line],
    grid: {
      ...THEME.grid,
      top: 32,
      right: 18,
      bottom: 12,
      left: 18
    },
    tooltip: createTooltip({
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: THEME.split
        }
      },
      valueFormatter(value: number) {
        return `${Number(value || 0).toLocaleString()} 万元`
      }
    }),
    xAxis: {
      type: 'category',
      data: assetValueData.map((item) => item.name),
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: THEME.text.regular,
        fontSize: 14,
        fontWeight: 500,
        fontFamily: FONT_FAMILY
      }
    },
    yAxis: {
      type: 'value',
      name: '资产价值(万元)',
      min: 0,
      max: 90000,
      splitNumber: 4,
      nameTextStyle: {
        color: THEME.text.regular,
        fontSize: 13,
        fontFamily: FONT_FAMILY
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: THEME.text.regular,
        fontSize: 12,
        fontFamily: FONT_FAMILY,
        formatter(value: number) {
          return value.toLocaleString()
        }
      },
      splitLine: {
        lineStyle: {
          color: THEME.split,
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '瑞恒',
        type: 'bar',
        data: assetValueData.map((item) => item.value),
        barWidth: 34,
        showBackground: true,
        backgroundStyle: {
          color: THEME.split,
          borderRadius: 999
        },
        itemStyle: {
          borderRadius: [12, 12, 0, 0],
          shadowBlur: 12,
          shadowColor: THEME.color.blue.bg,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: THEME.color.blue.light },
            { offset: 0.5, color: THEME.color.blue.mid },
            { offset: 1, color: THEME.color.blue.line }
          ])
        },
        label: {
          show: true,
          position: 'top',
          distance: 6,
          color: THEME.color.blue.strong,
          fontSize: 13,
          fontWeight: 700,
          fontFamily: FONT_FAMILY,
          formatter(params: any) {
            return `${assetValueData[params.dataIndex]?.value ?? params.value}`
          }
        }
      }
    ]
  }
}

function initChart() {
  if (!chartRef.value) return

  if (chart) {
    chart.dispose()
  }

  chart = echarts.init(chartRef.value, undefined, {
    renderer: CHART_RENDERER
  })
  renderChart()
}

function renderChart() {
  chart?.setOption(getChartOption(), true)
}

function resizeChart() {
  chart?.resize()
}

function destroyChart() {
  chart?.dispose()
  chart = null
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', resizeChart)
  window.addEventListener('rhkb:resize', resizeChart)
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeChart)
  window.removeEventListener('rhkb:resize', resizeChart)
  destroyChart()
})
</script>

<template>
  <div class="panel asset-value-panel">
    <div class="panel-title asset-value-title">
      <div class="icon-decorator">
        <span></span>
        <span></span>
      </div>
      资产价值
    </div>
    <div ref="chartRef" class="asset-value-chart"></div>
  </div>
</template>

<style lang="scss" scoped>
@import url('@/styles/kb.scss');

.asset-value-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.asset-value-chart {
  width: 100%;
  min-height: 0;
  flex: 1;
}
</style>
