<!-- 功能描述：展示配送订单创建时的只读金额预估。版本：v1.0.0。 -->
<template>
  <a-alert v-if="preview.ready" class="amount-preview" type="info" show-icon>
    <div class="amount-grid">
      <span>气瓶金额<strong>{{ formatOrderMoney(preview.productAmount) }}</strong></span>
      <span>默认配送费<strong>{{ formatOrderMoney(preview.deliveryFee) }}</strong></span>
      <span>优惠金额<strong>- {{ formatOrderMoney(preview.discountAmount) }}</strong></span>
      <span class="payable">预计应付<strong>{{ formatOrderMoney(preview.payableAmount) }}</strong></span>
    </div>
    <div class="amount-note">金额仅供预览，保存时由服务端按合同价格重新计算。</div>
  </a-alert>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { formatOrderMoney, orderAmountPreview } from '@/api/order-creation';
import type { ResourceRow } from '@/api/resource-record-form';

const props = defineProps<{
  form: Record<string, any>;
  relationOptions: Record<string, ResourceRow[]>;
}>();
const preview = computed(() =>
  orderAmountPreview(props.form, props.relationOptions),
);
</script>

<style scoped>
.amount-preview { margin: 4px 0 20px; }
.amount-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.amount-grid span { display: grid; gap: 4px; color: var(--color-text-3); }
.amount-grid strong { color: var(--color-text-1); font-size: 16px; }
.amount-grid .payable strong { color: rgb(var(--primary-6)); font-size: 18px; }
.amount-note { margin-top: 10px; color: var(--color-text-3); font-size: 12px; }
@media (max-width: 900px) { .amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
