<script setup lang="ts">
/**
 * 文件职责：交易流水筛选栏（门店、日期、类型、关键词、导出）。
 */
import type { QuickDateRangeKey } from '../types';

import { IconifyIcon } from '@vben/icons';

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

import {
  QUICK_RANGE_OPTIONS,
  TRANSACTION_CHANNEL_OPTIONS,
  TRANSACTION_PAYMENT_OPTIONS,
  TRANSACTION_TYPE_OPTIONS,
} from '../composables/transaction-page/constants';

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

interface FilterState {
  channel: string;
  endDate: string;
  keyword: string;
  paymentMethod: string;
  quickRange: QuickDateRangeKey;
  startDate: string;
  type: string;
}

interface Props {
  canExport: boolean;
  filters: FilterState;
  isExporting: boolean;
  isStoreLoading: boolean;
  selectedStoreId: string;
  storeOptions: OptionItem[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'export'): void;
  (event: 'search'): void;
  (event: 'update:channel', value: string): void;
  (event: 'update:endDate', value: string): void;
  (event: 'update:keyword', value: string): void;
  (event: 'update:paymentMethod', value: string): void;
  (event: 'update:quickRange', value: QuickDateRangeKey): void;
  (event: 'update:selectedStoreId', value: string): void;
  (event: 'update:startDate', value: string): void;
  (event: 'update:type', value: string): void;
}>();

function handleStoreChange(value: unknown) {
  if (typeof value === 'number' || typeof value === 'string') {
    emit('update:selectedStoreId', String(value));
    return;
  }
  emit('update:selectedStoreId', '');
}

function handleStartDateChange(value: string | undefined) {
  emit('update:startDate', String(value ?? ''));
  emit('search');
}

function handleEndDateChange(value: string | undefined) {
  emit('update:endDate', String(value ?? ''));
  emit('search');
}

function handleTypeChange(value: unknown) {
  emit('update:type', String(value ?? 'all'));
  emit('search');
}

function handleChannelChange(value: unknown) {
  emit('update:channel', String(value ?? 'all'));
  emit('search');
}

function handlePaymentChange(value: unknown) {
  emit('update:paymentMethod', String(value ?? 'all'));
  emit('search');
}

function handleQuickDateClick(value: QuickDateRangeKey) {
  emit('update:quickRange', value);
  emit('search');
}

function handleKeywordChange(value: string | undefined) {
  emit('update:keyword', String(value ?? ''));
}
</script>

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

    <Input
      class="ft-date-input"
      type="date"
      :value="props.filters.startDate"
      @update:value="(value) => handleStartDateChange(value)"
    />
    <span class="ft-date-sep">至</span>
    <Input
      class="ft-date-input"
      type="date"
      :value="props.filters.endDate"
      @update:value="(value) => handleEndDateChange(value)"
    />

    <div class="ft-quick-dates">
      <Button
        v-for="item in QUICK_RANGE_OPTIONS"
        :key="`quick-${item.value}`"
        size="small"
        :type="props.filters.quickRange === item.value ? 'primary' : 'default'"
        @click="handleQuickDateClick(item.value)"
      >
        {{ item.label }}
      </Button>
    </div>

    <Select
      class="ft-type-select"
      :value="props.filters.type"
      :options="TRANSACTION_TYPE_OPTIONS"
      @update:value="(value) => handleTypeChange(value)"
    />

    <Select
      class="ft-channel-select"
      :value="props.filters.channel"
      :options="TRANSACTION_CHANNEL_OPTIONS"
      @update:value="(value) => handleChannelChange(value)"
    />

    <Select
      class="ft-payment-select"
      :value="props.filters.paymentMethod"
      :options="TRANSACTION_PAYMENT_OPTIONS"
      @update:value="(value) => handlePaymentChange(value)"
    />

    <Input
      class="ft-search"
      :value="props.filters.keyword"
      placeholder="搜索流水号/订单号"
      allow-clear
      @update:value="(value) => handleKeywordChange(value)"
      @press-enter="emit('search')"
    >
      <template #prefix>
        <IconifyIcon icon="lucide:search" class="ft-search-icon" />
      </template>
    </Input>

    <div class="ft-toolbar-right">
      <Button
        class="ft-export-btn"
        :disabled="!props.canExport || !props.selectedStoreId"
        :loading="props.isExporting"
        @click="emit('export')"
      >
        <template #icon>
          <IconifyIcon icon="lucide:download" />
        </template>
        导出
      </Button>
    </div>
  </div>
</template>
