<script setup lang="ts">
/**
 * 文件职责：财务概览顶部维度工具条。
 */
import type { OptionItem } from '../types';

import type { FinanceOverviewDimension } from '#/api/finance/overview';

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

interface Props {
  dimension: FinanceOverviewDimension;
  dimensionOptions: Array<{ label: string; value: FinanceOverviewDimension }>;
  isStoreLoading: boolean;
  showStoreSelect: boolean;
  storeId: string;
  storeOptions: OptionItem[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'update:dimension', value: FinanceOverviewDimension): void;
  (event: 'update:storeId', value: string): void;
}>();

function handleStoreChange(value: unknown) {
  if (typeof value === 'number' || typeof value === 'string') {
    emit('update:storeId', String(value));
    return;
  }
  emit('update:storeId', '');
}
</script>

<template>
  <div class="fo-toolbar">
    <div class="fo-toolbar-title">财务概览驾驶舱</div>

    <div class="fo-toolbar-right">
      <Segmented
        class="fo-dimension-segmented"
        :value="props.dimension"
        :options="props.dimensionOptions"
        @update:value="
          (value) =>
            emit(
              'update:dimension',
              (value as FinanceOverviewDimension) || 'tenant',
            )
        "
      />

      <Select
        v-if="props.showStoreSelect"
        class="fo-store-select"
        :value="props.storeId"
        :options="props.storeOptions"
        :loading="props.isStoreLoading"
        :disabled="props.storeOptions.length === 0"
        placeholder="请选择门店"
        @update:value="(value) => handleStoreChange(value)"
      />
    </div>
  </div>
</template>
