<script setup lang="ts">
/**
 * 文件职责：商品列表顶部筛选条。
 * 1. 提供门店、关键词、状态、类型筛选。
 * 2. 提供卡片/列表视图切换。
 */
import type { ProductKind, ProductStatus } from '#/api/product';
import type { ProductViewMode } from '#/views/product/list/types';

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

interface StoreOption {
  label: string;
  value: string;
}

interface KindOption {
  label: string;
  value: '' | ProductKind;
}

interface StatusOption {
  label: string;
  value: '' | ProductStatus;
}

interface Props {
  isStoreLoading: boolean;
  kind: '' | ProductKind;
  kindOptions: KindOption[];
  keyword: string;
  selectedStoreId: string;
  status: '' | ProductStatus;
  statusOptions: StatusOption[];
  storeOptions: StoreOption[];
  viewMode: ProductViewMode;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'search'): void;
  (event: 'update:kind', value: '' | ProductKind): void;
  (event: 'update:keyword', value: string): void;
  (event: 'update:selectedStoreId', value: string): void;
  (event: 'update:status', value: '' | ProductStatus): void;
  (event: 'update:viewMode', value: ProductViewMode): void;
}>();

/** 统一解析门店选择值。 */
function handleStoreChange(value: unknown) {
  if (typeof value === 'number' || typeof value === 'string') {
    emit('update:selectedStoreId', String(value));
    emit('search');
    return;
  }
  emit('update:selectedStoreId', '');
  emit('search');
}

/** 统一解析状态筛选值。 */
function handleStatusChange(value: unknown) {
  if (typeof value === 'string') {
    emit('update:status', value as '' | ProductStatus);
    emit('search');
    return;
  }
  emit('update:status', '');
  emit('search');
}

/** 统一解析类型筛选值。 */
function handleKindChange(value: unknown) {
  if (typeof value === 'string') {
    emit('update:kind', value as '' | ProductKind);
    emit('search');
    return;
  }
  emit('update:kind', '');
  emit('search');
}
</script>

<template>
  <Card :bordered="false" class="product-filter-toolbar-card">
    <div class="product-filter-toolbar">
      <Select
        :value="props.selectedStoreId"
        class="product-filter-select product-filter-store-select"
        :loading="props.isStoreLoading"
        :options="props.storeOptions"
        placeholder="请选择门店"
        :disabled="props.isStoreLoading || props.storeOptions.length === 0"
        @update:value="(value) => handleStoreChange(value)"
      />

      <Input
        :value="props.keyword"
        class="product-filter-input"
        allow-clear
        placeholder="搜索商品名称/编码"
        @press-enter="emit('search')"
        @update:value="(value) => emit('update:keyword', String(value || ''))"
      />

      <Select
        :value="props.status"
        class="product-filter-select"
        :options="props.statusOptions"
        @update:value="(value) => handleStatusChange(value)"
      />

      <Select
        :value="props.kind"
        class="product-filter-select"
        :options="props.kindOptions"
        @update:value="(value) => handleKindChange(value)"
      />

      <div class="product-filter-spacer"></div>

      <div class="product-view-switch">
        <button
          type="button"
          class="product-view-btn"
          :class="{ active: props.viewMode === 'card' }"
          @click="emit('update:viewMode', 'card')"
        >
          <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
            <rect x="1" y="1" width="6" height="6" rx="1" />
            <rect x="9" y="1" width="6" height="6" rx="1" />
            <rect x="1" y="9" width="6" height="6" rx="1" />
            <rect x="9" y="9" width="6" height="6" rx="1" />
          </svg>
        </button>
        <button
          type="button"
          class="product-view-btn"
          :class="{ active: props.viewMode === 'list' }"
          @click="emit('update:viewMode', 'list')"
        >
          <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
            <rect x="1" y="2" width="14" height="2.5" rx="1" />
            <rect x="1" y="6.75" width="14" height="2.5" rx="1" />
            <rect x="1" y="11.5" width="14" height="2.5" rx="1" />
          </svg>
        </button>
      </div>
    </div>
  </Card>
</template>
