<script setup lang="ts">
/**
 * 门店列表筛选栏：
 * - 只负责筛选项渲染
 * - 通过回调把值同步给父级 composable
 */
import type { SelectOptionItem } from '../types';

import type {
  ServiceType,
  StoreAuditStatus,
  StoreBusinessStatus,
} from '#/api/store';

import { Button, Card, InputSearch, Select } from 'ant-design-vue';

interface Props {
  auditStatus?: StoreAuditStatus;
  auditStatusOptions: SelectOptionItem<StoreAuditStatus>[];
  businessStatus?: StoreBusinessStatus;
  businessStatusOptions: SelectOptionItem<StoreBusinessStatus>[];
  keyword: string;
  onSetAuditStatus: (value?: StoreAuditStatus) => void;
  onSetBusinessStatus: (value?: StoreBusinessStatus) => void;
  onSetKeyword: (value: string) => void;
  onSetServiceType: (value?: ServiceType) => void;
  serviceType?: ServiceType;
  serviceTypeOptions: SelectOptionItem<ServiceType>[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'reset'): void;
  (event: 'search'): void;
}>();

/** 解析下拉枚举值（支持清空为 undefined）。 */
function readEnumValue<T extends number>(value: unknown): T | undefined {
  if (value === undefined || value === null || value === '') return undefined;
  const numericValue = Number(value);
  return Number.isFinite(numericValue) ? (numericValue as T) : undefined;
}

/** 同步关键字。 */
function handleKeywordChange(value: string | undefined) {
  props.onSetKeyword(value ?? '');
}

/** 同步营业状态。 */
function handleBusinessStatusChange(value: unknown) {
  props.onSetBusinessStatus(readEnumValue<StoreBusinessStatus>(value));
}

/** 同步审核状态。 */
function handleAuditStatusChange(value: unknown) {
  props.onSetAuditStatus(readEnumValue<StoreAuditStatus>(value));
}

/** 同步服务方式。 */
function handleServiceTypeChange(value: unknown) {
  props.onSetServiceType(readEnumValue<ServiceType>(value));
}
</script>

<template>
  <Card :bordered="false" size="small" class="store-filter-card">
    <div class="store-filter-row">
      <InputSearch
        :value="props.keyword"
        class="filter-search"
        placeholder="搜索门店名称 / 编号 / 电话"
        allow-clear
        @update:value="handleKeywordChange"
        @search="emit('search')"
      />
      <Select
        :value="props.businessStatus"
        class="filter-select"
        placeholder="营业状态"
        allow-clear
        :options="props.businessStatusOptions"
        @update:value="handleBusinessStatusChange"
      />
      <Select
        :value="props.auditStatus"
        class="filter-select"
        placeholder="审核状态"
        allow-clear
        :options="props.auditStatusOptions"
        @update:value="handleAuditStatusChange"
      />
      <Select
        :value="props.serviceType"
        class="filter-select"
        placeholder="服务方式"
        allow-clear
        :options="props.serviceTypeOptions"
        @update:value="handleServiceTypeChange"
      />
      <Button type="primary" @click="emit('search')">查询</Button>
      <Button @click="emit('reset')">重置</Button>
    </div>
  </Card>
</template>
