<!--
  资产利用率图表组件
  使用仪表盘展示利用率
-->

<template>
  <div class="asset-utilization-chart">
    <GaugeChart
      :value="utilizationRate"
      :min="0"
      :max="100"
      title="资产利用率"
      unit="%"
      height="300px"
      :color="gaugeColors"
      :show-detail="true"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import GaugeChart from '../GaugeChart.vue'

/** Props */
interface Props {
  totalAssets: number
  usedAssets: number
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  totalAssets: 0,
  usedAssets: 0,
  loading: false,
})

/** 利用率 */
const utilizationRate = computed(() => {
  if (props.totalAssets === 0) return 0
  return (props.usedAssets / props.totalAssets) * 100
})

/** 仪表盘颜色 */
const gaugeColors = computed(() => {
  const rate = utilizationRate.value
  if (rate < 50) {
    return ['#ef4444', '#f59e0b', '#10b981'] // 低：红橙绿
  } else if (rate < 80) {
    return ['#f59e0b', '#10b981', '#3b82f6'] // 中：橙绿蓝
  } else {
    return ['#10b981', '#3b82f6', '#6366f1'] // 高：绿蓝紫
  }
})
</script>

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