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

/**
 * 文件职责：成本管理顶部工具条（Tab、维度、门店、月份）。
 */
import type { FinanceCostDimension } from '#/api/finance/cost';

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

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

interface Props {
  activeTab: FinanceCostTabKey;
  dimension: FinanceCostDimension;
  dimensionOptions: Array<{ label: string; value: FinanceCostDimension }>;
  isStoreLoading: boolean;
  month: string;
  monthTitle: string;
  showStoreSelect: boolean;
  storeId: string;
  storeOptions: OptionItem[];
  tabOptions: Array<{ label: string; value: FinanceCostTabKey }>;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'nextMonth'): void;
  (event: 'prevMonth'): void;
  (event: 'update:activeTab', value: FinanceCostTabKey): void;
  (event: 'update:dimension', value: FinanceCostDimension): void;
  (event: 'update:month', value: string): 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="fc-toolbar">
    <Segmented
      class="fc-tab-segmented"
      :value="props.activeTab"
      :options="props.tabOptions"
      @update:value="
        (value) =>
          emit('update:activeTab', (value as FinanceCostTabKey) || 'entry')
      "
    />

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

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

      <div class="fc-month-picker">
        <Button class="fc-month-arrow" @click="emit('prevMonth')">
          <template #icon>
            <IconifyIcon icon="lucide:chevron-left" />
          </template>
        </Button>

        <div class="fc-month-title">{{ props.monthTitle }}</div>

        <Button class="fc-month-arrow" @click="emit('nextMonth')">
          <template #icon>
            <IconifyIcon icon="lucide:chevron-right" />
          </template>
        </Button>

        <Input
          class="fc-month-input"
          type="month"
          :value="props.month"
          @update:value="(value) => emit('update:month', String(value ?? ''))"
        />
      </div>
    </div>
  </div>
</template>
