<template>
  <view class="bg-gray-50 rounded-[24rpx] p-[28rpx] product-card">
    <!-- 产品名称 -->
    <text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">{{ productName }}</text>

    <!-- 产品标签 -->
    <view v-if="tags && tags.length" class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
      <view
        v-for="tag in tags"
        :key="tag.id"
        class="rounded-[8rpx] px-[16rpx] py-[6rpx]"
        :style="{
          backgroundColor: tag.bg_color,
          color: tag.text_color
        }"
      >
        <text class="text-[22rpx]">{{ tag.name }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="flex justify-between gap-[24rpx]">
      <nut-button
        plain
        color="#2563EB"
        class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600"
        @tap="handleDetail"
      >
        产品详情
      </nut-button>
      <nut-button
        color="#2563EB"
        class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
        @tap="handlePlan"
      >
        计划书
      </nut-button>
    </view>
  </view>
</template>

<script setup>
/**
 * 产品卡片组件
 *
 * @description 热卖产品列表项卡片，展示产品名称、标签和操作按钮
 * @component ProductCard
 */

import { defineProps, defineEmits } from 'vue';

/**
 * 组件属性
 */
const props = defineProps({
  /** 产品 ID */
  productId: {
    type: Number,
    required: true
  },
  /** 产品名称 */
  productName: {
    type: String,
    required: true
  },
  /** 产品标签数组 */
  tags: {
    type: Array,
    default: () => []
  }
});

/**
 * 组件事件
 */
const emit = defineEmits({
  /** 点击产品详情按钮 */
  detail: (productId) => typeof productId === 'number',
  /** 点击计划书按钮 */
  plan: (productId) => typeof productId === 'number'
});

/**
 * 处理产品详情点击
 *
 * @description 触发 detail 事件，传递产品 ID
 */
const handleDetail = () => {
  emit('detail', props.productId);
};

/**
 * 处理计划书点击
 *
 * @description 触发 plan 事件，传递产品 ID
 */
const handlePlan = () => {
  emit('plan', props.productId);
};
</script>

<style lang="less" scoped>
.product-card {
  // 可以添加卡片特定的样式
}
</style>