<!-- components/product-item.vue -->
<template>
  <view class="product-card">
    <view class="product-header">
      <text class="product-name">{{ product.name }}</text>
      <text class="product-status" :class="statusClass">{{ product.status }}</text>
    </view>

    <view class="price-info">
      <text class="price-label">销售价：</text>
      <text class="price-value">¥{{ product.price.toFixed(2) }}</text>
    </view>

    <view class="profit-info">
      <text class="profit-label">创客利润：</text>
      <text class="profit-value">¥{{ product.profit.toFixed(2) }}</text>
    </view>

    <view class="action-buttons">
      <button class="btn detail" @click="$emit('detail')">商品详情</button>
      <button 
        class="btn add" 
        :class="{ added: product.inLibrary }"
        @tap="$emit('add-to-library', product)"
      >
        {{ product.inLibrary ? '已加入' : '加入商品库' }}
      </button>
    </view>
  </view>
</template>
<script>
export default {
    props: {
        product: {
            type: Object,
            default: () => ({})
        }
    },
    data(){
        return {

        }
    }
}
</script>
<style lang="scss" scoped>
.product-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);

  .product-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  .product-name {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }

  .product-status {
    font-size: 24rpx;
    &.normal {
      color: #67C23A;
    }
  }

  .price-info, .profit-info {
    margin-bottom: 12rpx;
    display: flex;
    align-items: center;
  }

  .price-label, .profit-label {
    font-size: 26rpx;
    color: #666;
  }

  .price-value {
    color: #F56C6C;
    font-weight: bold;
  }

  .profit-value {
    color: #E6A23C;
    font-weight: bold;
  }

  .action-buttons {
    display: flex;
    gap: 20rpx;
    margin-top: 24rpx;

    .btn {
      flex: 1;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 32rpx;
      font-size: 26rpx;
      transition: all 0.3s;

      &.detail {
        background: #f8f8f8;
        color: #666;
      }

      &.add {
        background: linear-gradient(90deg, #409EFF, #79BBFF);
        color: #fff;

        &.added {
          background: #e0e0e0;
          color: #999;
        }
      }
    }
  }
}
</style>