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

/**
 * 文件职责：经营报表工具栏（周期切换、门店选择、批量导出）。
 */
import type { FinanceBusinessReportPeriodType } from '#/api/finance';

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

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

import { REPORT_PERIOD_OPTIONS } from '../composables/report-page/constants';

interface Props {
  canExport: boolean;
  isBatchExporting: boolean;
  isStoreLoading: boolean;
  periodType: FinanceBusinessReportPeriodType;
  selectedStoreId: string;
  storeOptions: OptionItem[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'batchExport'): void;
  (event: 'update:periodType', value: FinanceBusinessReportPeriodType): 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', '');
}

function handlePeriodChange(value: unknown) {
  const period = String(value || 'daily') as FinanceBusinessReportPeriodType;
  emit('update:periodType', period);
}
</script>

<template>
  <div class="frp-toolbar">
    <Segmented
      class="frp-period-segment"
      :value="props.periodType"
      :options="REPORT_PERIOD_OPTIONS"
      @update:value="(value) => handlePeriodChange(value)"
    />

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

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