<template>

  <div class="kpi-card">

    <div class="card-header">

      <h4 class="card-title">{{ title }}</h4>

      <span class="icon-wrapper" :style="{ backgroundColor: iconColor }">

        {{ icon }}

      </span>

    </div>

    

    <div class="value-area">

      <p class="main-value">{{ value }}</p>

      <p class="trend-text" :style="{ color: trendColorMap[trendColor] }">

        <span class="trend-icon" :style="{ color: trendColorMap[trendColor] }">

          {{ trendIcon }}

        </span>

        {{ Math.abs(parseFloat(trend)) }}% 较上月

      </p>

    </div>

  </div>

</template>



<script>

export default {

  name: 'KpiCard',

  props: {

    title: String,

    value: String,

    trend: String,

    trendColor: {

      type: String,

      default: 'green'

    },

    icon: {

      type: String,

      default: '📈'

    }

  },

  computed: {

    trendColorMap() {

      return {

        green: '#38D6A4',

        red: '#FF6347'

      };

    },

    iconColorMap() {

      return {

        '总交易额 (GMV)': '#6699FF',

        'P80 订单贡献比': '#F7D742',

        'Top 5 商品贡献比': '#FF9966',

        '平均支付响应': '#4ECDC4'

      };

    },

    iconColor() {

      return this.iconColorMap[this.title] || '#6699FF';

    },

    trendIcon() {

      if (!this.trend) return '';

      return this.trend.includes('-') ? '▼' : '▲';

    }

  }

};

</script>





<style scoped>

.kpi-card {

  background-color: white;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  display: flex;

  flex-direction: column;

}



.card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 15px;

}



.card-title {

  font-size: 14px;

  color: #666;

  weight: 500;

  margin: 0;

  flex-grow: 1;

}



.icon-wrapper {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  /* 背景色由 JS 动态控制 */

}



.main-value {

  font-size: 24px;

  font-weight: bold;

  color: #333;

  margin: 0; /* 修复: 移除默认边距 */

}



.trend-text {

  font-size: 12px;

  margin-top: 5px;

  font-weight: 500;

  display: flex;

  align-items: center;

}



.trend-icon {

  margin-right: 4px;

  font-size: 14px;

  line-height: 1;

}

</style>