<template>
  <div class="commission-display" :class="{ 'is-compact': compact }">
    <div v-if="!compact" class="commission-item">
      <span class="commission-label">佣金类型：</span>
      <span class="commission-value">{{ commissionTypeLabel }}</span>
    </div>

    <div class="commission-item">
      <span class="commission-label">{{ compact ? '' : '佣金金额：' }}</span>
      <span class="commission-value commission-amount">
        {{ formattedAmount }}
      </span>
    </div>

    <div v-if="showRate && rate !== undefined" class="commission-item">
      <span class="commission-label">{{ compact ? '' : '佣金比例：' }}</span>
      <span class="commission-value">{{ rate }}%</span>
    </div>

    <div v-if="showStatus && status !== undefined" class="commission-item">
      <span class="commission-label">{{ compact ? '' : '状态：' }}</span>
      <el-tag :type="statusType" size="small">
        {{ statusLabel }}
      </el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { formatMoney } from '@/utils/business'
  import { WithdrawalStatus } from '@/types/api/commission'
  import {
    getCommissionTypeLabel,
    getWithdrawalStatusLabel,
    getWithdrawalStatusType
  } from '@/config/constants'

  interface Props {
    // 佣金金额（单位：分）
    amount: number
    // 佣金类型
    type?: string
    // 佣金比例
    rate?: number
    // 状态（用于提现记录）
    status?: WithdrawalStatus
    // 是否显示比例
    showRate?: boolean
    // 是否显示状态
    showStatus?: boolean
    // 紧凑模式（只显示金额）
    compact?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    showRate: true,
    showStatus: false,
    compact: false
  })

  const formattedAmount = computed(() => formatMoney(props.amount))

  const commissionTypeLabel = computed(() => {
    return props.type !== undefined ? getCommissionTypeLabel(props.type) : '-'
  })

  const statusLabel = computed(() => {
    return props.status !== undefined ? getWithdrawalStatusLabel(props.status) : '-'
  })

  const statusType = computed(() => {
    return props.status !== undefined ? getWithdrawalStatusType(props.status) : 'info'
  })
</script>

<style scoped lang="scss">
  .commission-display {
    display: flex;
    flex-direction: column;
    gap: 8px;

    &.is-compact {
      flex-direction: row;
      align-items: center;
    }

    .commission-item {
      display: flex;
      align-items: center;
      font-size: 14px;

      .commission-label {
        margin-right: 8px;
        color: var(--el-text-color-secondary);
        white-space: nowrap;
      }

      .commission-value {
        font-weight: 500;
        color: var(--el-text-color-primary);

        &.commission-amount {
          font-size: 16px;
          font-weight: 600;
          color: var(--el-color-success);
        }
      }
    }

    &.is-compact .commission-item {
      .commission-label {
        display: none;
      }
    }
  }
</style>
