<script setup lang="ts">
/**
 * 文件职责：半径梯度列表区块。
 * 1. 展示梯度卡片信息。
 * 2. 抛出新增、编辑、删除事件。
 */
import type { RadiusTierDto } from '#/api/store-delivery';

import { Button, Card, Empty, Popconfirm } from 'ant-design-vue';

interface Props {
  formatCurrency: (value: number) => string;
  formatDistanceRange: (tier: RadiusTierDto) => string;
  isSaving: boolean;
  tiers: RadiusTierDto[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'add'): void;
  (event: 'delete', tierId: string): void;
  (event: 'edit', tier: RadiusTierDto): void;
}>();
</script>

<template>
  <Card :bordered="false">
    <template #title>
      <span class="section-title">距离梯度</span>
    </template>
    <template #extra>
      <Button type="primary" :disabled="props.isSaving" @click="emit('add')">
        添加梯度
      </Button>
    </template>

    <div v-if="props.tiers.length > 0" class="tier-list">
      <div
        v-for="(tier, index) in props.tiers"
        :key="tier.id"
        class="tier-card"
      >
        <div class="tier-num" :style="{ background: tier.color }">
          {{ index + 1 }}
        </div>

        <div class="tier-field">
          <label>距离范围</label>
          <div class="value">{{ props.formatDistanceRange(tier) }}</div>
        </div>
        <div class="tier-field">
          <label>配送费</label>
          <div class="value">{{ props.formatCurrency(tier.deliveryFee) }}</div>
        </div>
        <div class="tier-field">
          <label>预计送达</label>
          <div class="value">{{ tier.etaMinutes }} 分钟</div>
        </div>
        <div class="tier-field">
          <label>起送金额</label>
          <div class="value">
            {{ props.formatCurrency(tier.minOrderAmount) }}
          </div>
        </div>

        <div class="tier-actions">
          <Button type="text" size="small" @click="emit('edit', tier)">
            编辑
          </Button>
          <Popconfirm
            title="确认删除该梯度吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="emit('delete', tier.id)"
          >
            <Button type="text" size="small" danger>删除</Button>
          </Popconfirm>
        </div>
      </div>
    </div>
    <Empty v-else description="暂无梯度配置" />

    <div class="delivery-tip">超出最大配送半径的地址将无法下单</div>
  </Card>
</template>
