<template>
  <el-row :gutter="20" class="report-summary">
    <el-col :xs="24" :sm="12" :md="6" v-for="item in summaryData" :key="item.key">
      <el-card shadow="hover" class="summary-card">
        <div class="card-content">
          <div class="icon-wrapper" :style="{ backgroundColor: item.color + '20' }">
            <Icon :icon="item.icon" :size="32" :color="item.color" />
          </div>
          <div class="info">
            <div class="label">{{ item.label }}</div>
            <div class="value" :style="{ color: item.color }">{{ item.value }}</div>
            <div class="trend" v-if="item.trend">
              <Icon
                :icon="item.trend > 0 ? 'ep:top' : 'ep:bottom'"
                :size="14"
                :color="item.trend > 0 ? '#67c23a' : '#f56c6c'"
              />
              <span :style="{ color: item.trend > 0 ? '#67c23a' : '#f56c6c' }">
                {{ Math.abs(item.trend) }}%
              </span>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { StockReportSummaryVO } from '@/api/erp/stock/check'
import { erpPriceInputFormatter, erpCountInputFormatter } from '@/utils'

interface Props {
  summary: StockReportSummaryVO
}

const props = defineProps<Props>()

const summaryData = computed(() => [
  {
    key: 'totalCheckCount',
    label: '总盘点次数',
    value: props.summary?.totalCheckCount || 0,
    icon: 'ep:document-checked',
    color: '#409eff',
    trend: null
  },
  {
    key: 'totalCheckAmount',
    label: '总盘点金额',
    value: erpPriceInputFormatter(props.summary?.totalCheckAmount || 0),
    icon: 'ep:money',
    color: '#67c23a',
    trend: null
  },
  {
    key: 'totalProfitAmount',
    label: '盘盈金额',
    value: erpPriceInputFormatter(props.summary?.totalProfitAmount || 0),
    icon: 'ep:top-right',
    color: '#67c23a',
    trend: null
  },
  {
    key: 'totalLossAmount',
    label: '盘亏金额',
    value: erpPriceInputFormatter(props.summary?.totalLossAmount || 0),
    icon: 'ep:bottom-right',
    color: '#f56c6c',
    trend: null
  },
  {
    key: 'warehouseCount',
    label: '涉及仓库数',
    value: props.summary?.warehouseCount || 0,
    icon: 'ep:office-building',
    color: '#e6a23c',
    trend: null
  },
  {
    key: 'productCount',
    label: '涉及产品数',
    value: props.summary?.productCount || 0,
    icon: 'ep:goods',
    color: '#909399',
    trend: null
  },
  {
    key: 'avgCheckAmount',
    label: '平均盘点金额',
    value: erpPriceInputFormatter(props.summary?.avgCheckAmount || 0),
    icon: 'ep:data-analysis',
    color: '#409eff',
    trend: null
  },
  {
    key: 'checkAccuracyRate',
    label: '盘点准确率',
    value: ((props.summary?.checkAccuracyRate || 0) * 100).toFixed(2) + '%',
    icon: 'ep:circle-check',
    color: '#67c23a',
    trend: null
  }
])
</script>

<style scoped lang="scss">
.report-summary {
  margin-bottom: 20px;

  .summary-card {
    margin-bottom: 20px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-4px);
    }

    .card-content {
      display: flex;
      align-items: center;
      gap: 16px;

      .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 12px;
        flex-shrink: 0;
      }

      .info {
        flex: 1;
        min-width: 0;

        .label {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }

        .value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .trend {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .summary-card .card-content {
    .icon-wrapper {
      width: 48px;
      height: 48px;
    }

    .info .value {
      font-size: 20px;
    }
  }
}
</style>
