<template>
  <div class="stat-card" :style="customStyles">
    <!-- 标题区域 -->
    <div class="stat-card__title">{{ title }}</div>
    
    <!-- 数值区域 -->
    <div class="stat-card__value-container">
      <span class="stat-card__value">{{ formattedValue }}</span>
      <span class="stat-card__unit">{{ unit }}</span>
    </div>
    
    <!-- 底部信息区域 -->
    <div class="stat-card__footer">
      <div class="stat-card__trend">
        <img 
          class="stat-card__trend-icon" 
          :src="'/src/assets/large/' + trendIcon+'.png'" 
          :alt="trendDirection === 'up' ? '上升' : '下降'"
        >
        <span class="stat-card__trend-text">{{ trendText }}</span>
      </div>
      <img 
        class="stat-card__badge" 
        :src="'/src/assets/large/'+badgeIcon+'.png'" 
        alt="徽章图标"
      >
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

// 定义组件属性
const props = defineProps({
  // 卡片标题
  title: {
    type: String,
    default: '收入合同'
  },
  // 数值
  value: {
    type: Number,
    default: 205805.17
  },
  // 单位
  unit: {
    type: String,
    default: '万元'
  },
  // 增长率
  growthRate: {
    type: Number,
    default: 3.2
  },
  // 增长对比周期
  period: {
    type: String,
    default: '较上月'
  },
  // 趋势方向 (up/down)
  trendDirection: {
    type: String,
    default: 'up',
    validator: (value) => ['up', 'down'].includes(value)
  },
  // 趋势图标
  trendIcon: {
    type: String,
    default: 'up'
  },
  // 徽章图标
  badgeIcon: {
    type: String,
    default: 'top1'
  },
  // 卡片自定义样式
  customStyles: {
    type: Object,
    default: () => ({})
  }
});

// 格式化数值为带千分位的字符串
const formattedValue = computed(() => {
  return props.value.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
});

// 生成趋势文本
const trendText = computed(() => {
  return `${props.growthRate}% ${props.period}`;
});
</script>

<style lang="scss" scoped>
.stat-card {
  width: 225px;
  height: 147px;
  background-color: rgba(29, 214, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(29, 214, 255, 0.1);
  border-radius: 4px; // 增加轻微圆角，提升视觉效果
  
  &__title {
    font-size: 14px;
    color: #8FABBF;
    line-height: 20px;
  }
  
  &__value-container {
    display: flex;
    align-items: baseline;
  }
  
  &__value {
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    margin-right: 5px;
    font-weight: bold;
  }
  
  &__unit {
    color: #8FABBF;
    font-size: 14px;
  }
  
  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  &__trend {
    display: flex;
    align-items: center;
  }
  
  &__trend-icon {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }
  
  &__trend-text {
    font-size: 14px;
    color: #8FABBF;
  }
  
  &__badge {
    width: 40px;
    height: 40px;
  }
}

// 为下降趋势添加不同颜色
:deep(.stat-card__trend-text) {
  color: v-bind('trendDirection === "up" ? "#8FABBF" : "#ff4d4f"');
}
</style>
