<script setup lang="ts">
/**
 * 文件职责：发票记录筛选工具栏。
 */
import type { FinanceInvoiceFilterState } from '../types';

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

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

import {
  INVOICE_STATUS_OPTIONS,
  INVOICE_TYPE_OPTIONS,
} from '../composables/invoice-page/constants';

interface Props {
  filters: FinanceInvoiceFilterState;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'search'): void;
  (event: 'update:endDate', value: string): void;
  (event: 'update:invoiceType', value: string): void;
  (event: 'update:keyword', value: string): void;
  (event: 'update:startDate', value: string): void;
  (event: 'update:status', value: string): void;
}>();

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 handleStatusChange(value: unknown) {
  emit('update:status', String(value ?? 'all'));
  emit('search');
}

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

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

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

    <Select
      class="fi-status-select"
      :value="props.filters.status"
      :options="INVOICE_STATUS_OPTIONS"
      @update:value="(value) => handleStatusChange(value)"
    />

    <Select
      class="fi-type-select"
      :value="props.filters.invoiceType"
      :options="INVOICE_TYPE_OPTIONS"
      @update:value="(value) => handleInvoiceTypeChange(value)"
    />

    <div class="fi-toolbar-spacer" />

    <Input
      class="fi-search"
      :value="props.filters.keyword"
      placeholder="搜索发票号码/公司名"
      allow-clear
      @update:value="(value) => handleKeywordChange(value)"
      @press-enter="emit('search')"
    >
      <template #prefix>
        <IconifyIcon icon="lucide:search" class="fi-search-icon" />
      </template>
    </Input>
  </div>
</template>
