<script setup lang="ts">
/**
 * 文件职责：商品列表动作条。
 * 1. 提供批量操作入口与添加商品按钮。
 * 2. 展示当前勾选数量并支持一键清空。
 */
import type { ProductBatchAction } from '../types';

import { Button, Dropdown, Menu } from 'ant-design-vue';

interface BatchActionOption {
  label: string;
  value: ProductBatchAction;
}

interface Props {
  batchActionOptions: BatchActionOption[];
  batchDisabled: boolean;
  selectedCount: number;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'add'): void;
  (event: 'batchAction', action: ProductBatchAction): void;
  (event: 'clearSelection'): void;
}>();

/** 透传批量动作点击。 */
function handleBatchMenuClick(payload: { key: number | string }) {
  emit('batchAction', String(payload.key) as ProductBatchAction);
}
</script>

<template>
  <div class="product-action-bar">
    <div class="product-action-left">
      <Dropdown :disabled="props.batchDisabled" :trigger="['click']">
        <Button :disabled="props.batchDisabled"> 批量操作 ▾ </Button>
        <template #overlay>
          <Menu @click="handleBatchMenuClick">
            <Menu.Item
              v-for="item in props.batchActionOptions"
              :key="item.value"
            >
              {{ item.label }}
            </Menu.Item>
          </Menu>
        </template>
      </Dropdown>

      <Button type="primary" @click="emit('add')">+ 添加商品</Button>
    </div>

    <div v-if="props.selectedCount > 0" class="product-action-selected">
      <span>已选择 {{ props.selectedCount }} 项</span>
      <Button type="link" @click="emit('clearSelection')">清空</Button>
    </div>
  </div>
</template>
