<template>
  <span class="settlement-status" :class="`settlement-status--${status}`">
    <i :class="statusIcon" />
    {{ statusLabel }}
  </span>
</template>

<script>
const STATUS_MAP = {
  draft: { label: '草稿', icon: 'el-icon-document' },
  approving: { label: '审批中', icon: 'el-icon-time' },
  approved: { label: '已审批', icon: 'el-icon-circle-check' },
  rejected: { label: '已拒绝', icon: 'el-icon-circle-close' },
  settled: { label: '已结算', icon: 'el-icon-success' },
  failed: { label: '结算失败', icon: 'el-icon-warning-outline' },
  cancelled: { label: '已撤销', icon: 'el-icon-remove-outline' }
}

export default {
  name: 'SettlementStatusBadge',
  props: {
    status: {
      type: String,
      default: 'draft'
    }
  },
  computed: {
    statusConfig() {
      return STATUS_MAP[this.status] || STATUS_MAP.draft
    },
    statusLabel() {
      return this.statusConfig.label
    },
    statusIcon() {
      return this.statusConfig.icon
    }
  }
}
</script>
