<script setup lang="ts">
import type { StoredCardRecordFilterForm } from '../types';

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

defineProps<{
  canManage: boolean;
  exporting: boolean;
  filters: StoredCardRecordFilterForm;
}>();

const emit = defineEmits<{
  (event: 'export'): void;
  (event: 'reset'): void;
  (event: 'search'): void;
  (event: 'setDateRange', value: [any, any] | null): void;
  (event: 'setKeyword', value: string): void;
}>();

function setDateRange(value: [any, any] | null) {
  emit('setDateRange', value);
}
</script>

<template>
  <div class="msc-record-toolbar">
    <DatePicker.RangePicker
      :value="filters.dateRange ?? undefined"
      class="msc-record-range"
      @update:value="setDateRange"
    />

    <Input
      :value="filters.keyword"
      class="msc-record-keyword"
      allow-clear
      placeholder="搜索会员姓名/手机号"
      @update:value="(value) => emit('setKeyword', String(value ?? ''))"
      @press-enter="emit('search')"
    />

    <Button @click="emit('search')">搜索</Button>
    <Button @click="emit('reset')">重置</Button>
    <span class="msc-spacer"></span>
    <Button :disabled="!canManage" :loading="exporting" @click="emit('export')">
      导出
    </Button>
  </div>
</template>
