<script setup lang="ts">
/**
 * 文件职责：成本录入底部汇总栏。
 */
import { Button } from 'ant-design-vue';

import { formatCurrency } from '../composables/cost-page/helpers';

interface Props {
  canManage: boolean;
  loading: boolean;
  totalCost: number;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'save'): void;
}>();
</script>

<template>
  <div class="fc-summary">
    <div class="fc-summary-label">本月总成本</div>
    <div class="fc-summary-right">
      <div class="fc-summary-value">{{ formatCurrency(props.totalCost) }}</div>
      <Button
        type="primary"
        :loading="props.loading"
        :disabled="!props.canManage"
        @click="emit('save')"
      >
        保存
      </Button>
    </div>
  </div>
</template>
