<script setup lang="ts">
/**
 * 文件职责：自提模式切换条。
 * 1. 展示大时段/精细时段切换入口。
 * 2. 抛出模式变更事件。
 */
import type { PickupMode } from '#/api/store-pickup';

interface Props {
  disabled?: boolean;
  isSwitching?: boolean;
  mode: PickupMode;
  options: Array<{ label: string; value: PickupMode }>;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'change', mode: PickupMode): void;
}>();

function getModeLabel(mode: PickupMode) {
  return props.options.find((item) => item.value === mode)?.label ?? mode;
}

function getModeHint(mode: PickupMode) {
  return mode === 'big'
    ? '按时段统一预约，适合固定营业节奏'
    : '按精细时间点预约，适合高峰分流';
}
</script>

<template>
  <div class="pickup-mode-panel" :class="{ switching: props.isSwitching }">
    <div class="pickup-mode-header">
      <div class="pickup-mode-title">自提预约模式</div>
      <div class="pickup-mode-badge">
        {{
          props.isSwitching ? '切换中...' : `当前：${getModeLabel(props.mode)}`
        }}
      </div>
    </div>

    <div class="pickup-mode-grid">
      <button
        type="button"
        class="pickup-mode-card"
        :class="{ active: props.mode === 'big' }"
        :disabled="props.disabled || props.isSwitching"
        @click="emit('change', 'big')"
      >
        <div class="pickup-mode-card-title">
          <span class="pickup-mode-dot"></span>
          {{ getModeLabel('big') }}
        </div>
        <div class="pickup-mode-card-hint">{{ getModeHint('big') }}</div>
      </button>

      <button
        type="button"
        class="pickup-mode-card"
        :class="{ active: props.mode === 'fine' }"
        :disabled="props.disabled || props.isSwitching"
        @click="emit('change', 'fine')"
      >
        <div class="pickup-mode-card-title">
          <span class="pickup-mode-dot"></span>
          {{ getModeLabel('fine') }}
        </div>
        <div class="pickup-mode-card-hint">{{ getModeHint('fine') }}</div>
      </button>
    </div>
  </div>
</template>
