<script setup lang="ts">
import type { Component } from 'vue';

import { computed } from 'vue';

import { VbenIcon } from '@vben/common-ui';

import { Card } from 'ant-design-vue';

/** 统计卡片数值展示类型：count 整数 / money 金额 / percent 百分比 */
export type DashboardStatValueType = 'count' | 'money' | 'percent';

const props = withDefaults(
  defineProps<{
    /** 指标标题，如「录入总数」 */
    title: string;
    /** 主数值 */
    value: number | string;
    /** 数值格式化类型，默认 count 不显示小数 */
    valueType?: DashboardStatValueType;
    /** 底部说明文字，如「环比」 */
    footerLabel?: string;
    /** 底部辅助值，如上一周期数量或环比百分比 */
    footerValue?: number | string;
    /** 右上角装饰 Icon（VbenIcon 支持的图标名或组件） */
    decorationIcon?: string | Component;
    /** 右上角装饰背景图 URL（半透明，不遮挡主文字） */
    decorationImage?: string;
  }>(),
  {
    valueType: 'count',
  },
);

defineOptions({
  name: 'DashboardStatCard',
});

/**
 * 按 valueType 格式化主数值，避免 AnalysisOverview 统一 decimals=3 的问题
 */
const displayValue = computed(() => {
  const raw = props.value;
  if (raw === null || raw === undefined || raw === '') return '—';
  if (props.valueType === 'percent') {
    if (typeof raw === 'string') return raw;
    if (raw === null) return '—';
    const prefix = Number(raw) > 0 ? '+' : '';
    return `${prefix}${Number(raw).toFixed(1)}%`;
  }
  const num = Number(raw);
  if (Number.isNaN(num)) return String(raw);
  if (props.valueType === 'money') {
    return `¥${num.toLocaleString(undefined, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    })}`;
  }
  return num.toLocaleString(undefined, {
    maximumFractionDigits: 0,
  });
});

/** 底部辅助值格式化（与主值规则一致，footer 多为 count 或 percent 文本） */
const displayFooterValue = computed(() => {
  if (props.footerValue === null || props.footerValue === undefined || props.footerValue === '') {
    return '';
  }
  if (typeof props.footerValue === 'string') return props.footerValue;
  const num = Number(props.footerValue);
  if (Number.isNaN(num)) return String(props.footerValue);
  if (props.valueType === 'money') {
    return `¥${num.toLocaleString(undefined, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    })}`;
  }
  return num.toLocaleString(undefined, { maximumFractionDigits: 0 });
});
</script>

<template>
  <Card class="stat-card w-full" :bordered="true">
    <!-- 右上角装饰：优先背景图，其次 Icon -->
    <div v-if="decorationImage || decorationIcon" class="stat-card__decoration">
      <img
        v-if="decorationImage"
        :src="decorationImage"
        alt=""
        class="stat-card__decoration-img"
      />
      <VbenIcon
        v-else-if="decorationIcon"
        :icon="decorationIcon"
        class="stat-card__decoration-icon"
      />
    </div>
    <div class="stat-card__body">
      <div class="stat-card__title">{{ title }}</div>
      <div class="stat-card__value">{{ displayValue }}</div>
      <div v-if="footerLabel" class="stat-card__footer">
        <span class="stat-card__footer-label">{{ footerLabel }}</span>
        <span v-if="displayFooterValue" class="stat-card__footer-value">
          {{ displayFooterValue }}
        </span>
      </div>
    </div>
  </Card>
</template>

<style scoped>
.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card :deep(.ant-card-body) {
  padding: 20px;
}

.stat-card__decoration {
  position: absolute;
  top: 12px;
  right: 12px;
  pointer-events: none;
  opacity: 0.18;
}

.stat-card__decoration-icon {
  width: 48px;
  height: 48px;
}

.stat-card__decoration-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.stat-card__body {
  position: relative;
  z-index: 1;
}

.stat-card__title {
  font-size: 14px;
  color: #86909c;
}

.dark .stat-card__title {
  color: #9ca3af;
}

.stat-card__value {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: #1d2129;
}

.dark .stat-card__value {
  color: #f3f4f6;
}

.stat-card__footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
  color: #86909c;
}

.stat-card__footer-value {
  font-weight: 500;
  color: #4e5969;
}

.dark .stat-card__footer-value {
  color: #d1d5db;
}
</style>
