<template>
  <view class="summary-cards-container">
    <scroll-view 
      scroll-x="true" 
      class="cards-scroll"
      show-scrollbar="false"
    >
      <view class="cards-wrapper">
        <view 
          class="summary-card" 
          v-for="(card, index) in cardsData" 
          :key="index"
        >
          <view class="card-title">{{ card.title }}</view>
          <view class="card-value">{{ formatNumber(card.value) }}</view>
          <view 
            class="card-trend" 
            :class="{ 'trend-up': card.trend > 0, 'trend-down': card.trend < 0, 'trend-flat': card.trend === 0 }"
          >
            <text v-if="card.trend !== 0">
              <uni-icons 
                :type="card.trend > 0 ? 'arrowup' : 'arrowdown'" 
                size="16"
              ></uni-icons>
              {{ Math.abs(card.trend) }}%
              {{ card.trend > 0 ? '环比上月' : '环比昨日' }}
            </text>
            <text v-else>持平</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'SummaryCards',
  props: {
    // 接收卡片数据，格式为数组对象
    cardsData: {
      type: Array,
      default: () => [
        { title: '当前总库存量', value: 0, trend: 0 },
        { title: '在途物料数量', value: 0, trend: 0 },
        { title: '今日入库量', value: 0, trend: 0 },
        { title: '今日出库量', value: 0, trend: 0 },
        { title: '预警信息', value: 0, trend: 0 }
      ]
    }
  },
  methods: {
    // 格式化数字，添加千位分隔符
    formatNumber(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
  }
};
</script>

<style scoped>
.summary-cards-container {
  width: 100%;
  margin-bottom: 20rpx;
}

.cards-scroll {
  width: 100%;
  white-space: nowrap;
  padding: 10rpx 0;
}

.cards-wrapper {
  display: inline-flex;
  gap: 16rpx;
  padding: 0 16rpx;
}

.summary-card {
  min-width: 240rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 10rpx;
}

.card-value {
  font-size: 34rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
}

.card-trend {
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rpx;
}

.trend-up {
  color: #00b42a;
}

.trend-down {
  color: #f53f3f;
}

.trend-flat {
  color: #888888;
}
</style>
