<script setup lang="ts">
import type { CustomerAnalysisPeriodFilter } from '#/api/customer';

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

import { ANALYSIS_PERIOD_OPTIONS } from '../composables/customer-analysis-page/constants';

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

interface Props {
  isExporting: boolean;
  isStoreLoading: boolean;
  period: CustomerAnalysisPeriodFilter;
  selectedStoreId: string;
  storeOptions: OptionItem[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'export'): void;
  (event: 'update:period', value: string): void;
  (event: 'update:selectedStoreId', value: string): void;
}>();

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

  emit('update:selectedStoreId', '');
}
</script>

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

    <span class="ca-period-label">统计周期</span>
    <Segmented
      class="ca-period-segment"
      :value="props.period"
      :options="ANALYSIS_PERIOD_OPTIONS"
      @change="(value) => emit('update:period', String(value ?? '30d'))"
    />

    <Button
      class="ca-export-btn"
      :loading="props.isExporting"
      @click="emit('export')"
    >
      导出报表
    </Button>
  </div>
</template>
