<!--
  资产状态图组件
  展示8种资产状态分布
-->

<template>
  <div class="asset-status-chart">
    <PieChart
      :data="chartData"
      title="资产状态分布"
      type="doughnut"
      :show-legend="true"
      :show-label="true"
      height="400px"
      :custom-color="true"
      @click="handleClick"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import PieChart from '../PieChart.vue'
import { assetStatusNames, assetStatusColors, formatPercentage } from '@/utils/echarts'
import type { AssetStatusStatistics } from '@/types/charts'

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

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

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

const emit = defineEmits<Emits>()

/** 图表数据 */
const chartData = computed(() => {
  return props.data.map(item => ({
    name: item.statusName || assetStatusNames[item.status],
    value: item.count,
    status: item.status,
    percentage: item.percentage,
    color: item.color || assetStatusColors[item.status],
  }))
})

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

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