<script lang="ts" setup>
import type { DashboardApi } from '#/api/dashboard';

interface Props {
  profitStats?: DashboardApi.ProfitStatistics;
}

const props = defineProps<Props>();

// 格式化金额
const formatAmount = (amount: number) => {
  if (amount >= 10000) {
    return `${(amount / 10000).toFixed(2)}万`;
  }
  return amount.toFixed(2);
};
</script>

<template>
  <div v-if="profitStats" class="revenue-panel">
    <div class="revenue-panel-header">
      <h3 class="text-lg font-semibold text-gray-800">收入统计</h3>
    </div>

    <div class="revenue-panel-content">
      <!-- 三个时间段的格子 -->
      <div class="revenue-grid">
        <!-- 今日 -->
        <div class="revenue-card">
          <div class="card-header">
            <span class="card-title">今日</span>
            <div class="card-profit">
              <span class="profit-label">利润</span>
              <span class="profit-value" :class="profitStats.today_profit >= 0 ? 'text-green-600' : 'text-red-600'">
                ¥{{ formatAmount(profitStats.today_profit) }}
              </span>
            </div>
          </div>

          <div class="card-content">
            <!-- 收入 -->
            <div class="detail-section">
              <div class="section-title">收入</div>
              <div class="detail-item">
                <span class="detail-label">营收</span>
                <span class="detail-value text-green-600">
                  +¥{{ formatAmount(profitStats.today_detail?.revenue || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">提现收税</span>
                <span class="detail-value text-green-600">
                  +¥{{ formatAmount(profitStats.today_detail?.tax_income || 0) }}
                </span>
              </div>
              <div class="detail-item total">
                <span class="detail-label font-semibold">收入合计</span>
                <span class="detail-value font-semibold text-green-600">
                  +¥{{ formatAmount((profitStats.today_detail?.revenue || 0) + (profitStats.today_detail?.tax_income ||
                    0)) }}
                </span>
              </div>
            </div>

            <!-- 成本 -->
            <div class="detail-section">
              <div class="section-title">成本</div>
              <div class="detail-item">
                <span class="detail-label">代理佣金</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.today_detail?.commission || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">代理返利</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.today_detail?.rebate || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">税务成本</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.today_detail?.company_tax || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">API调用成本</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.today_detail?.api_cost || 0) }}
                </span>
              </div>
              <div class="detail-item total">
                <span class="detail-label font-semibold">成本合计</span>
                <span class="detail-value font-semibold text-red-600">
                  -¥{{ formatAmount((profitStats.today_detail?.commission || 0) + (profitStats.today_detail?.rebate ||
                    0) + (profitStats.today_detail?.company_tax || 0) + (profitStats.today_detail?.api_cost || 0)) }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 当月 -->
        <div class="revenue-card">
          <div class="card-header">
            <span class="card-title">当月</span>
            <div class="card-profit">
              <span class="profit-label">利润</span>
              <span class="profit-value" :class="profitStats.month_profit >= 0 ? 'text-green-600' : 'text-red-600'">
                ¥{{ formatAmount(profitStats.month_profit) }}
              </span>
            </div>
          </div>

          <div class="card-content">
            <!-- 收入 -->
            <div class="detail-section">
              <div class="section-title">收入</div>
              <div class="detail-item">
                <span class="detail-label">营收</span>
                <span class="detail-value text-green-600">
                  +¥{{ formatAmount(profitStats.month_detail?.revenue || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">提现收税</span>
                <span class="detail-value text-green-600">
                  +¥{{ formatAmount(profitStats.month_detail?.tax_income || 0) }}
                </span>
              </div>
              <div class="detail-item total">
                <span class="detail-label font-semibold">收入合计</span>
                <span class="detail-value font-semibold text-green-600">
                  +¥{{ formatAmount((profitStats.month_detail?.revenue || 0) + (profitStats.month_detail?.tax_income ||
                    0)) }}
                </span>
              </div>
            </div>

            <!-- 成本 -->
            <div class="detail-section">
              <div class="section-title">成本</div>
              <div class="detail-item">
                <span class="detail-label">代理佣金</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.month_detail?.commission || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">代理返利</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.month_detail?.rebate || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">税务成本</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.month_detail?.company_tax || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">API调用成本</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.month_detail?.api_cost || 0) }}
                </span>
              </div>
              <div class="detail-item total">
                <span class="detail-label font-semibold">成本合计</span>
                <span class="detail-value font-semibold text-red-600">
                  -¥{{ formatAmount((profitStats.month_detail?.commission || 0) + (profitStats.month_detail?.rebate ||
                    0) + (profitStats.month_detail?.company_tax || 0) + (profitStats.month_detail?.api_cost || 0)) }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 总计 -->
        <div class="revenue-card">
          <div class="card-header">
            <span class="card-title">总计</span>
            <div class="card-profit">
              <span class="profit-label">利润</span>
              <span class="profit-value" :class="profitStats.total_profit >= 0 ? 'text-green-600' : 'text-red-600'">
                ¥{{ formatAmount(profitStats.total_profit) }}
              </span>
            </div>
          </div>

          <div class="card-content">
            <!-- 收入 -->
            <div class="detail-section">
              <div class="section-title">收入</div>
              <div class="detail-item">
                <span class="detail-label">营收</span>
                <span class="detail-value text-green-600">
                  +¥{{ formatAmount(profitStats.total_detail?.revenue || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">提现收税</span>
                <span class="detail-value text-green-600">
                  +¥{{ formatAmount(profitStats.total_detail?.tax_income || 0) }}
                </span>
              </div>
              <div class="detail-item total">
                <span class="detail-label font-semibold">收入合计</span>
                <span class="detail-value font-semibold text-green-600">
                  +¥{{ formatAmount((profitStats.total_detail?.revenue || 0) + (profitStats.total_detail?.tax_income ||
                    0)) }}
                </span>
              </div>
            </div>

            <!-- 成本 -->
            <div class="detail-section">
              <div class="section-title">成本</div>
              <div class="detail-item">
                <span class="detail-label">代理佣金</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.total_detail?.commission || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">代理返利</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.total_detail?.rebate || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">税务成本</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.total_detail?.company_tax || 0) }}
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">API调用成本</span>
                <span class="detail-value text-red-600">
                  -¥{{ formatAmount(profitStats.total_detail?.api_cost || 0) }}
                </span>
              </div>
              <div class="detail-item total">
                <span class="detail-label font-semibold">成本合计</span>
                <span class="detail-value font-semibold text-red-600">
                  -¥{{ formatAmount((profitStats.total_detail?.commission || 0) + (profitStats.total_detail?.rebate ||
                    0) + (profitStats.total_detail?.company_tax || 0) + (profitStats.total_detail?.api_cost || 0)) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.revenue-panel {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .revenue-panel-header {
    margin-bottom: 16px;
  }

  .revenue-panel-content {
    .revenue-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr;
      }
    }

    .revenue-card {
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      overflow: hidden;
      background: #fafafa;

      .card-header {
        background: #fff;
        padding: 12px 16px;
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .card-title {
          font-size: 15px;
          font-weight: 600;
          color: #333;
        }

        .card-profit {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .profit-label {
            font-size: 11px;
            color: #999;
            margin-bottom: 2px;
          }

          .profit-value {
            font-size: 16px;
            font-weight: 600;
          }
        }
      }

      .card-content {
        padding: 12px 16px;

        .detail-section {
          margin-bottom: 16px;

          &:last-child {
            margin-bottom: 0;
          }

          .section-title {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
          }

          .detail-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid #f0f0f0;

            &.total {
              border-bottom: 2px solid #e0e0e0;
              margin-top: 8px;
              padding-top: 10px;
            }

            .detail-label {
              color: #666;
              font-size: 12px;
            }

            .detail-value {
              font-size: 12px;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>
