<script setup lang="ts">
/**
 * 文件职责：门店维度工具栏。
 * 1. 提供门店下拉选择。
 * 2. 提供“复制到其他门店”入口按钮。
 * 3. 仅负责展示和事件透出，不承载业务请求。
 */
import { Button, Card, Select } from 'ant-design-vue';

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

interface Props {
  copyButtonText?: string;
  copyPosition?: 'left' | 'right';
  copyDisabled?: boolean;
  isStoreLoading: boolean;
  showCopyButton?: boolean;
  selectedStoreId: string;
  storeOptions: StoreOption[];
  storePlaceholder?: string;
}

const props = withDefaults(defineProps<Props>(), {
  copyButtonText: '复制到其他门店',
  copyPosition: 'right',
  copyDisabled: false,
  showCopyButton: true,
  storePlaceholder: '请选择门店',
});

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

/** 透传门店选择事件，统一收敛为字符串 ID。 */
function handleStoreChange(value: unknown) {
  if (typeof value === 'number' || typeof value === 'string') {
    emit('update:selectedStoreId', String(value));
    return;
  }
  emit('update:selectedStoreId', '');
}
</script>

<template>
  <Card :bordered="false" class="store-scope-toolbar-card">
    <div class="store-scope-toolbar">
      <Select
        :value="props.selectedStoreId"
        class="store-scope-selector"
        :placeholder="props.storePlaceholder"
        :loading="props.isStoreLoading"
        :options="props.storeOptions"
        :disabled="props.isStoreLoading || props.storeOptions.length === 0"
        @update:value="(value) => handleStoreChange(value)"
      />
      <Button
        v-if="props.showCopyButton && props.copyPosition === 'left'"
        :disabled="props.copyDisabled"
        @click="emit('copy')"
      >
        {{ props.copyButtonText }}
      </Button>
      <div class="store-scope-spacer"></div>
      <Button
        v-if="props.showCopyButton && props.copyPosition === 'right'"
        :disabled="props.copyDisabled"
        @click="emit('copy')"
      >
        {{ props.copyButtonText }}
      </Button>
      <slot name="actions"></slot>
    </div>
  </Card>
</template>

<style scoped lang="less">
/* 文件职责：门店维度工具栏样式。 */
.store-scope-toolbar-card {
  :deep(.ant-card-body) {
    padding: 14px 16px;
  }
}

.store-scope-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.store-scope-selector {
  width: 280px;
}

.store-scope-spacer {
  flex: 1;
}

@media (max-width: 768px) {
  .store-scope-selector {
    width: 100%;
  }

  .store-scope-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .store-scope-spacer {
    display: none;
  }
}
</style>
