<template>
  <view class="product-card" @tap="handleCardClick">
    <image 
      :src="product.icon || '/static/images/default-product.png'" 
      class="product-image" 
      mode="aspectFill"
    />
    <view class="product-content">
      <view class="product-header">
        <text class="product-name">{{ product.name }}</text>
        <text v-if="product.is_hot" class="hot-tag">热门</text>
      </view>
      <text class="product-desc">{{ product.description }}</text>
      <view class="product-features" v-if="features.length > 0">
        <text 
          v-for="feature in features" 
          :key="feature"
          class="feature-tag"
        >
          {{ feature }}
        </text>
      </view>
      <view class="product-footer">
        <view class="price-info">
          <text class="price-label">起保费</text>
          <text class="price-value">¥{{ product.min_premium }}</text>
          <text class="price-unit">/年</text>
        </view>
        <view class="coverage-info">
          <text class="coverage-label">最高保额</text>
          <text class="coverage-value">{{ formatAmount(product.max_amount) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

// 定义属性
const props = defineProps({
  product: {
    type: Object,
    required: true,
    default: () => ({})
  },
  showFeatures: {
    type: Boolean,
    default: true
  }
})

// 定义事件
const emit = defineEmits(['click'])

// 计算属性
const features = computed(() => {
  if (!props.showFeatures) return []
  
  const featureList = []
  if (props.product.is_hot) featureList.push('热门推荐')
  if (props.product.min_premium <= 100) featureList.push('低保费')
  if (props.product.max_amount >= 1000000) featureList.push('高保额')
  
  return featureList.slice(0, 2)
})

// 格式化金额
const formatAmount = (amount) => {
  if (!amount) return '0'
  if (amount >= 10000) {
    return (amount / 10000).toFixed(0) + '万'
  }
  return amount.toString()
}

// 处理卡片点击
const handleCardClick = () => {
  emit('click', props.product)
}
</script>

<style scoped>
.product-card {
  display: flex;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 30rpx;
  flex-shrink: 0;
}

.product-content {
  flex: 1;
}

.product-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.hot-tag {
  background: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 20rpx;
}

.product-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 15rpx;
}

.product-features {
  display: flex;
  gap: 10rpx;
  margin-bottom: 20rpx;
}

.feature-tag {
  background: #f0f9ff;
  color: #1890ff;
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 24rpx;
  color: #999;
  margin-right: 10rpx;
}

.price-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
}

.price-unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
}

.coverage-info {
  text-align: right;
}

.coverage-label {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.coverage-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
</style>