<script setup lang="ts">
/**
 * 文件职责：配送模式区块。
 * 1. 展示当前启用配送模式，并提供独立切换入口。
 * 2. 展示配置编辑视图切换与半径中心点输入。
 */
import type { DeliveryMode } from '#/api/store-delivery';

import { computed } from 'vue';

import { Card, InputNumber } from 'ant-design-vue';

interface Props {
  activeMode: DeliveryMode;
  configMode: DeliveryMode;
  modeOptions: Array<{ label: string; value: DeliveryMode }>;
  radiusCenterLatitude: null | number;
  radiusCenterLongitude: null | number;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'changeActiveMode', mode: DeliveryMode): void;
  (event: 'changeConfigMode', mode: DeliveryMode): void;
  (event: 'changeRadiusCenterLatitude', value: null | number): void;
  (event: 'changeRadiusCenterLongitude', value: null | number): void;
}>();

const activeModeLabel = computed(() => {
  return (
    props.modeOptions.find((item) => item.value === props.activeMode)?.label ??
    '--'
  );
});

function toNumber(value: null | number | string) {
  if (value === null || value === undefined || value === '') {
    return null;
  }
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : null;
}
</script>

<template>
  <Card :bordered="false" class="delivery-mode-card">
    <template #title>
      <span class="section-title">配送模式</span>
    </template>

    <div class="delivery-active-mode">
      <div class="delivery-active-title">当前已启用模式</div>
      <div class="delivery-active-value">{{ activeModeLabel }}</div>
      <div class="delivery-active-tip">
        切换后将影响顾客下单时的配送范围与配送费计算。
      </div>

      <div class="delivery-active-switch">
        <button
          v-for="item in props.modeOptions"
          :key="item.value"
          type="button"
          class="mode-switch-item"
          :class="{ active: props.activeMode === item.value }"
          @click="emit('changeActiveMode', item.value)"
        >
          {{ item.label }}
        </button>
      </div>
    </div>

    <div class="delivery-config-title">配送配置编辑视图</div>
    <div class="delivery-mode-switch">
      <button
        v-for="item in props.modeOptions"
        :key="item.value"
        type="button"
        class="mode-switch-item"
        :class="{ active: props.configMode === item.value }"
        @click="emit('changeConfigMode', item.value)"
      >
        {{ item.label }}
      </button>
    </div>

    <div v-if="props.configMode === 'radius'" class="radius-center-panel">
      <div class="radius-center-title">半径配送中心点</div>
      <div class="radius-center-grid">
        <div class="radius-center-field">
          <label>纬度</label>
          <InputNumber
            :value="props.radiusCenterLatitude ?? undefined"
            :min="-90"
            :max="90"
            :precision="7"
            :step="0.000001"
            :controls="false"
            placeholder="如：39.9042000"
            class="field-input"
            @update:value="
              (value) => emit('changeRadiusCenterLatitude', toNumber(value))
            "
          />
        </div>
        <div class="radius-center-field">
          <label>经度</label>
          <InputNumber
            :value="props.radiusCenterLongitude ?? undefined"
            :min="-180"
            :max="180"
            :precision="7"
            :step="0.000001"
            :controls="false"
            placeholder="如：116.4074000"
            class="field-input"
            @update:value="
              (value) => emit('changeRadiusCenterLongitude', toNumber(value))
            "
          />
        </div>
      </div>
      <div class="radius-center-hint">
        请输入配送中心点经纬度；半径梯度将基于该点计算可配送范围。
      </div>
    </div>

    <div v-else class="polygon-mode-hint">
      当前为按区域配送（多边形）配置视图，无需设置半径中心点。
    </div>
  </Card>
</template>
