<script setup lang="ts">
import { computed } from "vue";
import ProductCardDefault from "./ProductCardDefault.vue";
import ProductCardGrid from "./ProductCardGrid.vue";
import ProductCardSingle from "./ProductCardSingle.vue";

interface Props {
  goods: any;
  theme?: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  click: [];
  add: [count: number];
  exchange: [];
  imageLoad: [];
  imageError: [];
}>();

// 根据 theme 选择对应的组件
const currentComponent = computed(() => {
  console.log("Current theme:", props.theme);
  switch (props.theme) {
    case '2':
      return ProductCardGrid;
    case '4':
      return ProductCardSingle;
    default:
      return ProductCardDefault;
  }
});

// 根据 theme 选择对应的事件
const handleClick = () => {
  // theme 4 不触发点击事件
  if (props.theme !== '4') {
    emit('click');
  }
};

const handleAdd = (count: number) => {
  emit('add', count);
};

const handleExchange = () => {
  emit('exchange');
};
</script>

<template>
  <component 
    :is="currentComponent" 
    :goods="goods" 
    :theme="theme"
    @click="handleClick"
    @add="handleAdd"
    @exchange="handleExchange"
    @image-load="emit('imageLoad')"
    @image-error="emit('imageError')"
  />
</template>
